WEBVTT 1 00:00:01.320 --> 00:00:02.650 Let's now implement, 2 00:00:02.650 --> 00:00:06.040 real world error handling in our application, 3 00:00:06.040 --> 00:00:10.523 instead of, always simply logging errors to the console. 4 00:00:12.250 --> 00:00:15.150 And again, the error that we're gonna work with, 5 00:00:15.150 --> 00:00:18.230 is basically using a false ID, 6 00:00:18.230 --> 00:00:20.820 that cannot be found on the server. 7 00:00:20.820 --> 00:00:24.423 So indeed, we get our error message, invalid ID, 8 00:00:25.410 --> 00:00:30.290 and then the ID itself, plus the status code. 9 00:00:30.290 --> 00:00:34.020 Now, the real world way of handling an error like this, 10 00:00:34.020 --> 00:00:36.830 is to actually display some message here 11 00:00:36.830 --> 00:00:38.460 in the user interface, 12 00:00:38.460 --> 00:00:42.400 so that the user can actually know what's going on. 13 00:00:42.400 --> 00:00:45.220 So basically, handling the error will mean, 14 00:00:45.220 --> 00:00:49.120 to display an error message here in the view. 15 00:00:49.120 --> 00:00:51.690 So, right now we are handling the error, 16 00:00:51.690 --> 00:00:53.913 actually in the model, right. 17 00:00:54.760 --> 00:00:56.310 So, remember how I said, 18 00:00:56.310 --> 00:00:58.360 that for now, handling the error 19 00:00:58.360 --> 00:01:03.360 is simply logging it here with these small emoji here. 20 00:01:03.490 --> 00:01:05.790 And so again, that's basically 21 00:01:05.790 --> 00:01:08.570 our current error handling strategy. 22 00:01:08.570 --> 00:01:10.770 However, it is not correct. 23 00:01:10.770 --> 00:01:14.230 And also, it doesn't happen in the correct place. 24 00:01:14.230 --> 00:01:17.440 Because if we want to display something into view, 25 00:01:17.440 --> 00:01:20.980 then of course, that code should also be in the view 26 00:01:20.980 --> 00:01:22.233 and not in the model. 27 00:01:23.150 --> 00:01:27.060 So, let's go back to our code and to our view, 28 00:01:27.060 --> 00:01:28.960 and implement a new method here, 29 00:01:28.960 --> 00:01:30.760 which is going to be responsible 30 00:01:30.760 --> 00:01:33.970 for displaying that error message. 31 00:01:33.970 --> 00:01:37.893 And actually, the HTML code is already here. 32 00:01:40.970 --> 00:01:43.240 In this like template. 33 00:01:43.240 --> 00:01:46.060 So, it's gonna be this class here, 34 00:01:46.060 --> 00:01:48.493 or this element with the class of error. 35 00:01:49.360 --> 00:01:51.330 So let's copy this. 36 00:01:51.330 --> 00:01:52.940 Go to the view, 37 00:01:52.940 --> 00:01:57.003 and then, let's put it here after this spinner. 38 00:01:58.950 --> 00:02:01.183 So render error, 39 00:02:02.639 --> 00:02:04.370 (keyboard typing) 40 00:02:04.370 --> 00:02:06.150 maintain like this. 41 00:02:06.150 --> 00:02:08.310 And for some reason, here, I, 42 00:02:08.310 --> 00:02:10.780 I declared like a normal function. 43 00:02:10.780 --> 00:02:13.023 Which doesn't make a lot of sense. 44 00:02:16.837 --> 00:02:20.020 And now, let's create a new markup variable. 45 00:02:20.020 --> 00:02:22.173 As always, when we create, 46 00:02:24.450 --> 00:02:26.210 well, some new markup, 47 00:02:26.210 --> 00:02:28.810 which is exactly what we're doing here. 48 00:02:28.810 --> 00:02:31.370 Then here, remember, we need to replace this 49 00:02:31.370 --> 00:02:33.093 with the icons variable. 50 00:02:37.340 --> 00:02:38.460 And then here, of course, 51 00:02:38.460 --> 00:02:42.390 we want to have like some custom message. 52 00:02:42.390 --> 00:02:45.430 So we don't simply want this hard coded message. 53 00:02:45.430 --> 00:02:48.750 But instead, we want to be able to pass a message, 54 00:02:48.750 --> 00:02:50.433 into this method. 55 00:02:55.570 --> 00:02:58.540 So, that's going to be message like this. 56 00:02:58.540 --> 00:03:00.963 And so let's add a parameter here for that. 57 00:03:02.930 --> 00:03:04.260 Now, okay. 58 00:03:04.260 --> 00:03:07.623 And then here, let's clear the parent element. 59 00:03:09.490 --> 00:03:10.963 So, like this. 60 00:03:12.050 --> 00:03:14.100 And actually, we should do the same here. 61 00:03:15.700 --> 00:03:18.600 So, this.clear is a lot nicer 62 00:03:18.600 --> 00:03:20.563 than having to write all of this. 63 00:03:21.740 --> 00:03:26.030 And so we abstracted all that away into this method. 64 00:03:26.030 --> 00:03:29.380 And now we can basically simply get this code, 65 00:03:29.380 --> 00:03:33.290 because it's going to be the same. Right. 66 00:03:33.290 --> 00:03:37.140 The variable here is still called markup. 67 00:03:37.140 --> 00:03:41.900 And, we still want to basically insert this HTML, 68 00:03:41.900 --> 00:03:44.230 into the parent element. 69 00:03:44.230 --> 00:03:49.230 So that's, again, this element with the recipe class. 70 00:03:49.920 --> 00:03:51.140 Okay. 71 00:03:51.140 --> 00:03:54.833 And so that's actually it, here for the view, at least. 72 00:03:56.350 --> 00:03:57.920 Okay. 73 00:03:57.920 --> 00:04:00.120 So let's now go to the model. 74 00:04:00.120 --> 00:04:02.240 Because remember that right now, 75 00:04:02.240 --> 00:04:07.240 we are actually handling the error right here, like this. 76 00:04:07.440 --> 00:04:10.090 But again, that's not what we want. 77 00:04:10.090 --> 00:04:15.060 So, we want a way of getting this error into the view. 78 00:04:15.060 --> 00:04:18.700 Now these two are only connected by the controller. 79 00:04:18.700 --> 00:04:21.820 And so, of course, it is going to be the controller 80 00:04:21.820 --> 00:04:25.470 who will call recipe view. Right. 81 00:04:25.470 --> 00:04:26.953 So, let's do that actually. 82 00:04:28.020 --> 00:04:31.120 So, that's going to be right here in the catch block, 83 00:04:31.120 --> 00:04:34.743 of the control recipes controller. 84 00:04:35.800 --> 00:04:37.100 So, recipeView.renderError 85 00:04:42.449 --> 00:04:44.540 and then some message. 86 00:04:44.540 --> 00:04:47.730 But what is this message going to look like? 87 00:04:47.730 --> 00:04:51.390 Or in other words, where are we going to get it from? 88 00:04:51.390 --> 00:04:54.620 Because now we have the same problem as before. 89 00:04:54.620 --> 00:04:58.070 So remember, here in the helpers function, 90 00:04:58.070 --> 00:05:00.260 whenever we got this error, 91 00:05:00.260 --> 00:05:03.690 then that error was not automatically propagated 92 00:05:03.690 --> 00:05:06.370 down to this async function, 93 00:05:06.370 --> 00:05:09.960 which was actually calling the getJSON function. 94 00:05:09.960 --> 00:05:14.000 And so therefore, we had to re-throw the error here. 95 00:05:14.000 --> 00:05:18.330 So, basically to mark this whole promise here, as rejected, 96 00:05:18.330 --> 00:05:22.490 so that then here, we would get into this catch block. 97 00:05:22.490 --> 00:05:25.760 But now, we're here again, we have the same problem. 98 00:05:25.760 --> 00:05:28.480 Because now if we get an error here, 99 00:05:28.480 --> 00:05:30.203 then this promise, 100 00:05:31.060 --> 00:05:33.360 so this whole load recipe promise, 101 00:05:33.360 --> 00:05:35.940 will also not get rejected. 102 00:05:35.940 --> 00:05:40.250 And so therefore, here, we will never enter the catch block 103 00:05:40.250 --> 00:05:41.810 in this function. 104 00:05:41.810 --> 00:05:45.590 So, it's a bit confusing, like the flow of the error 105 00:05:45.590 --> 00:05:48.140 and how we need to propagate it down. 106 00:05:48.140 --> 00:05:49.300 But essentially, 107 00:05:49.300 --> 00:05:51.760 we will have to do the same thing as before. 108 00:05:51.760 --> 00:05:54.633 Which is to throw the error here again. 109 00:05:55.700 --> 00:05:57.910 And so with this, we will then have access 110 00:05:57.910 --> 00:06:01.800 to the exact same error object, as we have here. 111 00:06:01.800 --> 00:06:03.793 And otherwise, we wouldn't. 112 00:06:05.620 --> 00:06:08.600 So now we can use the same thing here. 113 00:06:08.600 --> 00:06:11.990 Let's actually get rid of this console.log. 114 00:06:11.990 --> 00:06:14.250 And so, now here our error handling 115 00:06:14.250 --> 00:06:16.990 is basically finally complete. 116 00:06:16.990 --> 00:06:19.540 So, instead of simply logging it to the console, 117 00:06:19.540 --> 00:06:23.590 we now have a way of rendering it to the user interface. 118 00:06:23.590 --> 00:06:26.833 And we will be able to access the exact same error 119 00:06:26.833 --> 00:06:29.440 that we also got access to, here, 120 00:06:29.440 --> 00:06:31.163 in the load recipe function. 121 00:06:32.600 --> 00:06:33.970 Okay. 122 00:06:33.970 --> 00:06:35.924 So, let's try this. 123 00:06:35.924 --> 00:06:39.670 And indeed, here, we get the error message. 124 00:06:39.670 --> 00:06:43.740 And it is exactly the same one that is locked down here, 125 00:06:43.740 --> 00:06:46.670 from the model. Okay. 126 00:06:46.670 --> 00:06:50.900 However, this is actually not really that useful. 127 00:06:50.900 --> 00:06:55.090 So, well, this error is not really meaningful 128 00:06:55.090 --> 00:06:57.520 for anyone using this application. 129 00:06:57.520 --> 00:07:00.913 And so actually, this is not the message that we want. 130 00:07:02.670 --> 00:07:05.540 So, let's create a more meaningful message. 131 00:07:05.540 --> 00:07:08.523 So, something like, we couldn't find that recipe. 132 00:07:09.660 --> 00:07:14.470 Now, do you think that we should pass in that message here? 133 00:07:14.470 --> 00:07:16.770 So basically specifying, 134 00:07:16.770 --> 00:07:21.407 we couldn't or we could not find that recipe. 135 00:07:23.490 --> 00:07:26.783 Please, try another one. 136 00:07:28.940 --> 00:07:32.760 So, again, do you think that this is the correct place 137 00:07:32.760 --> 00:07:34.690 of specifying this message, 138 00:07:34.690 --> 00:07:37.403 which will get eventually rendered to the view? 139 00:07:38.260 --> 00:07:41.620 Well, actually, I think that it is not. 140 00:07:41.620 --> 00:07:43.990 So, I think that this error message, 141 00:07:43.990 --> 00:07:46.440 should basically be an intrinsic property 142 00:07:46.440 --> 00:07:48.030 of the view itself. 143 00:07:48.030 --> 00:07:51.060 So basically, I'm going to cut this from here now. 144 00:07:51.060 --> 00:07:52.650 And now into view, 145 00:07:52.650 --> 00:07:57.650 I will add just another private field. 146 00:07:58.350 --> 00:08:03.260 So, it's going to be called error message. 147 00:08:03.260 --> 00:08:05.470 And then the message itself. 148 00:08:05.470 --> 00:08:07.850 And so now, basically, the view itself, 149 00:08:07.850 --> 00:08:12.850 already knows the message that it wants to display. Okay. 150 00:08:13.000 --> 00:08:16.010 And then here, in render error, 151 00:08:16.010 --> 00:08:19.670 we will actually keep the ability of passing in a message. 152 00:08:19.670 --> 00:08:22.230 But, if no message is passed in, 153 00:08:22.230 --> 00:08:25.020 then we will simply set a default. 154 00:08:25.020 --> 00:08:28.520 And so, that default is going to be the error message 155 00:08:28.520 --> 00:08:30.163 that we just specified. 156 00:08:31.630 --> 00:08:33.090 Okay. 157 00:08:33.090 --> 00:08:36.260 So here, we don't pass anything now. 158 00:08:36.260 --> 00:08:37.540 And so by doing this, 159 00:08:37.540 --> 00:08:41.680 we are back to having no code that is regarded to the view, 160 00:08:41.680 --> 00:08:45.220 here in our controller. All right. 161 00:08:45.220 --> 00:08:47.150 And so instead, the error message 162 00:08:47.150 --> 00:08:51.400 is then by default, set to the message. 163 00:08:51.400 --> 00:08:53.610 Or actually the other way round. 164 00:08:53.610 --> 00:08:57.420 So, the message argument is gonna be set by default, 165 00:08:57.420 --> 00:09:02.420 to this error message that we set for this entire object. 166 00:09:02.580 --> 00:09:05.370 So, I think that is the best solution, 167 00:09:05.370 --> 00:09:07.520 which makes the most sense. 168 00:09:07.520 --> 00:09:11.520 And so indeed, here, we now get exactly that message. 169 00:09:11.520 --> 00:09:14.750 And so with this, we now have a very robust 170 00:09:14.750 --> 00:09:17.940 and very nice error handling strategy, 171 00:09:17.940 --> 00:09:21.030 that we will then be able to use for other errors 172 00:09:21.030 --> 00:09:22.740 also in the future. 173 00:09:22.740 --> 00:09:25.650 So for example, when there are no search results 174 00:09:25.650 --> 00:09:30.270 for some search term. Okay. 175 00:09:30.270 --> 00:09:33.020 Now, since we did an error message here, 176 00:09:33.020 --> 00:09:36.910 let's very quickly also implement a method here 177 00:09:36.910 --> 00:09:41.353 for success messages even though we don't need it yet. 178 00:09:43.360 --> 00:09:44.480 But it's still good, 179 00:09:44.480 --> 00:09:46.633 to already prepare for that in the future. 180 00:09:47.533 --> 00:09:49.950 And so, since we are working on messages here, 181 00:09:49.950 --> 00:09:51.713 let's do that right away. 182 00:09:52.930 --> 00:09:56.020 So, let's call this one simply render message. 183 00:09:56.020 --> 00:09:58.960 And this one here will have a different class. 184 00:09:58.960 --> 00:10:01.193 Think it should also be be somewhere here. 185 00:10:02.200 --> 00:10:03.883 And actually, it's this default. 186 00:10:04.960 --> 00:10:08.390 So, this is actually the one that we will use. 187 00:10:08.390 --> 00:10:11.420 So, it has the class of message. 188 00:10:11.420 --> 00:10:14.023 But then the rest of the code is actually the same. 189 00:10:15.860 --> 00:10:18.780 So, message, 190 00:10:18.780 --> 00:10:20.210 and actually not the same. 191 00:10:20.210 --> 00:10:22.610 So the icon is also different. 192 00:10:22.610 --> 00:10:24.373 So here it's icon, smile. 193 00:10:26.350 --> 00:10:29.570 So instead of the alert, it is a smile. 194 00:10:29.570 --> 00:10:33.150 And then here, we will want some kind of message again. 195 00:10:33.150 --> 00:10:34.650 And so here, let's now create, 196 00:10:37.060 --> 00:10:39.993 simply get another field called message. 197 00:10:41.030 --> 00:10:44.113 Could also call it like success message. 198 00:10:45.560 --> 00:10:47.370 But let's leave it like this. 199 00:10:47.370 --> 00:10:49.793 And for now, we don't have any success message. 200 00:10:50.930 --> 00:10:54.823 Because again, we're not actually going to use this for now. 201 00:10:57.530 --> 00:11:02.280 Message and then the rest should essentially be the same. 202 00:11:02.280 --> 00:11:04.540 And then in the future, of course, 203 00:11:04.540 --> 00:11:07.750 we will be able to use the success message 204 00:11:07.750 --> 00:11:10.870 in some different places in our application. 205 00:11:10.870 --> 00:11:13.610 All right, and that's actually it. 206 00:11:13.610 --> 00:11:16.890 Let's put it back to some normal URL. 207 00:11:16.890 --> 00:11:18.853 We can just click here. 208 00:11:18.853 --> 00:11:22.547 And then of course, everything is back to working. Great. 209 00:11:23.610 --> 00:11:26.710 And with this, we are actually finally ready 210 00:11:26.710 --> 00:11:30.080 to implement now the searching functionality, 211 00:11:30.080 --> 00:11:31.783 starting in the next lecture.