WEBVTT 1 00:00:01.210 --> 00:00:04.240 In this lecture, we're gonna learn how error handling 2 00:00:04.240 --> 00:00:06.930 works with a sinc/await. 3 00:00:06.930 --> 00:00:10.423 So with a sinc/await, we can't use the catch method 4 00:00:10.423 --> 00:00:13.470 that we use before, because we can really 5 00:00:13.470 --> 00:00:16.170 attach it anywhere, right. 6 00:00:16.170 --> 00:00:20.383 So instead, we use something called a try catch statement. 7 00:00:22.270 --> 00:00:25.650 And the try catch statement is actually used 8 00:00:25.650 --> 00:00:28.390 in regular JavaScript as well. 9 00:00:28.390 --> 00:00:32.170 So it's been in the language probably since the beginning. 10 00:00:32.170 --> 00:00:35.820 So try catch has nothing to do with a sinc/await. 11 00:00:35.820 --> 00:00:40.390 But we can still use it to catch errors in async functions. 12 00:00:40.390 --> 00:00:44.200 But before we do that, let's look at a more simple example, 13 00:00:44.200 --> 00:00:47.470 just to see how try catch works. 14 00:00:47.470 --> 00:00:52.470 So we can basically wrap all our code in a try block. 15 00:00:53.000 --> 00:00:54.850 And so JavaScript will then 16 00:00:54.850 --> 00:00:57.890 basically try to execute this code. 17 00:00:57.890 --> 00:01:01.650 So just as normal code, so let's just create 18 00:01:01.650 --> 00:01:06.143 a variable here, set it to one, create another one. 19 00:01:07.280 --> 00:01:09.180 So this one is a constant. 20 00:01:09.180 --> 00:01:14.180 And now my goal was to reassign y, but I will accidentally, 21 00:01:16.700 --> 00:01:19.340 let's say reassign x. 22 00:01:19.340 --> 00:01:23.220 And so that should then give us an error. 23 00:01:23.220 --> 00:01:25.840 Because of course, that is not legal. 24 00:01:25.840 --> 00:01:28.160 So we can reassign a constant. 25 00:01:28.160 --> 00:01:30.713 And so for now, if we reload at this point, 26 00:01:31.760 --> 00:01:33.740 first, we get this error, 27 00:01:33.740 --> 00:01:35.653 that we are missing the catch block. 28 00:01:36.850 --> 00:01:41.687 So let's actually first do this here without any block. 29 00:01:43.000 --> 00:01:46.060 And so here, of course, we get the error assignment 30 00:01:46.060 --> 00:01:49.790 to constant variable. Right. 31 00:01:49.790 --> 00:01:52.230 But let's go back. And so now here, 32 00:01:52.230 --> 00:01:54.193 we can add the catch block. 33 00:01:55.610 --> 00:01:58.450 So we have a catch block, and this catch block 34 00:01:58.450 --> 00:02:01.000 will have access to whatever error 35 00:02:01.000 --> 00:02:03.653 occurred here in the try block. 36 00:02:05.110 --> 00:02:08.280 And so now we can do something with this error. 37 00:02:08.280 --> 00:02:11.633 So let's say we simply want to alert the error, 38 00:02:13.000 --> 00:02:14.300 or just the error message. 39 00:02:15.330 --> 00:02:18.740 So as we know, any error has the message property. 40 00:02:18.740 --> 00:02:23.220 And so we can simply alert that one. So let's see. 41 00:02:23.220 --> 00:02:25.480 And indeed, now we get an assignment 42 00:02:25.480 --> 00:02:28.560 to constant variable here in this alert. 43 00:02:28.560 --> 00:02:31.000 And you see that the error now no longer 44 00:02:31.000 --> 00:02:33.800 appears down here in the console. 45 00:02:33.800 --> 00:02:37.530 So the script does no longer die in this case. 46 00:02:37.530 --> 00:02:41.090 And instead, we can simply catch the error right here, 47 00:02:41.090 --> 00:02:45.140 and then handle it accordingly. Now, okay. 48 00:02:45.140 --> 00:02:48.030 And of course, if there is no error at all, 49 00:02:48.030 --> 00:02:51.000 so if I was assigning y correctly, 50 00:02:51.000 --> 00:02:54.020 then we would get no error. 51 00:02:54.020 --> 00:02:56.823 Well, at least not coming from the try catch block. 52 00:02:58.780 --> 00:03:00.023 So now we're good. 53 00:03:02.060 --> 00:03:06.930 But anyway, this year is just a stupid syntax error. 54 00:03:06.930 --> 00:03:09.850 And of course, we're not going to use try catch 55 00:03:09.850 --> 00:03:12.930 to find mistakes that we make in our code. 56 00:03:12.930 --> 00:03:16.800 And so let's know use try catch for something more useful, 57 00:03:16.800 --> 00:03:21.800 which is to actually handle real errors in async functions. 58 00:03:21.810 --> 00:03:25.990 Okay. So just like in the small example that we saw, 59 00:03:25.990 --> 00:03:29.750 let's wrap our entire code of this function 60 00:03:29.750 --> 00:03:33.800 into a try block. All right, 61 00:03:33.800 --> 00:03:38.313 so curly braces, and then try like this. 62 00:03:40.070 --> 00:03:44.190 All right, and then down here after that, 63 00:03:44.190 --> 00:03:47.680 the catch block, which remember, has access 64 00:03:47.680 --> 00:03:51.040 to whatever error occurs in the try block. 65 00:03:51.040 --> 00:03:52.750 And so here in this catch block, 66 00:03:52.750 --> 00:03:54.800 we can now handle any errors, 67 00:03:54.800 --> 00:03:57.653 just like we did before in the catch method. 68 00:03:59.840 --> 00:04:02.773 So let's log the error to the console. 69 00:04:04.280 --> 00:04:07.773 Give it a safe year, just to format it a little bit better. 70 00:04:09.090 --> 00:04:10.890 Now, right, and so you see that 71 00:04:10.890 --> 00:04:12.773 the code still works the same. 72 00:04:13.870 --> 00:04:17.203 But that's because we didn't cause any error yet. 73 00:04:18.630 --> 00:04:22.570 But let's also now log the error message. 74 00:04:22.570 --> 00:04:25.483 But let's now also render the error. 75 00:04:26.420 --> 00:04:29.740 And so instead of going search that, 76 00:04:29.740 --> 00:04:32.083 I will simply write some new error message. 77 00:04:33.410 --> 00:04:38.393 So if something went wrong, then we had this emoji here. 78 00:04:39.540 --> 00:04:43.803 And then again, the error dot message. 79 00:04:45.340 --> 00:04:48.710 Okay, and so now let's try again, 80 00:04:48.710 --> 00:04:52.143 to force an error here by reloading really fast. 81 00:04:53.970 --> 00:04:56.260 Maybe the easiest way is to simply 82 00:04:56.260 --> 00:04:58.093 call this function multiple times. 83 00:05:05.538 --> 00:05:09.560 And now, and now you see, we get some nice errors here. 84 00:05:09.560 --> 00:05:11.700 Well, they're not really so nice. 85 00:05:11.700 --> 00:05:13.823 So let's see where they actually start. 86 00:05:17.860 --> 00:05:19.193 Well, for some reason, 87 00:05:20.520 --> 00:05:22.383 everything looks the same as before. 88 00:05:23.420 --> 00:05:27.683 And that's, of course, secrets render error, 89 00:05:29.010 --> 00:05:31.890 until it actually also add an emoji, 90 00:05:31.890 --> 00:05:35.520 just so we can see that it's our own error, 91 00:05:35.520 --> 00:05:39.053 or basically, that we are logging the error ourselves. 92 00:05:42.092 --> 00:05:42.925 Okay. 93 00:05:47.870 --> 00:05:50.163 So let's do this. Ah, here we go. 94 00:05:51.470 --> 00:05:54.413 Whoa. So we get a lot of different errors here. 95 00:05:56.120 --> 00:05:58.920 So that's a couple of times. 96 00:05:58.920 --> 00:06:01.180 And so the reason for that is that we are calling 97 00:06:01.180 --> 00:06:03.670 this function here multiple times, 98 00:06:03.670 --> 00:06:05.863 and therefore we get multiple errors. 99 00:06:07.040 --> 00:06:10.410 But the error that gets logged here to the console, 100 00:06:10.410 --> 00:06:14.790 remember is the one that is coming because of this 404 error 101 00:06:14.790 --> 00:06:18.163 that the country cannot be found. Okay. 102 00:06:19.260 --> 00:06:22.250 So at this point, we do have some error handling. 103 00:06:22.250 --> 00:06:27.090 So we are able to add the error here to the user interface. 104 00:06:27.090 --> 00:06:31.370 But just like before, this error is not really meaningful, 105 00:06:31.370 --> 00:06:36.370 because the fetch promise does not reject on a 404 error, 106 00:06:36.390 --> 00:06:40.970 or on a 403 error, which was actually the original error, 107 00:06:40.970 --> 00:06:44.920 which caused everything here to collapse. Right? 108 00:06:44.920 --> 00:06:47.740 So again, the four three is because 109 00:06:47.740 --> 00:06:52.740 we are doing too many requests to the reverse geocoding API. 110 00:06:53.010 --> 00:06:54.780 But the solution is simple, 111 00:06:54.780 --> 00:06:57.800 because it's exactly the same as before. 112 00:06:57.800 --> 00:07:01.200 So all we have to do is to manually create an error. 113 00:07:01.200 --> 00:07:03.640 And so that error will then be caught 114 00:07:03.640 --> 00:07:06.633 here in the catch block. Right? 115 00:07:07.490 --> 00:07:12.490 So let's do that. So right here. So basically, 116 00:07:12.700 --> 00:07:15.420 immediately after this fetch, 117 00:07:15.420 --> 00:07:16.840 and so just like before, 118 00:07:16.840 --> 00:07:20.233 we can test for the okay property, remember. 119 00:07:22.700 --> 00:07:25.370 So I'm not going to show that again here, 120 00:07:25.370 --> 00:07:27.403 because we already saw it before. 121 00:07:28.390 --> 00:07:32.240 So this response here will have the okay property. 122 00:07:32.240 --> 00:07:34.790 And if dad is not set to true, well, 123 00:07:34.790 --> 00:07:36.733 then we want to throw a new error. 124 00:07:40.720 --> 00:07:45.720 So that's problem getting, let's see location, data. 125 00:07:49.570 --> 00:07:52.570 Okay. And so this one basically handles 126 00:07:52.570 --> 00:07:55.530 any error in this fetch. 127 00:07:55.530 --> 00:07:57.563 And so now the same here. 128 00:07:58.820 --> 00:08:02.540 So let's say that we come back with a real weird country, 129 00:08:02.540 --> 00:08:04.420 from this fetch. 130 00:08:04.420 --> 00:08:06.590 Now to then the second API 131 00:08:06.590 --> 00:08:10.173 cannot find any country for that name. 132 00:08:11.180 --> 00:08:14.803 And so here, let's just say problem getting country. 133 00:08:17.570 --> 00:08:21.330 Now, for this first promise here, this one, 134 00:08:21.330 --> 00:08:24.370 we do not need to throw an error manually, 135 00:08:24.370 --> 00:08:26.510 because in the case that something goes wrong 136 00:08:26.510 --> 00:08:29.800 with the geolocation, we already built our promise 137 00:08:29.800 --> 00:08:33.390 so that it automatically rejects in that case. 138 00:08:33.390 --> 00:08:36.600 And so in this case, we will then immediately get an error, 139 00:08:36.600 --> 00:08:39.790 which will get caught in the catch block. 140 00:08:39.790 --> 00:08:42.720 But as we already know, the same is not true 141 00:08:42.720 --> 00:08:45.230 for the promise coming from fetch. 142 00:08:45.230 --> 00:08:47.380 So that promise only gets rejected 143 00:08:47.380 --> 00:08:49.980 when the user has no internet connection. 144 00:08:49.980 --> 00:08:54.180 But in case of a four, three error, or a 404 error, 145 00:08:54.180 --> 00:08:56.390 the fetch promise does not reject. 146 00:08:56.390 --> 00:09:00.400 And so again, we do that manually, right here, 147 00:09:00.400 --> 00:09:02.270 and also right here. 148 00:09:02.270 --> 00:09:05.450 And so here, we already see that it worked. 149 00:09:05.450 --> 00:09:08.130 So here, indeed, we got something went wrong 150 00:09:08.130 --> 00:09:11.770 problem getting a location, and then again, 151 00:09:11.770 --> 00:09:12.973 here, the same error. 152 00:09:14.570 --> 00:09:17.623 So here, maybe we don't want all of this error message. 153 00:09:18.610 --> 00:09:20.610 Let's just take this one out. 154 00:09:20.610 --> 00:09:22.670 So that we just have the emoji, 155 00:09:22.670 --> 00:09:25.760 and then the error message itself. 156 00:09:25.760 --> 00:09:28.423 So the one that we defined here, and here. 157 00:09:30.500 --> 00:09:31.333 All right. 158 00:09:32.450 --> 00:09:35.140 So let's see if this triggers an error. 159 00:09:35.140 --> 00:09:37.200 And yeah, for one of them, we now 160 00:09:37.200 --> 00:09:40.210 have problem getting location data. 161 00:09:40.210 --> 00:09:43.883 So an error triggered by this one. All right. 162 00:09:45.310 --> 00:09:49.610 So that is the complete version now of this async function, 163 00:09:49.610 --> 00:09:53.810 complete with a pretty robust error handling strategy. 164 00:09:53.810 --> 00:09:57.310 So again, please never ignore handling errors, 165 00:09:57.310 --> 00:10:00.330 especially when it comes to asynchronous code 166 00:10:00.330 --> 00:10:02.600 like this one, because here, 167 00:10:02.600 --> 00:10:05.670 there is always a lot of stuff that can go wrong. 168 00:10:05.670 --> 00:10:09.530 And so our application needs to be ready to handle that. 169 00:10:09.530 --> 00:10:11.660 Now, right? But with that being said, 170 00:10:11.660 --> 00:10:14.870 in the next lecture, we're going to dive even deeper 171 00:10:14.870 --> 00:10:17.760 into how async functions really work. 172 00:10:17.760 --> 00:10:20.053 And so let's go there right away.