Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
1
00:00:01,320 --> 00:00:02,650
Let's now implement,
2
2
00:00:02,650 --> 00:00:06,040
real world error handling in our application,
3
3
00:00:06,040 --> 00:00:10,523
instead of, always simply logging errors to the console.
4
4
00:00:12,250 --> 00:00:15,150
And again, the error that we're gonna work with,
5
5
00:00:15,150 --> 00:00:18,230
is basically using a false ID,
6
6
00:00:18,230 --> 00:00:20,820
that cannot be found on the server.
7
7
00:00:20,820 --> 00:00:24,423
So indeed, we get our error message, invalid ID,
8
8
00:00:25,410 --> 00:00:30,290
and then the ID itself, plus the status code.
9
9
00:00:30,290 --> 00:00:34,020
Now, the real world way of handling an error like this,
10
10
00:00:34,020 --> 00:00:36,830
is to actually display some message here
11
11
00:00:36,830 --> 00:00:38,460
in the user interface,
12
12
00:00:38,460 --> 00:00:42,400
so that the user can actually know what's going on.
13
13
00:00:42,400 --> 00:00:45,220
So basically, handling the error will mean,
14
14
00:00:45,220 --> 00:00:49,120
to display an error message here in the view.
15
15
00:00:49,120 --> 00:00:51,690
So, right now we are handling the error,
16
16
00:00:51,690 --> 00:00:53,913
actually in the model, right.
17
17
00:00:54,760 --> 00:00:56,310
So, remember how I said,
18
18
00:00:56,310 --> 00:00:58,360
that for now, handling the error
19
19
00:00:58,360 --> 00:01:03,360
is simply logging it here with these small emoji here.
20
20
00:01:03,490 --> 00:01:05,790
And so again, that's basically
21
21
00:01:05,790 --> 00:01:08,570
our current error handling strategy.
22
22
00:01:08,570 --> 00:01:10,770
However, it is not correct.
23
23
00:01:10,770 --> 00:01:14,230
And also, it doesn't happen in the correct place.
24
24
00:01:14,230 --> 00:01:17,440
Because if we want to display something into view,
25
25
00:01:17,440 --> 00:01:20,980
then of course, that code should also be in the view
26
26
00:01:20,980 --> 00:01:22,233
and not in the model.
27
27
00:01:23,150 --> 00:01:27,060
So, let's go back to our code and to our view,
28
28
00:01:27,060 --> 00:01:28,960
and implement a new method here,
29
29
00:01:28,960 --> 00:01:30,760
which is going to be responsible
30
30
00:01:30,760 --> 00:01:33,970
for displaying that error message.
31
31
00:01:33,970 --> 00:01:37,893
And actually, the HTML code is already here.
32
32
00:01:40,970 --> 00:01:43,240
In this like template.
33
33
00:01:43,240 --> 00:01:46,060
So, it's gonna be this class here,
34
34
00:01:46,060 --> 00:01:48,493
or this element with the class of error.
35
35
00:01:49,360 --> 00:01:51,330
So let's copy this.
36
36
00:01:51,330 --> 00:01:52,940
Go to the view,
37
37
00:01:52,940 --> 00:01:57,003
and then, let's put it here after this spinner.
38
38
00:01:58,950 --> 00:02:01,183
So render error,
39
39
00:02:02,639 --> 00:02:04,370
(keyboard typing)
40
40
00:02:04,370 --> 00:02:06,150
maintain like this.
41
41
00:02:06,150 --> 00:02:08,310
And for some reason, here, I,
42
42
00:02:08,310 --> 00:02:10,780
I declared like a normal function.
43
43
00:02:10,780 --> 00:02:13,023
Which doesn't make a lot of sense.
44
44
00:02:16,837 --> 00:02:20,020
And now, let's create a new markup variable.
45
45
00:02:20,020 --> 00:02:22,173
As always, when we create,
46
46
00:02:24,450 --> 00:02:26,210
well, some new markup,
47
47
00:02:26,210 --> 00:02:28,810
which is exactly what we're doing here.
48
48
00:02:28,810 --> 00:02:31,370
Then here, remember, we need to replace this
49
49
00:02:31,370 --> 00:02:33,093
with the icons variable.
50
50
00:02:37,340 --> 00:02:38,460
And then here, of course,
51
51
00:02:38,460 --> 00:02:42,390
we want to have like some custom message.
52
52
00:02:42,390 --> 00:02:45,430
So we don't simply want this hard coded message.
53
53
00:02:45,430 --> 00:02:48,750
But instead, we want to be able to pass a message,
54
54
00:02:48,750 --> 00:02:50,433
into this method.
55
55
00:02:55,570 --> 00:02:58,540
So, that's going to be message like this.
56
56
00:02:58,540 --> 00:03:00,963
And so let's add a parameter here for that.
57
57
00:03:02,930 --> 00:03:04,260
Now, okay.
58
58
00:03:04,260 --> 00:03:07,623
And then here, let's clear the parent element.
59
59
00:03:09,490 --> 00:03:10,963
So, like this.
60
60
00:03:12,050 --> 00:03:14,100
And actually, we should do the same here.
61
61
00:03:15,700 --> 00:03:18,600
So, this.clear is a lot nicer
62
62
00:03:18,600 --> 00:03:20,563
than having to write all of this.
63
63
00:03:21,740 --> 00:03:26,030
And so we abstracted all that away into this method.
64
64
00:03:26,030 --> 00:03:29,380
And now we can basically simply get this code,
65
65
00:03:29,380 --> 00:03:33,290
because it's going to be the same. Right.
66
66
00:03:33,290 --> 00:03:37,140
The variable here is still called markup.
67
67
00:03:37,140 --> 00:03:41,900
And, we still want to basically insert this HTML,
68
68
00:03:41,900 --> 00:03:44,230
into the parent element.
69
69
00:03:44,230 --> 00:03:49,230
So that's, again, this element with the recipe class.
70
70
00:03:49,920 --> 00:03:51,140
Okay.
71
71
00:03:51,140 --> 00:03:54,833
And so that's actually it, here for the view, at least.
72
72
00:03:56,350 --> 00:03:57,920
Okay.
73
73
00:03:57,920 --> 00:04:00,120
So let's now go to the model.
74
74
00:04:00,120 --> 00:04:02,240
Because remember that right now,
75
75
00:04:02,240 --> 00:04:07,240
we are actually handling the error right here, like this.
76
76
00:04:07,440 --> 00:04:10,090
But again, that's not what we want.
77
77
00:04:10,090 --> 00:04:15,060
So, we want a way of getting this error into the view.
78
78
00:04:15,060 --> 00:04:18,700
Now these two are only connected by the controller.
79
79
00:04:18,700 --> 00:04:21,820
And so, of course, it is going to be the controller
80
80
00:04:21,820 --> 00:04:25,470
who will call recipe view. Right.
81
81
00:04:25,470 --> 00:04:26,953
So, let's do that actually.
82
82
00:04:28,020 --> 00:04:31,120
So, that's going to be right here in the catch block,
83
83
00:04:31,120 --> 00:04:34,743
of the control recipes controller.
84
84
00:04:35,800 --> 00:04:37,100
So, recipeView.renderError
85
85
00:04:42,449 --> 00:04:44,540
and then some message.
86
86
00:04:44,540 --> 00:04:47,730
But what is this message going to look like?
87
87
00:04:47,730 --> 00:04:51,390
Or in other words, where are we going to get it from?
88
88
00:04:51,390 --> 00:04:54,620
Because now we have the same problem as before.
89
89
00:04:54,620 --> 00:04:58,070
So remember, here in the helpers function,
90
90
00:04:58,070 --> 00:05:00,260
whenever we got this error,
91
91
00:05:00,260 --> 00:05:03,690
then that error was not automatically propagated
92
92
00:05:03,690 --> 00:05:06,370
down to this async function,
93
93
00:05:06,370 --> 00:05:09,960
which was actually calling the getJSON function.
94
94
00:05:09,960 --> 00:05:14,000
And so therefore, we had to re-throw the error here.
95
95
00:05:14,000 --> 00:05:18,330
So, basically to mark this whole promise here, as rejected,
96
96
00:05:18,330 --> 00:05:22,490
so that then here, we would get into this catch block.
97
97
00:05:22,490 --> 00:05:25,760
But now, we're here again, we have the same problem.
98
98
00:05:25,760 --> 00:05:28,480
Because now if we get an error here,
99
99
00:05:28,480 --> 00:05:30,203
then this promise,
100
100
00:05:31,060 --> 00:05:33,360
so this whole load recipe promise,
101
101
00:05:33,360 --> 00:05:35,940
will also not get rejected.
102
102
00:05:35,940 --> 00:05:40,250
And so therefore, here, we will never enter the catch block
103
103
00:05:40,250 --> 00:05:41,810
in this function.
104
104
00:05:41,810 --> 00:05:45,590
So, it's a bit confusing, like the flow of the error
105
105
00:05:45,590 --> 00:05:48,140
and how we need to propagate it down.
106
106
00:05:48,140 --> 00:05:49,300
But essentially,
107
107
00:05:49,300 --> 00:05:51,760
we will have to do the same thing as before.
108
108
00:05:51,760 --> 00:05:54,633
Which is to throw the error here again.
109
109
00:05:55,700 --> 00:05:57,910
And so with this, we will then have access
110
110
00:05:57,910 --> 00:06:01,800
to the exact same error object, as we have here.
111
111
00:06:01,800 --> 00:06:03,793
And otherwise, we wouldn't.
112
112
00:06:05,620 --> 00:06:08,600
So now we can use the same thing here.
113
113
00:06:08,600 --> 00:06:11,990
Let's actually get rid of this console.log.
114
114
00:06:11,990 --> 00:06:14,250
And so, now here our error handling
115
115
00:06:14,250 --> 00:06:16,990
is basically finally complete.
116
116
00:06:16,990 --> 00:06:19,540
So, instead of simply logging it to the console,
117
117
00:06:19,540 --> 00:06:23,590
we now have a way of rendering it to the user interface.
118
118
00:06:23,590 --> 00:06:26,833
And we will be able to access the exact same error
119
119
00:06:26,833 --> 00:06:29,440
that we also got access to, here,
120
120
00:06:29,440 --> 00:06:31,163
in the load recipe function.
121
121
00:06:32,600 --> 00:06:33,970
Okay.
122
122
00:06:33,970 --> 00:06:35,924
So, let's try this.
123
123
00:06:35,924 --> 00:06:39,670
And indeed, here, we get the error message.
124
124
00:06:39,670 --> 00:06:43,740
And it is exactly the same one that is locked down here,
125
125
00:06:43,740 --> 00:06:46,670
from the model. Okay.
126
126
00:06:46,670 --> 00:06:50,900
However, this is actually not really that useful.
127
127
00:06:50,900 --> 00:06:55,090
So, well, this error is not really meaningful
128
128
00:06:55,090 --> 00:06:57,520
for anyone using this application.
129
129
00:06:57,520 --> 00:07:00,913
And so actually, this is not the message that we want.
130
130
00:07:02,670 --> 00:07:05,540
So, let's create a more meaningful message.
131
131
00:07:05,540 --> 00:07:08,523
So, something like, we couldn't find that recipe.
132
132
00:07:09,660 --> 00:07:14,470
Now, do you think that we should pass in that message here?
133
133
00:07:14,470 --> 00:07:16,770
So basically specifying,
134
134
00:07:16,770 --> 00:07:21,407
we couldn't or we could not find that recipe.
135
135
00:07:23,490 --> 00:07:26,783
Please, try another one.
136
136
00:07:28,940 --> 00:07:32,760
So, again, do you think that this is the correct place
137
137
00:07:32,760 --> 00:07:34,690
of specifying this message,
138
138
00:07:34,690 --> 00:07:37,403
which will get eventually rendered to the view?
139
139
00:07:38,260 --> 00:07:41,620
Well, actually, I think that it is not.
140
140
00:07:41,620 --> 00:07:43,990
So, I think that this error message,
141
141
00:07:43,990 --> 00:07:46,440
should basically be an intrinsic property
142
142
00:07:46,440 --> 00:07:48,030
of the view itself.
143
143
00:07:48,030 --> 00:07:51,060
So basically, I'm going to cut this from here now.
144
144
00:07:51,060 --> 00:07:52,650
And now into view,
145
145
00:07:52,650 --> 00:07:57,650
I will add just another private field.
146
146
00:07:58,350 --> 00:08:03,260
So, it's going to be called error message.
147
147
00:08:03,260 --> 00:08:05,470
And then the message itself.
148
148
00:08:05,470 --> 00:08:07,850
And so now, basically, the view itself,
149
149
00:08:07,850 --> 00:08:12,850
already knows the message that it wants to display. Okay.
150
150
00:08:13,000 --> 00:08:16,010
And then here, in render error,
151
151
00:08:16,010 --> 00:08:19,670
we will actually keep the ability of passing in a message.
152
152
00:08:19,670 --> 00:08:22,230
But, if no message is passed in,
153
153
00:08:22,230 --> 00:08:25,020
then we will simply set a default.
154
154
00:08:25,020 --> 00:08:28,520
And so, that default is going to be the error message
155
155
00:08:28,520 --> 00:08:30,163
that we just specified.
156
156
00:08:31,630 --> 00:08:33,090
Okay.
157
157
00:08:33,090 --> 00:08:36,260
So here, we don't pass anything now.
158
158
00:08:36,260 --> 00:08:37,540
And so by doing this,
159
159
00:08:37,540 --> 00:08:41,680
we are back to having no code that is regarded to the view,
160
160
00:08:41,680 --> 00:08:45,220
here in our controller. All right.
161
161
00:08:45,220 --> 00:08:47,150
And so instead, the error message
162
162
00:08:47,150 --> 00:08:51,400
is then by default, set to the message.
163
163
00:08:51,400 --> 00:08:53,610
Or actually the other way round.
164
164
00:08:53,610 --> 00:08:57,420
So, the message argument is gonna be set by default,
165
165
00:08:57,420 --> 00:09:02,420
to this error message that we set for this entire object.
166
166
00:09:02,580 --> 00:09:05,370
So, I think that is the best solution,
167
167
00:09:05,370 --> 00:09:07,520
which makes the most sense.
168
168
00:09:07,520 --> 00:09:11,520
And so indeed, here, we now get exactly that message.
169
169
00:09:11,520 --> 00:09:14,750
And so with this, we now have a very robust
170
170
00:09:14,750 --> 00:09:17,940
and very nice error handling strategy,
171
171
00:09:17,940 --> 00:09:21,030
that we will then be able to use for other errors
172
172
00:09:21,030 --> 00:09:22,740
also in the future.
173
173
00:09:22,740 --> 00:09:25,650
So for example, when there are no search results
174
174
00:09:25,650 --> 00:09:30,270
for some search term. Okay.
175
175
00:09:30,270 --> 00:09:33,020
Now, since we did an error message here,
176
176
00:09:33,020 --> 00:09:36,910
let's very quickly also implement a method here
177
177
00:09:36,910 --> 00:09:41,353
for success messages even though we don't need it yet.
178
178
00:09:43,360 --> 00:09:44,480
But it's still good,
179
179
00:09:44,480 --> 00:09:46,633
to already prepare for that in the future.
180
180
00:09:47,533 --> 00:09:49,950
And so, since we are working on messages here,
181
181
00:09:49,950 --> 00:09:51,713
let's do that right away.
182
182
00:09:52,930 --> 00:09:56,020
So, let's call this one simply render message.
183
183
00:09:56,020 --> 00:09:58,960
And this one here will have a different class.
184
184
00:09:58,960 --> 00:10:01,193
Think it should also be be somewhere here.
185
185
00:10:02,200 --> 00:10:03,883
And actually, it's this default.
186
186
00:10:04,960 --> 00:10:08,390
So, this is actually the one that we will use.
187
187
00:10:08,390 --> 00:10:11,420
So, it has the class of message.
188
188
00:10:11,420 --> 00:10:14,023
But then the rest of the code is actually the same.
189
189
00:10:15,860 --> 00:10:18,780
So, message,
190
190
00:10:18,780 --> 00:10:20,210
and actually not the same.
191
191
00:10:20,210 --> 00:10:22,610
So the icon is also different.
192
192
00:10:22,610 --> 00:10:24,373
So here it's icon, smile.
193
193
00:10:26,350 --> 00:10:29,570
So instead of the alert, it is a smile.
194
194
00:10:29,570 --> 00:10:33,150
And then here, we will want some kind of message again.
195
195
00:10:33,150 --> 00:10:34,650
And so here, let's now create,
196
196
00:10:37,060 --> 00:10:39,993
simply get another field called message.
197
197
00:10:41,030 --> 00:10:44,113
Could also call it like success message.
198
198
00:10:45,560 --> 00:10:47,370
But let's leave it like this.
199
199
00:10:47,370 --> 00:10:49,793
And for now, we don't have any success message.
200
200
00:10:50,930 --> 00:10:54,823
Because again, we're not actually going to use this for now.
201
201
00:10:57,530 --> 00:11:02,280
Message and then the rest should essentially be the same.
202
202
00:11:02,280 --> 00:11:04,540
And then in the future, of course,
203
203
00:11:04,540 --> 00:11:07,750
we will be able to use the success message
204
204
00:11:07,750 --> 00:11:10,870
in some different places in our application.
205
205
00:11:10,870 --> 00:11:13,610
All right, and that's actually it.
206
206
00:11:13,610 --> 00:11:16,890
Let's put it back to some normal URL.
207
207
00:11:16,890 --> 00:11:18,853
We can just click here.
208
208
00:11:18,853 --> 00:11:22,547
And then of course, everything is back to working. Great.
209
209
00:11:23,610 --> 00:11:26,710
And with this, we are actually finally ready
210
210
00:11:26,710 --> 00:11:30,080
to implement now the searching functionality,
211
211
00:11:30,080 --> 00:11:31,783
starting in the next lecture.
18092
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.