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.