1 00:00:01,260 --> 00:00:02,757 ‫Let's now quickly learn 2 00:00:02,757 --> 00:00:04,380 ‫how to handle errors 3 00:00:04,380 --> 00:00:08,070 ‫that might occur during React rendering. 4 00:00:08,070 --> 00:00:09,870 ‫So this is something 5 00:00:09,870 --> 00:00:13,050 ‫that every single React app should have. 6 00:00:13,050 --> 00:00:15,510 ‫And so, let's now go implement 7 00:00:15,510 --> 00:00:17,673 ‫an error boundary for this. 8 00:00:19,800 --> 00:00:23,550 ‫So first of all, it's just completely normal 9 00:00:23,550 --> 00:00:27,780 ‫that bugs in our code make it into production. 10 00:00:27,780 --> 00:00:30,990 ‫So all these times where we get a white screen 11 00:00:30,990 --> 00:00:34,200 ‫in development when the app stops working, 12 00:00:34,200 --> 00:00:36,420 ‫our users would also 13 00:00:36,420 --> 00:00:40,080 ‫only get that white screen in production. 14 00:00:40,080 --> 00:00:42,930 ‫And so that's just completely unacceptable, 15 00:00:42,930 --> 00:00:47,160 ‫because then the user has no idea what to do. 16 00:00:47,160 --> 00:00:51,000 ‫For example, here in our bookings table, 17 00:00:51,000 --> 00:00:54,120 ‫let's say that for some reason we have a bug here 18 00:00:54,120 --> 00:00:55,653 ‫that we didn't detect. 19 00:00:56,670 --> 00:01:01,200 ‫So here we are trying to now read bookings.length 20 00:01:01,200 --> 00:01:04,920 ‫in a situation where it might not exist yet. 21 00:01:04,920 --> 00:01:06,870 ‫So maybe we wrote this code, 22 00:01:06,870 --> 00:01:09,210 ‫but for some reason we didn't test it 23 00:01:09,210 --> 00:01:12,360 ‫and then this code made it into production. 24 00:01:12,360 --> 00:01:15,120 ‫And so then when the users, 25 00:01:15,120 --> 00:01:16,953 ‫and let's actually reload this here, 26 00:01:18,000 --> 00:01:20,340 ‫so then when a user comes here, 27 00:01:20,340 --> 00:01:23,130 ‫well then we get this white screen, 28 00:01:23,130 --> 00:01:26,943 ‫because we had an error here inside React rendering. 29 00:01:28,170 --> 00:01:29,940 ‫So then we see all of this 30 00:01:29,940 --> 00:01:32,940 ‫and this kind of situation happened all the time 31 00:01:32,940 --> 00:01:37,050 ‫while we were developing our application, right? 32 00:01:37,050 --> 00:01:42,050 ‫And so that means that this might also happen in production. 33 00:01:42,330 --> 00:01:43,650 ‫Now luckily for us, 34 00:01:43,650 --> 00:01:47,370 ‫we can fix this situation with a React feature 35 00:01:47,370 --> 00:01:49,680 ‫called error boundaries. 36 00:01:49,680 --> 00:01:52,890 ‫So error boundaries are like try-catch 37 00:01:52,890 --> 00:01:54,870 ‫but for React rendering, 38 00:01:54,870 --> 00:01:56,400 ‫which basically allows us 39 00:01:56,400 --> 00:02:01,230 ‫to react to JavaScript errors in our render code, 40 00:02:01,230 --> 00:02:03,813 ‫so in React render logic. 41 00:02:04,680 --> 00:02:07,200 ‫Now error boundaries are actually 42 00:02:07,200 --> 00:02:11,340 ‫quite hard to use in React because for some reason 43 00:02:11,340 --> 00:02:15,030 ‫they're still implemented using class components 44 00:02:15,030 --> 00:02:18,930 ‫and in a very weird and hard to use way. 45 00:02:18,930 --> 00:02:22,200 ‫And therefore, everyone just uses this package 46 00:02:22,200 --> 00:02:24,840 ‫called React error boundary, 47 00:02:24,840 --> 00:02:28,140 ‫which makes it really, really easy. 48 00:02:28,140 --> 00:02:31,080 ‫So let's come here and install it. 49 00:02:31,080 --> 00:02:36,080 ‫So NPM install React error boundary. 50 00:02:39,625 --> 00:02:43,890 ‫And so as we can see here on this NPM link, 51 00:02:45,960 --> 00:02:48,210 ‫so where this package is hosted, 52 00:02:48,210 --> 00:02:52,980 ‫we see that it gets over 3 million downloads a week. 53 00:02:52,980 --> 00:02:56,580 ‫So this is basically a package that everyone uses. 54 00:02:56,580 --> 00:02:58,560 ‫So that's why it's super important 55 00:02:58,560 --> 00:03:01,530 ‫that I'm showing you this package here 56 00:03:01,530 --> 00:03:04,323 ‫as we are building this real world application. 57 00:03:06,510 --> 00:03:09,120 ‫So this finished successfully. 58 00:03:09,120 --> 00:03:11,550 ‫And so this package now all it does 59 00:03:11,550 --> 00:03:14,490 ‫is to give us an error boundary component 60 00:03:14,490 --> 00:03:16,680 ‫where we can pass in a fallback 61 00:03:16,680 --> 00:03:20,310 ‫and also a function to reset the application, 62 00:03:20,310 --> 00:03:23,280 ‫so whenever an error has occurred. 63 00:03:23,280 --> 00:03:25,140 ‫And so to use this, 64 00:03:25,140 --> 00:03:28,140 ‫we basically wrap our entire application 65 00:03:28,140 --> 00:03:30,990 ‫into that error boundary. 66 00:03:30,990 --> 00:03:33,330 ‫So we could do that here. 67 00:03:33,330 --> 00:03:34,650 ‫So right here. 68 00:03:34,650 --> 00:03:35,880 ‫But this component 69 00:03:35,880 --> 00:03:39,960 ‫is not really part of our application tree itself. 70 00:03:39,960 --> 00:03:44,070 ‫So let's actually place it right here. 71 00:03:44,070 --> 00:03:46,980 ‫So wrapping this one right here 72 00:03:46,980 --> 00:03:50,370 ‫into the error boundary 73 00:03:50,370 --> 00:03:54,033 ‫that's coming from this package that we just installed. 74 00:03:55,830 --> 00:03:59,043 ‫So here we can then specify a prop called, 75 00:03:59,970 --> 00:04:03,360 ‫fallback component, this one right here. 76 00:04:03,360 --> 00:04:06,120 ‫And so then here, it's not an element, 77 00:04:06,120 --> 00:04:08,490 ‫but really the component itself. 78 00:04:08,490 --> 00:04:11,200 ‫And so here, actually we already have 79 00:04:12,060 --> 00:04:16,263 ‫the beginning of a component, which is this error fallback. 80 00:04:18,030 --> 00:04:22,410 ‫So let's actually start writing some code here. 81 00:04:22,410 --> 00:04:26,710 ‫And so this component will then automatically receive 82 00:04:27,960 --> 00:04:30,480 ‫the error that has occurred. 83 00:04:30,480 --> 00:04:32,160 ‫And then here, 84 00:04:32,160 --> 00:04:35,613 ‫let's use this styled error fallback. 85 00:04:40,410 --> 00:04:43,270 ‫Then let's add the box component that we have here 86 00:04:44,250 --> 00:04:46,803 ‫and then a heading, 87 00:04:48,060 --> 00:04:48,893 ‫as an H1. 88 00:04:53,592 --> 00:04:57,990 ‫And then let's just say something went wrong. 89 00:04:57,990 --> 00:05:00,933 ‫Maybe we can add some nice emoji here, 90 00:05:01,980 --> 00:05:04,593 ‫like this guy right here. 91 00:05:06,411 --> 00:05:10,260 ‫And so now we can use that here as the fallback. 92 00:05:10,260 --> 00:05:12,723 ‫So error fallback. 93 00:05:14,550 --> 00:05:16,710 ‫And of course this one right here 94 00:05:16,710 --> 00:05:19,230 ‫could have any name that we wanted. 95 00:05:19,230 --> 00:05:20,880 ‫Just this one needs, of course, 96 00:05:20,880 --> 00:05:24,363 ‫to be exactly this one coming from this package. 97 00:05:25,410 --> 00:05:27,783 ‫So let's give this is save. 98 00:05:29,730 --> 00:05:31,050 ‫Let's reload. 99 00:05:31,050 --> 00:05:34,080 ‫And then here we actually get 100 00:05:34,080 --> 00:05:38,010 ‫that fallback error component that we just wrote. 101 00:05:38,010 --> 00:05:39,360 ‫Now the problem is 102 00:05:39,360 --> 00:05:44,070 ‫that here we are now outside of app.JSX 103 00:05:44,070 --> 00:05:48,240 ‫and therefore we no longer have access to our global styles. 104 00:05:48,240 --> 00:05:51,513 ‫And so let's bring them back in here. 105 00:05:53,010 --> 00:05:58,010 ‫So that's called global styles, like this. 106 00:05:58,350 --> 00:06:03,057 ‫And then we need to wrap this once again like so. 107 00:06:03,057 --> 00:06:05,320 ‫And then here we could 108 00:06:06,630 --> 00:06:10,560 ‫even write the exact error message that has occurred, 109 00:06:10,560 --> 00:06:14,340 ‫because remember that this component here 110 00:06:14,340 --> 00:06:17,340 ‫actually gets past the error. 111 00:06:17,340 --> 00:06:22,340 ‫And so then we can, here do error.message. 112 00:06:22,380 --> 00:06:26,190 ‫And so, then that provides at least some information, 113 00:06:26,190 --> 00:06:28,590 ‫which isn't that useful to the user, 114 00:06:28,590 --> 00:06:31,200 ‫but may be to the developer. 115 00:06:31,200 --> 00:06:32,500 ‫Now, what do we have here? 116 00:06:35,190 --> 00:06:36,720 ‫Well, that's not really important. 117 00:06:36,720 --> 00:06:39,030 ‫Basically it tells us here 118 00:06:39,030 --> 00:06:40,750 ‫that React will try to recreate 119 00:06:41,730 --> 00:06:45,090 ‫using the error boundary that we have provided. 120 00:06:45,090 --> 00:06:47,550 ‫So React is aware that this exists, 121 00:06:47,550 --> 00:06:51,360 ‫and so that's why it now rendered this error boundary 122 00:06:51,360 --> 00:06:55,203 ‫instead of just this blank screen that we had earlier. 123 00:06:56,340 --> 00:07:00,090 ‫Now, this in itself is still not that useful, 124 00:07:00,090 --> 00:07:04,020 ‫because the user still doesn't know what to do with it. 125 00:07:04,020 --> 00:07:07,440 ‫And so here let's just quickly add a button, 126 00:07:07,440 --> 00:07:11,280 ‫which will allow the user to simply go back 127 00:07:11,280 --> 00:07:12,843 ‫to the app's home screen. 128 00:07:15,360 --> 00:07:17,553 ‫So let's use our button component. 129 00:07:18,690 --> 00:07:19,930 ‫Let's make it 130 00:07:21,390 --> 00:07:22,533 ‫a large one. 131 00:07:24,240 --> 00:07:28,263 ‫And here, let's just say, try again. 132 00:07:30,210 --> 00:07:32,100 ‫Now the callback function here, 133 00:07:32,100 --> 00:07:37,080 ‫we will actually provide right into the error boundary. 134 00:07:37,080 --> 00:07:40,080 ‫So here we can pass in another prop, 135 00:07:40,080 --> 00:07:43,800 ‫which is called the on reset prop. 136 00:07:43,800 --> 00:07:47,670 ‫And so here, let's then basically redirect the user 137 00:07:47,670 --> 00:07:49,863 ‫back to the index page. 138 00:07:51,000 --> 00:07:55,020 ‫So here, of course, we're not gonna use React Router, 139 00:07:55,020 --> 00:07:58,200 ‫but instead just the regular dump function 140 00:07:58,200 --> 00:08:03,200 ‫window.location.replace, 141 00:08:04,110 --> 00:08:06,333 ‫and then back to the homepage. 142 00:08:07,590 --> 00:08:11,760 ‫All right, and so then inside the error fallback, 143 00:08:11,760 --> 00:08:14,880 ‫we get access to this on reset prop, 144 00:08:14,880 --> 00:08:16,413 ‫but it's gonna be called, 145 00:08:18,000 --> 00:08:19,590 ‫reset 146 00:08:19,590 --> 00:08:20,423 ‫error 147 00:08:21,630 --> 00:08:24,000 ‫boundary and solve. 148 00:08:24,000 --> 00:08:26,313 ‫Here, let's then that connect. 149 00:08:31,230 --> 00:08:32,940 ‫And there we go. 150 00:08:32,940 --> 00:08:35,400 ‫So let's try this one more time. 151 00:08:35,400 --> 00:08:38,520 ‫So it's trying to load our data here. 152 00:08:38,520 --> 00:08:41,790 ‫Then that fails, and then we can click try again, 153 00:08:41,790 --> 00:08:44,910 ‫which will bring us back to our homepage. 154 00:08:44,910 --> 00:08:45,870 ‫Nice. 155 00:08:45,870 --> 00:08:48,840 ‫So the error has been reset, and of course, 156 00:08:48,840 --> 00:08:52,650 ‫if we then go back here, the error will come back again. 157 00:08:52,650 --> 00:08:54,810 ‫But at least now the user knows 158 00:08:54,810 --> 00:08:57,573 ‫that they can use the rest of the application. 159 00:08:58,620 --> 00:09:01,023 ‫Great, now, just know 160 00:09:01,023 --> 00:09:04,500 ‫that these error boundaries really only catch errors 161 00:09:04,500 --> 00:09:06,780 ‫while React is rendering. 162 00:09:06,780 --> 00:09:10,620 ‫So bugs that occur in some event handlers 163 00:09:10,620 --> 00:09:14,280 ‫or in an effect or in some asynchronous code 164 00:09:14,280 --> 00:09:16,980 ‫will not be caught by the error boundary. 165 00:09:16,980 --> 00:09:20,640 ‫But for those, we many times have some other mechanisms, 166 00:09:20,640 --> 00:09:24,420 ‫like for example, those errors that are usually returned 167 00:09:24,420 --> 00:09:28,380 ‫from use Query, but for all the bugs that might happen 168 00:09:28,380 --> 00:09:33,153 ‫in rendering, like this one, that we should now put back. 169 00:09:34,560 --> 00:09:36,810 ‫So for errors like this, 170 00:09:36,810 --> 00:09:40,260 ‫you should always, always implement an error boundary, 171 00:09:40,260 --> 00:09:41,553 ‫like I just showed you.