1 00:00:01,650 --> 00:00:10,830 Let's add one more tool to our knowledge in React andReact 16, which was a new version of react, 2 00:00:11,010 --> 00:00:18,780 introduced something called "error boundaries" and it solved the problem that React had previously, which was 3 00:00:19,110 --> 00:00:25,110 if there were some sort of an error within a component for whatever reason there wasn't a graceful way 4 00:00:25,110 --> 00:00:32,369 to handle it. on the next render you'd get all these cryptic errors and things just wouldn't work 5 00:00:32,369 --> 00:00:34,710 out nicely. For a user 6 00:00:35,130 --> 00:00:42,900 You want to make sure that even if a part of your component tree breaks, you can still have a nice UI experience, 7 00:00:42,910 --> 00:00:48,780 maybe a piece of text that says something went wrong, but not have the app break. 8 00:00:48,780 --> 00:00:54,520 So in this video we're going to talk about error boundaries and apply it to our RoboFriends app. 9 00:00:54,600 --> 00:00:55,500 Let's get started. 10 00:00:57,140 --> 00:01:04,370 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 11 00:01:04,760 --> 00:01:13,330 ErrorBoundry.js and just a reminder you do need React 16 or higher for this to work. 12 00:01:13,430 --> 00:01:21,930 So make sure that in your package.json file that you have the right version of React. Now in here we can 13 00:01:22,110 --> 00:01:25,980 do our regular import react 14 00:01:28,960 --> 00:01:33,620 component and we're importing that from the react package. 15 00:01:34,050 --> 00:01:41,000 And then finally we have a class of ErrorBoundry that extends the react component 16 00:01:43,830 --> 00:01:45,840 and within here we have the constructor 17 00:01:48,960 --> 00:01:51,460 and again we call super here. 18 00:01:52,610 --> 00:02:03,420 And just so we have access to the props, we'll have to - within the constructor - have the props paramater. 19 00:02:03,560 --> 00:02:11,880 And then finally for this.state we're going to create a property called hasError. 20 00:02:12,370 --> 00:02:16,190 And for now it's going to be false. 21 00:02:16,260 --> 00:02:26,310 And let's also not forget to export default ErrorBoundry so we have access to it and have our default 22 00:02:26,520 --> 00:02:29,760 render here that will return for us. 23 00:02:30,830 --> 00:02:32,760 Hmm what should it return. 24 00:02:33,170 --> 00:02:41,300 Well ideally with this ErrorBoundry component we can wrap the component or we can wrap a component such 25 00:02:41,300 --> 00:02:48,890 as the CardList component with an ErrorBoundry component and if the CardList component fails we can 26 00:02:48,890 --> 00:02:51,340 catch it in the ErrorBoundry. 27 00:02:52,390 --> 00:02:57,790 I know this is a little bit hard to follow. React does have really good documentation on this so you can 28 00:02:57,790 --> 00:02:59,520 always read up on it later. 29 00:02:59,530 --> 00:03:01,150 But stick with me. 30 00:03:01,150 --> 00:03:03,220 Trust me it's going to make sense. 31 00:03:03,220 --> 00:03:14,080 So the first thing we want to do is we want to check if this.state.hasError is equal to true. 32 00:03:14,150 --> 00:03:23,000 So if there is some sort of an error then we want to return this default state of how can we gracefully 33 00:03:24,330 --> 00:03:29,670 display something to the user, that makes it meaningful to them, even though we weren't able to display 34 00:03:29,670 --> 00:03:31,190 what we intended originally. 35 00:03:32,040 --> 00:03:44,590 In our case we can just say that we have an of "Oooops. That is not good" for the user to see. 36 00:03:44,620 --> 00:03:52,760 So we're saying here that if, for some reason there's an error we're going to just spit out an h1 tag. 37 00:03:53,940 --> 00:03:54,870 Otherwise, 38 00:03:55,100 --> 00:03:58,460 and we can just do a return here. 39 00:03:58,560 --> 00:04:06,150 We're going to say that this.props.children will render, again remember -because children will 40 00:04:06,150 --> 00:04:09,070 be anything that's in-between ErrorBoundry. 41 00:04:09,090 --> 00:04:16,050 In our case is probably going to be the CardList. So render the children, whatever's inside 42 00:04:16,140 --> 00:04:17,410 of ErrorBoundry, 43 00:04:17,470 --> 00:04:19,329 otherwise render . 44 00:04:19,709 --> 00:04:28,390 Now how are we going to be able to change this hasError? Well with React 16 we have a new life cycle 45 00:04:28,390 --> 00:04:38,270 method that was introduced and it's called componentDidCatch and this componentDidCatch is kind 46 00:04:38,270 --> 00:04:49,390 of like the try catch block in javascript if anything errors out it will run this lifecycle hook and this 47 00:04:49,400 --> 00:04:52,420 lifecycle hook actually gets a couple of parameters. 48 00:04:52,450 --> 00:04:55,690 That is the error and the info. 49 00:04:55,830 --> 00:05:03,540 But in our case we just want to say that this.setState is going to now, if this component 50 00:05:03,590 --> 00:05:08,230 errors out, is going to have has error equal to true. 51 00:05:08,280 --> 00:05:13,760 So if that ever gets triggered were going to render the H-1 tag. 52 00:05:13,870 --> 00:05:14,190 All right. 53 00:05:14,230 --> 00:05:17,490 Let's save and let's go to app.js 54 00:05:17,580 --> 00:05:20,730 Let's import our errorBoundry 55 00:05:25,190 --> 00:05:26,630 from our components. 56 00:05:32,210 --> 00:05:34,030 And now we can use this. 57 00:05:34,100 --> 00:05:38,740 Let's use it over here for the card list. 58 00:05:38,900 --> 00:05:46,370 So if something goes on with the CardList we want to have some sort of a graceful exit boundary. 59 00:05:46,580 --> 00:05:55,340 So we'll say ErrorBoundary and because we're rendering this dot props dot children, if we wrap it like 60 00:05:55,340 --> 00:05:55,970 this. 61 00:05:57,250 --> 00:06:00,450 And nothing goes on it will still render CardList. 62 00:06:00,490 --> 00:06:03,030 So let's save Let's see if we made any mistakes. 63 00:06:03,130 --> 00:06:04,570 So far so good. 64 00:06:04,690 --> 00:06:08,320 Let's go back to our app and. 65 00:06:08,380 --> 00:06:10,400 All right let's look at the console. 66 00:06:10,410 --> 00:06:17,280 No errors here, if we refresh no errors here if I type stuff, no errors, that's good. 67 00:06:19,190 --> 00:06:26,840 Now with this error boundary, if anything in the CardList fails it's going to catch it and display our error 68 00:06:26,840 --> 00:06:28,000 message. 69 00:06:28,070 --> 00:06:29,420 So let's see what I mean. 70 00:06:29,710 --> 00:06:39,420 If I go into CardList here and now in here if we say, if for now we'll just say true. 71 00:06:39,660 --> 00:06:48,440 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" 72 00:06:51,790 --> 00:06:54,850 If we save this, everything is still working. 73 00:06:54,850 --> 00:06:59,750 If I go back you see that I'm still getting the error, it says uncaught error. 74 00:06:59,800 --> 00:07:00,620 No. 75 00:07:00,910 --> 00:07:07,030 And at the bottom it says the above error occurred in the CardList component. React will try to recreate 76 00:07:07,030 --> 00:07:11,950 this component tree from scratch using the errorBoundry you provided. ErrorBoundry. 77 00:07:12,360 --> 00:07:16,670 OK that's great but I still see the error. 78 00:07:16,900 --> 00:07:23,770 And that is because we're running right now in development mode. For create react app. 79 00:07:23,770 --> 00:07:29,780 They want to show us whenever there's an error in our component. Error boundaries are really useful when 80 00:07:29,780 --> 00:07:38,750 you put your apps into production where you don't have this detailed logs of what errors you have. Your 81 00:07:38,750 --> 00:07:40,540 users are never going to see this. 82 00:07:40,550 --> 00:07:45,040 So if I refresh here really fast do you see that right over here. 83 00:07:45,050 --> 00:07:48,320 How it said - Oooops that is not good. 84 00:07:48,470 --> 00:07:49,010 Oops. 85 00:07:49,100 --> 00:07:50,450 That is not good. 86 00:07:50,450 --> 00:07:54,820 So in production users are going to see that. 87 00:07:55,040 --> 00:08:01,640 But for our case the intended behavior for create React App in development is to show us the errors 88 00:08:01,910 --> 00:08:05,770 but with error boundaries we have that extra safety during production. 89 00:08:07,830 --> 00:08:08,890 That's it for now. 90 00:08:08,890 --> 00:08:10,800 I'll see in the next one. Bye bye.