1 00:00:01,170 --> 00:00:03,930 ‫So whenever we are doing any data fetching 2 00:00:03,930 --> 00:00:05,790 ‫in any web application 3 00:00:05,790 --> 00:00:08,160 ‫and dealing with asynchronous data, 4 00:00:08,160 --> 00:00:12,210 ‫we always need to assume that something can go wrong. 5 00:00:12,210 --> 00:00:14,670 ‫And so therefore, let's now account 6 00:00:14,670 --> 00:00:18,033 ‫for that situation by handling those errors. 7 00:00:19,961 --> 00:00:22,170 ‫So one of the things that can go wrong 8 00:00:22,170 --> 00:00:26,310 ‫is your users suddenly losing their internet connection. 9 00:00:26,310 --> 00:00:29,940 ‫So let's simulate that here again in our network tab 10 00:00:29,940 --> 00:00:33,660 ‫and let's make sure that we are first on slow 3G. 11 00:00:33,660 --> 00:00:36,420 ‫Then let's reload here, and then 12 00:00:36,420 --> 00:00:40,050 ‫while the movies are loaded, we will click on offline. 13 00:00:40,050 --> 00:00:41,253 ‫So right now, 14 00:00:42,270 --> 00:00:44,460 ‫so you see that now the application 15 00:00:44,460 --> 00:00:47,160 ‫basically never leaves the state. 16 00:00:47,160 --> 00:00:50,580 ‫And also when we come to our console here we see 17 00:00:50,580 --> 00:00:53,100 ‫that we failed to fetch, 18 00:00:53,100 --> 00:00:56,610 ‫which again is because our user basically now 19 00:00:56,610 --> 00:00:59,460 ‫lost their internet connection. 20 00:00:59,460 --> 00:01:02,160 ‫So when that happens, we want to display some kind 21 00:01:02,160 --> 00:01:05,430 ‫of error message here on the screen and not 22 00:01:05,430 --> 00:01:09,060 ‫keep the application in this loading state here forever. 23 00:01:09,060 --> 00:01:11,820 ‫Because like this, the user will think 24 00:01:11,820 --> 00:01:14,220 ‫that the data might eventually arrive 25 00:01:14,220 --> 00:01:16,500 ‫but of course it will not. 26 00:01:16,500 --> 00:01:21,500 ‫Now, reacting to errors like this is actually not built 27 00:01:21,600 --> 00:01:23,403 ‫into the fetch function itself. 28 00:01:24,339 --> 00:01:26,970 ‫And so we have to kind of do that manually. 29 00:01:26,970 --> 00:01:30,693 ‫And so let's try that here in our fetch movies function. 30 00:01:32,820 --> 00:01:35,850 ‫So here on the response object 31 00:01:35,850 --> 00:01:40,263 ‫that we receive from fetch exists one, okay, property. 32 00:01:41,587 --> 00:01:43,200 ‫And so here we can check for that. 33 00:01:43,200 --> 00:01:46,590 ‫So basically if the response is not okay 34 00:01:46,590 --> 00:01:48,543 ‫then we want to throw a new error. 35 00:01:49,620 --> 00:01:52,683 ‫And again, this is pretty standard JavaScript code. 36 00:01:53,730 --> 00:01:58,660 ‫So then let's just say something went wrong 37 00:02:00,630 --> 00:02:04,140 ‫with fetching movies now, okay? 38 00:02:04,140 --> 00:02:06,270 ‫And so now if we throw an error here 39 00:02:06,270 --> 00:02:10,417 ‫we need to wrap all of our code into a try catch block. So, 40 00:02:13,440 --> 00:02:17,340 ‫try and catch 41 00:02:17,340 --> 00:02:20,460 ‫which again is just a normal JavaScript feature. 42 00:02:20,460 --> 00:02:22,713 ‫This one has nothing to do with React. 43 00:02:23,550 --> 00:02:26,973 ‫Okay, and here let's console that error. 44 00:02:28,500 --> 00:02:32,280 ‫That error, okay? 45 00:02:32,280 --> 00:02:34,263 ‫And then let's come back here. 46 00:02:35,700 --> 00:02:39,093 ‫Well, if we load now, then of course nothing will work. 47 00:02:40,020 --> 00:02:41,940 ‫So let's do that trick again where first 48 00:02:41,940 --> 00:02:43,893 ‫we set it to slow 3G, 49 00:02:44,859 --> 00:02:49,260 ‫then let's reload and then let's wait for it. 50 00:02:49,260 --> 00:02:54,063 ‫We set our users back to offline right now. 51 00:02:55,740 --> 00:02:57,843 ‫And so where is it? 52 00:02:59,130 --> 00:03:02,730 ‫Well, it's not actually anywhere here, 53 00:03:02,730 --> 00:03:05,550 ‫but well, that's not really important anyway. 54 00:03:05,550 --> 00:03:10,550 ‫So let's actually just log error dot message. 55 00:03:10,950 --> 00:03:12,930 ‫So this is the property of the error 56 00:03:12,930 --> 00:03:16,230 ‫where this string here will get saved into 57 00:03:16,230 --> 00:03:19,260 ‫but then what we're actually interested in, 58 00:03:19,260 --> 00:03:23,070 ‫is to get this message here onto the screen. 59 00:03:23,070 --> 00:03:26,823 ‫So basically displaying it right here instead of loading. 60 00:03:27,780 --> 00:03:31,260 ‫So that means that we need another piece of state. 61 00:03:31,260 --> 00:03:33,870 ‫So basically a piece of state indicating 62 00:03:33,870 --> 00:03:36,993 ‫whether we currently have an error or not. 63 00:03:39,570 --> 00:03:42,030 ‫So const error 64 00:03:42,030 --> 00:03:43,593 ‫and set error. 65 00:03:47,220 --> 00:03:49,590 ‫And so here, this one is actually not a bullion, 66 00:03:49,590 --> 00:03:51,843 ‫but it's truly the error message. 67 00:03:53,310 --> 00:03:56,010 ‫Okay, so here 68 00:03:56,010 --> 00:03:58,240 ‫let's then set the error 69 00:03:59,340 --> 00:04:01,470 ‫to actually that message. 70 00:04:01,470 --> 00:04:04,320 ‫And again, error dot message is basically 71 00:04:04,320 --> 00:04:07,350 ‫this string that we passed into the error 72 00:04:07,350 --> 00:04:09,360 ‫and error is the error itself 73 00:04:09,360 --> 00:04:12,480 ‫as it was passed into this catch block. 74 00:04:12,480 --> 00:04:15,960 ‫And again, that is just basic JavaScript. 75 00:04:15,960 --> 00:04:17,460 ‫All right, 76 00:04:17,460 --> 00:04:20,580 ‫and then let's do some conditional rendering here 77 00:04:20,580 --> 00:04:23,520 ‫to basically get the error here 78 00:04:23,520 --> 00:04:26,163 ‫onto the screen whenever there exists one. 79 00:04:28,825 --> 00:04:29,910 ‫Now, okay, and let's start 80 00:04:29,910 --> 00:04:33,960 ‫by creating a new error component here 81 00:04:33,960 --> 00:04:36,690 ‫or maybe let's call it error message. 82 00:04:36,690 --> 00:04:39,390 ‫And it will receive a prop 83 00:04:39,390 --> 00:04:42,993 ‫with some message that it will then display on the screen. 84 00:04:46,290 --> 00:04:49,440 ‫So let's return again a paragraph this time 85 00:04:49,440 --> 00:04:52,680 ‫with the class name of error, which, 86 00:04:52,680 --> 00:04:56,823 ‫as always, I already included into my CSS file. 87 00:04:58,350 --> 00:05:02,103 ‫Then here let's maybe add some small emoji here, 88 00:05:02,970 --> 00:05:04,113 ‫like this one. 89 00:05:05,340 --> 00:05:08,163 ‫So showing there was some kind of problem. 90 00:05:10,290 --> 00:05:13,800 ‫And then here we simply display that message. 91 00:05:13,800 --> 00:05:17,370 ‫So this is a very simple presentational component. 92 00:05:17,370 --> 00:05:18,213 ‫Remember that? 93 00:05:21,240 --> 00:05:24,960 ‫Okay. Now here in our conditional rendering 94 00:05:24,960 --> 00:05:27,270 ‫basically what we want to do is 95 00:05:27,270 --> 00:05:29,580 ‫that when it's no longer loading 96 00:05:29,580 --> 00:05:32,460 ‫then we want to display this movie list 97 00:05:32,460 --> 00:05:35,280 ‫but only if there was no error. 98 00:05:35,280 --> 00:05:38,970 ‫So basically here we now would have to nest another ternary 99 00:05:38,970 --> 00:05:43,110 ‫inside this ternary, but that makes for really ugly coat. 100 00:05:43,110 --> 00:05:45,693 ‫And so let's do something else instead. 101 00:05:46,950 --> 00:05:49,323 ‫So let's comment out this entire part. 102 00:05:51,180 --> 00:05:54,180 ‫Or well, only this one. 103 00:05:54,180 --> 00:05:56,463 ‫So the box of course we still need, 104 00:05:57,480 --> 00:06:01,860 ‫but then let's do is loading. 105 00:06:01,860 --> 00:06:03,970 ‫And if there's no error 106 00:06:06,000 --> 00:06:10,503 ‫then display this movies list right here. 107 00:06:12,960 --> 00:06:14,560 ‫Now if there is an error 108 00:06:17,640 --> 00:06:20,760 ‫then display the error message component 109 00:06:20,760 --> 00:06:25,230 ‫with the error or I think it's called message. 110 00:06:25,230 --> 00:06:29,733 ‫So with the message prop set to error. 111 00:06:30,840 --> 00:06:32,400 ‫And here of course, it needs to be 112 00:06:32,400 --> 00:06:35,973 ‫that the data is not loading and there is no error. 113 00:06:36,840 --> 00:06:39,000 ‫And finally, we also need to account 114 00:06:39,000 --> 00:06:41,553 ‫of course for the is loading state. 115 00:06:43,350 --> 00:06:48,350 ‫So if it is loading, then just display our loader. 116 00:06:49,620 --> 00:06:52,560 ‫So here the situation is indeed a little bit tricky 117 00:06:52,560 --> 00:06:55,620 ‫with all these different states that we have 118 00:06:55,620 --> 00:06:58,770 ‫and with all the conditional rendering, but well 119 00:06:58,770 --> 00:07:03,000 ‫these are now three mutually exclusive conditions. 120 00:07:03,000 --> 00:07:06,450 ‫So it is either loading or it is not loading 121 00:07:06,450 --> 00:07:09,570 ‫and there is no error or there is an error. 122 00:07:09,570 --> 00:07:11,490 ‫So only one of these three here 123 00:07:11,490 --> 00:07:13,080 ‫can be true at the same time. 124 00:07:13,080 --> 00:07:14,580 ‫And so that's very important 125 00:07:14,580 --> 00:07:16,620 ‫so that we don't display multiple 126 00:07:16,620 --> 00:07:19,413 ‫of these components at the same time by mistake. 127 00:07:20,610 --> 00:07:24,573 ‫So let's give it a save and let's try again. 128 00:07:25,440 --> 00:07:27,430 ‫So back to our 3G 129 00:07:30,455 --> 00:07:32,655 ‫and then I will set it to offline very soon. 130 00:07:34,410 --> 00:07:35,943 ‫Let's wait for it. 131 00:07:41,820 --> 00:07:43,140 ‫And there it is. 132 00:07:43,140 --> 00:07:46,980 ‫So we get our error message correctly displayed here. 133 00:07:46,980 --> 00:07:48,930 ‫However, there's still some problem 134 00:07:48,930 --> 00:07:52,600 ‫because the loading state is still set to true 135 00:07:53,820 --> 00:07:57,060 ‫and in fact that's actually correct. 136 00:07:57,060 --> 00:08:00,570 ‫So as soon as the error here is thrown, 137 00:08:00,570 --> 00:08:03,660 ‫this rest of the code is no longer evaluated. 138 00:08:03,660 --> 00:08:07,470 ‫And so therefore is loading is never set to fault. 139 00:08:07,470 --> 00:08:09,780 ‫So our application will keep thinking 140 00:08:09,780 --> 00:08:12,033 ‫that the data is still being loaded. 141 00:08:12,870 --> 00:08:14,100 ‫So again, the problem is 142 00:08:14,100 --> 00:08:16,980 ‫that after this error is being thrown 143 00:08:16,980 --> 00:08:19,800 ‫then React will basically never see 144 00:08:19,800 --> 00:08:21,210 ‫this piece of code here, 145 00:08:21,210 --> 00:08:24,300 ‫where the loading state is reset. 146 00:08:24,300 --> 00:08:26,130 ‫So instead of doing that here 147 00:08:26,130 --> 00:08:29,643 ‫let's attach a finally block here. 148 00:08:30,510 --> 00:08:35,010 ‫So this block of code here will basically always be executed 149 00:08:35,010 --> 00:08:36,153 ‫at the very end. 150 00:08:38,970 --> 00:08:41,280 ‫Okay? And as an alternative 151 00:08:41,280 --> 00:08:45,000 ‫we could have kept the code here and also pasted it here, 152 00:08:45,000 --> 00:08:48,540 ‫but that would've created a duplication of code. 153 00:08:48,540 --> 00:08:51,450 ‫So with this, it's going to be a lot better. 154 00:08:51,450 --> 00:08:53,850 ‫Now, I will not try this yet here 155 00:08:53,850 --> 00:08:57,180 ‫because actually I want to handle another kind of error 156 00:08:57,180 --> 00:08:59,190 ‫which is not really an error, 157 00:08:59,190 --> 00:09:02,460 ‫but also situation where we want to display a message 158 00:09:02,460 --> 00:09:04,320 ‫which is the situation 159 00:09:04,320 --> 00:09:08,553 ‫in which we cannot find any movie for the search Query. 160 00:09:09,420 --> 00:09:12,327 ‫So let's say the Query is like this one here 161 00:09:12,327 --> 00:09:15,603 ‫and of course the API will not find anything. 162 00:09:17,460 --> 00:09:19,263 ‫So let's remove all throttling, 163 00:09:21,930 --> 00:09:24,573 ‫and well, what happens here? 164 00:09:29,010 --> 00:09:32,730 ‫Well, basically the length cannot be read of undefined. 165 00:09:32,730 --> 00:09:35,700 ‫And so the problem here is that the data 166 00:09:35,700 --> 00:09:37,800 ‫that comes back from the API now, 167 00:09:37,800 --> 00:09:39,543 ‫is apparently undefined. 168 00:09:41,220 --> 00:09:42,723 ‫So let's take a look at that. 169 00:09:43,620 --> 00:09:47,403 ‫So just at data here, and let's try that again. 170 00:09:48,690 --> 00:09:53,690 ‫And so indeed, we no longer have the search property here, 171 00:09:54,600 --> 00:09:57,270 ‫so we no longer have data dot search. 172 00:09:57,270 --> 00:10:00,690 ‫And so what's happening then is that data search 173 00:10:00,690 --> 00:10:02,820 ‫is being set to undefined, 174 00:10:02,820 --> 00:10:05,883 ‫and therefore we get this other error here. 175 00:10:08,460 --> 00:10:10,320 ‫So as I was saying in the very beginning 176 00:10:10,320 --> 00:10:11,760 ‫we always need to handle 177 00:10:11,760 --> 00:10:14,670 ‫all these different situations that can go wrong. 178 00:10:14,670 --> 00:10:17,070 ‫And when we are working with data fetching 179 00:10:17,070 --> 00:10:19,863 ‫there's always a lot of things that can go wrong. 180 00:10:21,120 --> 00:10:23,400 ‫So working with data is a lot of work 181 00:10:23,400 --> 00:10:26,070 ‫but it's also essential in most 182 00:10:26,070 --> 00:10:29,130 ‫if not all web applications. 183 00:10:29,130 --> 00:10:33,060 ‫But anyway, here we can now use this response 184 00:10:33,060 --> 00:10:34,560 ‫to our advantage, 185 00:10:34,560 --> 00:10:38,310 ‫in order to throw another error in this situation. 186 00:10:38,310 --> 00:10:43,080 ‫So we can say that data dot response, 187 00:10:43,080 --> 00:10:46,740 ‫and actually, this now needs to be here 188 00:10:46,740 --> 00:10:48,873 ‫after we already have the data. 189 00:10:50,250 --> 00:10:54,713 ‫So in this case, if data responds is equal faults 190 00:10:56,400 --> 00:10:59,340 ‫and so for some reason the API here responds 191 00:10:59,340 --> 00:11:03,000 ‫with the string of faults and not a bullion 192 00:11:03,000 --> 00:11:07,110 ‫but while this still works, so in this case, let's 193 00:11:07,110 --> 00:11:10,810 ‫also throw a new error and let's simply say 194 00:11:11,790 --> 00:11:14,373 ‫movie not found. 195 00:11:16,050 --> 00:11:19,023 ‫Alright, and beautiful. 196 00:11:20,760 --> 00:11:22,020 ‫Let's just reload. 197 00:11:22,020 --> 00:11:24,510 ‫And then here we get this log. 198 00:11:24,510 --> 00:11:27,600 ‫So that's this console dot error coming from here. 199 00:11:27,600 --> 00:11:30,840 ‫And then indeed we get our error message also displayed 200 00:11:30,840 --> 00:11:32,490 ‫on the UI. 201 00:11:32,490 --> 00:11:35,670 ‫So this one was maybe a little bit trickier. 202 00:11:35,670 --> 00:11:38,250 ‫So let's just quickly recap. 203 00:11:38,250 --> 00:11:41,640 ‫So what we did was to implement another state variable, 204 00:11:41,640 --> 00:11:44,130 ‫this time, specific for the error 205 00:11:44,130 --> 00:11:46,440 ‫so that whenever some error occurred 206 00:11:46,440 --> 00:11:49,020 ‫we could store the error message in there 207 00:11:49,020 --> 00:11:53,430 ‫and then display it in the UI as soon as an error occurred. 208 00:11:53,430 --> 00:11:57,120 ‫Now, as soon as an error did occur, which is 209 00:11:57,120 --> 00:12:01,530 ‫in this situation, and in this one we threw a new error, 210 00:12:01,530 --> 00:12:03,750 ‫and then we caught that error 211 00:12:03,750 --> 00:12:07,230 ‫inside the catch block of this try-catch. 212 00:12:07,230 --> 00:12:08,760 ‫And so this is a standard way 213 00:12:08,760 --> 00:12:11,280 ‫of catching errors in JavaScript. 214 00:12:11,280 --> 00:12:15,090 ‫And so in this situation, we then set the error state 215 00:12:15,090 --> 00:12:18,033 ‫to the message of the error that we specified here. 216 00:12:18,960 --> 00:12:22,710 ‫Then finally, we used of course, that state variable 217 00:12:22,710 --> 00:12:26,190 ‫in order to render something on the screen conditionally. 218 00:12:26,190 --> 00:12:28,683 ‫And so that was right here. 219 00:12:29,520 --> 00:12:32,040 ‫So this part here is maybe a bit confusing. 220 00:12:32,040 --> 00:12:34,740 ‫And so make sure that after this video you just 221 00:12:34,740 --> 00:12:37,830 ‫analyze exactly what's happening here and that, 222 00:12:37,830 --> 00:12:41,850 ‫in fact these three conditions here are mutually exclusive. 223 00:12:41,850 --> 00:12:44,940 ‫So only one of them will ever be true. 224 00:12:44,940 --> 00:12:47,970 ‫Okay? And I think that for now this is enough 225 00:12:47,970 --> 00:12:50,910 ‫for error handling in this application. 226 00:12:50,910 --> 00:12:52,500 ‫So that's always a very, 227 00:12:52,500 --> 00:12:55,680 ‫very important part that many people overlook. 228 00:12:55,680 --> 00:12:57,480 ‫But it is of course essential 229 00:12:57,480 --> 00:12:59,673 ‫to deal with these kind of situations.