Let's add one more tool to our knowledge in React andReact 16, which was a new version of react,
introduced something called "error boundaries" and it solved the problem that React had previously, which was
if there were some sort of an error within a component for whatever reason there wasn't a graceful way
to handle it. on the next render you'd get all these cryptic errors and things just wouldn't work
out nicely. For a user
You want to make sure that even if a part of your component tree breaks, you can still have a nice UI experience,
maybe a piece of text that says something went wrong, but not have the app break.
So in this video we're going to talk about error boundaries and apply it to our RoboFriends app.
Let's get started.
The first thing I want to do is in the component I'm going to add a new file and we'll call this component
ErrorBoundry.js and just a reminder you do need React 16 or higher for this to work.
So make sure that in your package.json file that you have the right version of React. Now in here we can
do our regular import react
component and we're importing that from the react package.
And then finally we have a class of ErrorBoundry that extends the react component
and within here we have the constructor
and again we call super here.
And just so we have access to the props, we'll have to - within the constructor - have the props paramater.
And then finally for this.state we're going to create a property called hasError.
And for now it's going to be false.
And let's also not forget to export default ErrorBoundry so we have access to it and have our default
render here that will return for us.
Hmm what should it return.
Well ideally with this ErrorBoundry component we can wrap the component or we can wrap a component such
as the CardList component with an ErrorBoundry component and if the CardList component fails we can
catch it in the ErrorBoundry.
I know this is a little bit hard to follow. React does have really good documentation on this so you can
always read up on it later.
But stick with me.
Trust me it's going to make sense.
So the first thing we want to do is we want to check if this.state.hasError is equal to true.
So if there is some sort of an error then we want to return this default state of how can we gracefully
display something to the user, that makes it meaningful to them, even though we weren't able to display
what we intended originally.
In our case we can just say that we have an of "Oooops. That is not good" for the user to see.
So we're saying here that if, for some reason there's an error we're going to just spit out an h1 tag.
Otherwise,
and we can just do a return here.
We're going to say that this.props.children will render, again remember -because children will
be anything that's in-between ErrorBoundry.
In our case is probably going to be the CardList. So render the children, whatever's inside
of ErrorBoundry,
otherwise render .
Now how are we going to be able to change this hasError? Well with React 16 we have a new life cycle
method that was introduced and it's called componentDidCatch and this componentDidCatch is kind
of like the try catch block in javascript if anything errors out it will run this lifecycle hook and this
lifecycle hook actually gets a couple of parameters.
That is the error and the info.
But in our case we just want to say that this.setState is going to now, if this component
errors out, is going to have has error equal to true.
So if that ever gets triggered were going to render the H-1 tag.
All right.
Let's save and let's go to app.js
Let's import our errorBoundry
from our components.
And now we can use this.
Let's use it over here for the card list.
So if something goes on with the CardList we want to have some sort of a graceful exit boundary.
So we'll say ErrorBoundary and because we're rendering this dot props dot children, if we wrap it like
this.
And nothing goes on it will still render CardList.
So let's save Let's see if we made any mistakes.
So far so good.
Let's go back to our app and.
All right let's look at the console.
No errors here, if we refresh no errors here if I type stuff, no errors, that's good.
Now with this error boundary, if anything in the CardList fails it's going to catch it and display our error
message.
So let's see what I mean.
If I go into CardList here and now in here if we say, if for now we'll just say true.
We're going to assume that in CardList there was an error, so we can do that by saying throw new error and say "NOOOOOOO"
If we save this, everything is still working.
If I go back you see that I'm still getting the error, it says uncaught error.
No.
And at the bottom it says the above error occurred in the CardList component. React will try to recreate
this component tree from scratch using the errorBoundry you provided. ErrorBoundry.
OK that's great but I still see the error.
And that is because we're running right now in development mode. For create react app.
They want to show us whenever there's an error in our component. Error boundaries are really useful when
you put your apps into production where you don't have this detailed logs of what errors you have. Your
users are never going to see this.
So if I refresh here really fast do you see that right over here.
How it said - Oooops that is not good.
Oops.
That is not good.
So in production users are going to see that.
But for our case the intended behavior for create React App in development is to show us the errors
but with error boundaries we have that extra safety during production.
That's it for now.
I'll see in the next one. Bye bye.