00:00 You see this right here, this is what happens when you don't handle errors. You see this, this is what happens when you do handle errors and you can give the user a nice experience, let them try again and do something different, whatever. Our job in this exercise is to learn about error boundaries and how they can make your

00:17 user experience not just a white screen of nothingness with something in the console saying, hey, something blew up. So that is what we're doing in this exercise. We're going to learn about error boundaries, a really nice and declarative way to handle errors in your React components and applications. So let's take this as an example.

00:36 If you recall, we have our elements, we've got our JSX and all of this compiles down into this simple object. Now, of course, it's a little bit more complicated than this particular object, but that's the basic idea is it's an object that has a bunch of properties and props and that goes all the way down.

00:56 So the point is that the calculator function here is not actually called. So we are not calling the calculator function at the time we create this element. We're not calling the calculator function. And so that means that we cannot catch an error that's happening in that calculator function by adding like a try catch around this.

01:17 So if we have an error going on inside of our calculator and we wanted to handle that with a try catch, then we would have to do it inside of the calculator. And this goes all the way down. Every component would need. This is just funny to think about doing would need a try catch so that you can handle those errors. What a joke. No, no, that would be awful.

01:37 So instead, it would be really nice if you could have some sort of component that has like a try and catch and that wraps all of your elements in the React manages, you know, handling all that for you so that you can write your stuff like a normal person instead

01:54 of putting try catches inside your components like this. And that is precisely what we have. They're called error boundaries, and they typically look something like this. So here's how you create an error boundary. Currently, maybe in the future one day, but it's been quite a few years that has been like this.

02:10 The only way to create an error boundary is to use a ancient mechanism for creating components, which is to use a class and have it extend the React component class. And then you implement this get derived state from error. And that gives you the error that happened inside of the children that are rendered.

02:29 So lucky for you, I don't or lucky for me. Also, I don't have to teach you how to make this. I'm not going to bother teaching you how to make this because you will never do it. Pretty much the entire industry is using a package called React error boundary for this. It is a third party package.

02:46 I'm one of the maintainers, actually, of this package. But yeah, pretty much everybody is either either using that or they're using a framework that has an error boundary feature built into the framework. So we're not going to bother implementing this like that's that's basically the implementation. Anyway, I'm not going to teach you how to make class components.

03:06 That's just not a thing you're ever going to do. So this is the basic idea. You have your error boundary, you have your fallback. It has a bunch of different ways that you can define a fallback. You have a fallback component you can pass to it or fallback render. So it can be dynamic in some ways. And then those fallback components can accept different props and stuff like that,

03:26 which we'll be exploring in this exercise for handling errors that happen asynchronously. You need to handle those as well. So React isn't going to handle those for you automatically. You can do your try catch or you can do your promise then or catch and all of that stuff.

03:44 And if an error occurs, then you can use this special function from a React error boundary called use error boundary. This gives you back a couple of things. One of those is show error or show boundary. You call that with an error and then it will trigger the error boundary for you. We're going to be doing this in this exercise also.

04:04 And then finally, an important thing for you to understand is that you can use multiple of these, just like you can do multiple try catches. And depending on where you put it is like how local that error boundary appears in the UI. And so your placement of the error boundary actually does

04:22 have some impact in what the user sees when they encounter some kind of error. So something important to think about and to consider as you're putting together your error boundaries. Maybe you want one big one at the top, but then you might want some nested ones further down, just like try catch. It's really not a whole lot different.

04:41 So that gives you a pretty good idea of what the error boundary is all about, what it's for. Ultimately, by the end of this exercise, you're going to get this type of an experience where on some sort of interaction, we have some sort of error and you're going to need to handle that in using error boundaries.

04:59 And they use error boundary hook, which I know we haven't gotten into hooks yet. So that special function is going to be a little bit magical to you. But yeah, it's important for you to know how to do that. So that's why we're doing that in this exercise.

05:15 So let's get rid of these nonsense white pages that users don't know what's going on. Let's give them an actual thought through idea or experience for when they encounter errors.