Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 1 00:00:01,210 --> 00:00:04,240 In this lecture, we're gonna learn how error handling 2 2 00:00:04,240 --> 00:00:06,930 works with a sinc/await. 3 3 00:00:06,930 --> 00:00:10,423 So with a sinc/await, we can't use the catch method 4 4 00:00:10,423 --> 00:00:13,470 that we use before, because we can really 5 5 00:00:13,470 --> 00:00:16,170 attach it anywhere, right. 6 6 00:00:16,170 --> 00:00:20,383 So instead, we use something called a try catch statement. 7 7 00:00:22,270 --> 00:00:25,650 And the try catch statement is actually used 8 8 00:00:25,650 --> 00:00:28,390 in regular JavaScript as well. 9 9 00:00:28,390 --> 00:00:32,170 So it's been in the language probably since the beginning. 10 10 00:00:32,170 --> 00:00:35,820 So try catch has nothing to do with a sinc/await. 11 11 00:00:35,820 --> 00:00:40,390 But we can still use it to catch errors in async functions. 12 12 00:00:40,390 --> 00:00:44,200 But before we do that, let's look at a more simple example, 13 13 00:00:44,200 --> 00:00:47,470 just to see how try catch works. 14 14 00:00:47,470 --> 00:00:52,470 So we can basically wrap all our code in a try block. 15 15 00:00:53,000 --> 00:00:54,850 And so JavaScript will then 16 16 00:00:54,850 --> 00:00:57,890 basically try to execute this code. 17 17 00:00:57,890 --> 00:01:01,650 So just as normal code, so let's just create 18 18 00:01:01,650 --> 00:01:06,143 a variable here, set it to one, create another one. 19 19 00:01:07,280 --> 00:01:09,180 So this one is a constant. 20 20 00:01:09,180 --> 00:01:14,180 And now my goal was to reassign y, but I will accidentally, 21 21 00:01:16,700 --> 00:01:19,340 let's say reassign x. 22 22 00:01:19,340 --> 00:01:23,220 And so that should then give us an error. 23 23 00:01:23,220 --> 00:01:25,840 Because of course, that is not legal. 24 24 00:01:25,840 --> 00:01:28,160 So we can reassign a constant. 25 25 00:01:28,160 --> 00:01:30,713 And so for now, if we reload at this point, 26 26 00:01:31,760 --> 00:01:33,740 first, we get this error, 27 27 00:01:33,740 --> 00:01:35,653 that we are missing the catch block. 28 28 00:01:36,850 --> 00:01:41,687 So let's actually first do this here without any block. 29 29 00:01:43,000 --> 00:01:46,060 And so here, of course, we get the error assignment 30 30 00:01:46,060 --> 00:01:49,790 to constant variable. Right. 31 31 00:01:49,790 --> 00:01:52,230 But let's go back. And so now here, 32 32 00:01:52,230 --> 00:01:54,193 we can add the catch block. 33 33 00:01:55,610 --> 00:01:58,450 So we have a catch block, and this catch block 34 34 00:01:58,450 --> 00:02:01,000 will have access to whatever error 35 35 00:02:01,000 --> 00:02:03,653 occurred here in the try block. 36 36 00:02:05,110 --> 00:02:08,280 And so now we can do something with this error. 37 37 00:02:08,280 --> 00:02:11,633 So let's say we simply want to alert the error, 38 38 00:02:13,000 --> 00:02:14,300 or just the error message. 39 39 00:02:15,330 --> 00:02:18,740 So as we know, any error has the message property. 40 40 00:02:18,740 --> 00:02:23,220 And so we can simply alert that one. So let's see. 41 41 00:02:23,220 --> 00:02:25,480 And indeed, now we get an assignment 42 42 00:02:25,480 --> 00:02:28,560 to constant variable here in this alert. 43 43 00:02:28,560 --> 00:02:31,000 And you see that the error now no longer 44 44 00:02:31,000 --> 00:02:33,800 appears down here in the console. 45 45 00:02:33,800 --> 00:02:37,530 So the script does no longer die in this case. 46 46 00:02:37,530 --> 00:02:41,090 And instead, we can simply catch the error right here, 47 47 00:02:41,090 --> 00:02:45,140 and then handle it accordingly. Now, okay. 48 48 00:02:45,140 --> 00:02:48,030 And of course, if there is no error at all, 49 49 00:02:48,030 --> 00:02:51,000 so if I was assigning y correctly, 50 50 00:02:51,000 --> 00:02:54,020 then we would get no error. 51 51 00:02:54,020 --> 00:02:56,823 Well, at least not coming from the try catch block. 52 52 00:02:58,780 --> 00:03:00,023 So now we're good. 53 53 00:03:02,060 --> 00:03:06,930 But anyway, this year is just a stupid syntax error. 54 54 00:03:06,930 --> 00:03:09,850 And of course, we're not going to use try catch 55 55 00:03:09,850 --> 00:03:12,930 to find mistakes that we make in our code. 56 56 00:03:12,930 --> 00:03:16,800 And so let's know use try catch for something more useful, 57 57 00:03:16,800 --> 00:03:21,800 which is to actually handle real errors in async functions. 58 58 00:03:21,810 --> 00:03:25,990 Okay. So just like in the small example that we saw, 59 59 00:03:25,990 --> 00:03:29,750 let's wrap our entire code of this function 60 60 00:03:29,750 --> 00:03:33,800 into a try block. All right, 61 61 00:03:33,800 --> 00:03:38,313 so curly braces, and then try like this. 62 62 00:03:40,070 --> 00:03:44,190 All right, and then down here after that, 63 63 00:03:44,190 --> 00:03:47,680 the catch block, which remember, has access 64 64 00:03:47,680 --> 00:03:51,040 to whatever error occurs in the try block. 65 65 00:03:51,040 --> 00:03:52,750 And so here in this catch block, 66 66 00:03:52,750 --> 00:03:54,800 we can now handle any errors, 67 67 00:03:54,800 --> 00:03:57,653 just like we did before in the catch method. 68 68 00:03:59,840 --> 00:04:02,773 So let's log the error to the console. 69 69 00:04:04,280 --> 00:04:07,773 Give it a safe year, just to format it a little bit better. 70 70 00:04:09,090 --> 00:04:10,890 Now, right, and so you see that 71 71 00:04:10,890 --> 00:04:12,773 the code still works the same. 72 72 00:04:13,870 --> 00:04:17,203 But that's because we didn't cause any error yet. 73 73 00:04:18,630 --> 00:04:22,570 But let's also now log the error message. 74 74 00:04:22,570 --> 00:04:25,483 But let's now also render the error. 75 75 00:04:26,420 --> 00:04:29,740 And so instead of going search that, 76 76 00:04:29,740 --> 00:04:32,083 I will simply write some new error message. 77 77 00:04:33,410 --> 00:04:38,393 So if something went wrong, then we had this emoji here. 78 78 00:04:39,540 --> 00:04:43,803 And then again, the error dot message. 79 79 00:04:45,340 --> 00:04:48,710 Okay, and so now let's try again, 80 80 00:04:48,710 --> 00:04:52,143 to force an error here by reloading really fast. 81 81 00:04:53,970 --> 00:04:56,260 Maybe the easiest way is to simply 82 82 00:04:56,260 --> 00:04:58,093 call this function multiple times. 83 83 00:05:05,538 --> 00:05:09,560 And now, and now you see, we get some nice errors here. 84 84 00:05:09,560 --> 00:05:11,700 Well, they're not really so nice. 85 85 00:05:11,700 --> 00:05:13,823 So let's see where they actually start. 86 86 00:05:17,860 --> 00:05:19,193 Well, for some reason, 87 87 00:05:20,520 --> 00:05:22,383 everything looks the same as before. 88 88 00:05:23,420 --> 00:05:27,683 And that's, of course, secrets render error, 89 89 00:05:29,010 --> 00:05:31,890 until it actually also add an emoji, 90 90 00:05:31,890 --> 00:05:35,520 just so we can see that it's our own error, 91 91 00:05:35,520 --> 00:05:39,053 or basically, that we are logging the error ourselves. 92 92 00:05:42,092 --> 00:05:42,925 Okay. 93 93 00:05:47,870 --> 00:05:50,163 So let's do this. Ah, here we go. 94 94 00:05:51,470 --> 00:05:54,413 Whoa. So we get a lot of different errors here. 95 95 00:05:56,120 --> 00:05:58,920 So that's a couple of times. 96 96 00:05:58,920 --> 00:06:01,180 And so the reason for that is that we are calling 97 97 00:06:01,180 --> 00:06:03,670 this function here multiple times, 98 98 00:06:03,670 --> 00:06:05,863 and therefore we get multiple errors. 99 99 00:06:07,040 --> 00:06:10,410 But the error that gets logged here to the console, 100 100 00:06:10,410 --> 00:06:14,790 remember is the one that is coming because of this 404 error 101 101 00:06:14,790 --> 00:06:18,163 that the country cannot be found. Okay. 102 102 00:06:19,260 --> 00:06:22,250 So at this point, we do have some error handling. 103 103 00:06:22,250 --> 00:06:27,090 So we are able to add the error here to the user interface. 104 104 00:06:27,090 --> 00:06:31,370 But just like before, this error is not really meaningful, 105 105 00:06:31,370 --> 00:06:36,370 because the fetch promise does not reject on a 404 error, 106 106 00:06:36,390 --> 00:06:40,970 or on a 403 error, which was actually the original error, 107 107 00:06:40,970 --> 00:06:44,920 which caused everything here to collapse. Right? 108 108 00:06:44,920 --> 00:06:47,740 So again, the four three is because 109 109 00:06:47,740 --> 00:06:52,740 we are doing too many requests to the reverse geocoding API. 110 110 00:06:53,010 --> 00:06:54,780 But the solution is simple, 111 111 00:06:54,780 --> 00:06:57,800 because it's exactly the same as before. 112 112 00:06:57,800 --> 00:07:01,200 So all we have to do is to manually create an error. 113 113 00:07:01,200 --> 00:07:03,640 And so that error will then be caught 114 114 00:07:03,640 --> 00:07:06,633 here in the catch block. Right? 115 115 00:07:07,490 --> 00:07:12,490 So let's do that. So right here. So basically, 116 116 00:07:12,700 --> 00:07:15,420 immediately after this fetch, 117 117 00:07:15,420 --> 00:07:16,840 and so just like before, 118 118 00:07:16,840 --> 00:07:20,233 we can test for the okay property, remember. 119 119 00:07:22,700 --> 00:07:25,370 So I'm not going to show that again here, 120 120 00:07:25,370 --> 00:07:27,403 because we already saw it before. 121 121 00:07:28,390 --> 00:07:32,240 So this response here will have the okay property. 122 122 00:07:32,240 --> 00:07:34,790 And if dad is not set to true, well, 123 123 00:07:34,790 --> 00:07:36,733 then we want to throw a new error. 124 124 00:07:40,720 --> 00:07:45,720 So that's problem getting, let's see location, data. 125 125 00:07:49,570 --> 00:07:52,570 Okay. And so this one basically handles 126 126 00:07:52,570 --> 00:07:55,530 any error in this fetch. 127 127 00:07:55,530 --> 00:07:57,563 And so now the same here. 128 128 00:07:58,820 --> 00:08:02,540 So let's say that we come back with a real weird country, 129 129 00:08:02,540 --> 00:08:04,420 from this fetch. 130 130 00:08:04,420 --> 00:08:06,590 Now to then the second API 131 131 00:08:06,590 --> 00:08:10,173 cannot find any country for that name. 132 132 00:08:11,180 --> 00:08:14,803 And so here, let's just say problem getting country. 133 133 00:08:17,570 --> 00:08:21,330 Now, for this first promise here, this one, 134 134 00:08:21,330 --> 00:08:24,370 we do not need to throw an error manually, 135 135 00:08:24,370 --> 00:08:26,510 because in the case that something goes wrong 136 136 00:08:26,510 --> 00:08:29,800 with the geolocation, we already built our promise 137 137 00:08:29,800 --> 00:08:33,390 so that it automatically rejects in that case. 138 138 00:08:33,390 --> 00:08:36,600 And so in this case, we will then immediately get an error, 139 139 00:08:36,600 --> 00:08:39,790 which will get caught in the catch block. 140 140 00:08:39,790 --> 00:08:42,720 But as we already know, the same is not true 141 141 00:08:42,720 --> 00:08:45,230 for the promise coming from fetch. 142 142 00:08:45,230 --> 00:08:47,380 So that promise only gets rejected 143 143 00:08:47,380 --> 00:08:49,980 when the user has no internet connection. 144 144 00:08:49,980 --> 00:08:54,180 But in case of a four, three error, or a 404 error, 145 145 00:08:54,180 --> 00:08:56,390 the fetch promise does not reject. 146 146 00:08:56,390 --> 00:09:00,400 And so again, we do that manually, right here, 147 147 00:09:00,400 --> 00:09:02,270 and also right here. 148 148 00:09:02,270 --> 00:09:05,450 And so here, we already see that it worked. 149 149 00:09:05,450 --> 00:09:08,130 So here, indeed, we got something went wrong 150 150 00:09:08,130 --> 00:09:11,770 problem getting a location, and then again, 151 151 00:09:11,770 --> 00:09:12,973 here, the same error. 152 152 00:09:14,570 --> 00:09:17,623 So here, maybe we don't want all of this error message. 153 153 00:09:18,610 --> 00:09:20,610 Let's just take this one out. 154 154 00:09:20,610 --> 00:09:22,670 So that we just have the emoji, 155 155 00:09:22,670 --> 00:09:25,760 and then the error message itself. 156 156 00:09:25,760 --> 00:09:28,423 So the one that we defined here, and here. 157 157 00:09:30,500 --> 00:09:31,333 All right. 158 158 00:09:32,450 --> 00:09:35,140 So let's see if this triggers an error. 159 159 00:09:35,140 --> 00:09:37,200 And yeah, for one of them, we now 160 160 00:09:37,200 --> 00:09:40,210 have problem getting location data. 161 161 00:09:40,210 --> 00:09:43,883 So an error triggered by this one. All right. 162 162 00:09:45,310 --> 00:09:49,610 So that is the complete version now of this async function, 163 163 00:09:49,610 --> 00:09:53,810 complete with a pretty robust error handling strategy. 164 164 00:09:53,810 --> 00:09:57,310 So again, please never ignore handling errors, 165 165 00:09:57,310 --> 00:10:00,330 especially when it comes to asynchronous code 166 166 00:10:00,330 --> 00:10:02,600 like this one, because here, 167 167 00:10:02,600 --> 00:10:05,670 there is always a lot of stuff that can go wrong. 168 168 00:10:05,670 --> 00:10:09,530 And so our application needs to be ready to handle that. 169 169 00:10:09,530 --> 00:10:11,660 Now, right? But with that being said, 170 170 00:10:11,660 --> 00:10:14,870 in the next lecture, we're going to dive even deeper 171 171 00:10:14,870 --> 00:10:17,760 into how async functions really work. 172 172 00:10:17,760 --> 00:10:20,053 And so let's go there right away. 15231