1
00:00:00,890 --> 00:00:02,400
‫Hello there.

2
00:00:02,400 --> 00:00:06,663
‫Let's now render some nice error pages to our users.

3
00:00:08,210 --> 00:00:11,723
‫And so to start, let's actually create an error first.

4
00:00:13,100 --> 00:00:15,033
‫So let's open this tour here.

5
00:00:16,350 --> 00:00:18,293
‫No, I don't want to translate.

6
00:00:19,440 --> 00:00:23,640
‫And now let's simply add something to this log here,

7
00:00:23,640 --> 00:00:26,563
‫and so that will then, of course, not be found.

8
00:00:27,800 --> 00:00:31,140
‫Right, and so this is what an error looks like

9
00:00:31,140 --> 00:00:32,330
‫at this point.

10
00:00:32,330 --> 00:00:34,510
‫So simply, all of this JSON here,

11
00:00:34,510 --> 00:00:37,440
‫just like it would look like in Postman.

12
00:00:37,440 --> 00:00:40,110
‫So we've seen this kind of error here before.

13
00:00:40,110 --> 00:00:42,740
‫And so, let's now fix that.

14
00:00:42,740 --> 00:00:46,230
‫But first we actually need to fix this particular error.

15
00:00:46,230 --> 00:00:48,150
‫So right now we get,

16
00:00:48,150 --> 00:00:53,150
‫cannot read property name of null in getTour.

17
00:00:53,530 --> 00:00:54,600
‫Okay.

18
00:00:54,600 --> 00:00:59,530
‫And so that is here in our views controller, getTour.

19
00:00:59,530 --> 00:01:02,120
‫And so in here, we do not have any error handling

20
00:01:02,120 --> 00:01:05,260
‫in case that there is no tour, right?

21
00:01:05,260 --> 00:01:08,060
‫So we have that in all our other route handlers,

22
00:01:08,060 --> 00:01:10,470
‫but in this, we don't have it yet.

23
00:01:10,470 --> 00:01:11,513
‫So let's add that.

24
00:01:12,570 --> 00:01:17,570
‫So if there is no tour, then return

25
00:01:18,910 --> 00:01:23,910
‫and go to the next middleware with a new app error.

26
00:01:25,020 --> 00:01:28,090
‫And probably that's not here yet.

27
00:01:28,090 --> 00:01:29,483
‫And no indeed, it's not.

28
00:01:31,290 --> 00:01:32,123
‫So const.

29
00:01:34,904 --> 00:01:36,363
‫AppError equals.

30
00:01:44,880 --> 00:01:46,220
‫Alright.

31
00:01:46,220 --> 00:01:48,280
‫Error here of course.

32
00:01:48,280 --> 00:01:49,480
‫And then let's say

33
00:01:53,720 --> 00:01:55,633
‫there is no tour with that name.

34
00:01:57,420 --> 00:02:01,090
‫And then it's a 404 for not found.

35
00:02:01,090 --> 00:02:02,400
‫Okay?

36
00:02:02,400 --> 00:02:04,300
‫So let's try that again.

37
00:02:04,300 --> 00:02:07,690
‫And so now we should get a much nicer error.

38
00:02:07,690 --> 00:02:09,490
‫And indeed, we get one.

39
00:02:09,490 --> 00:02:11,135
‫So 404.

40
00:02:11,135 --> 00:02:14,800
‫And keep in mind that this one is now an operational error.

41
00:02:14,800 --> 00:02:18,570
‫So an error that we know that we created ourself basically.

42
00:02:18,570 --> 00:02:21,910
‫And so just like before, that's going to be important for

43
00:02:21,910 --> 00:02:23,870
‫our error handling strategy.

44
00:02:23,870 --> 00:02:27,240
‫So, let's actually talk about that.

45
00:02:27,240 --> 00:02:30,010
‫And so here we're done.

46
00:02:30,010 --> 00:02:32,283
‫And now in our error controller,

47
00:02:33,500 --> 00:02:37,130
‫we have, remember, two functions which send errors

48
00:02:37,130 --> 00:02:39,070
‫back to the client.

49
00:02:39,070 --> 00:02:41,280
‫So we have this one here for development

50
00:02:41,280 --> 00:02:43,370
‫and this one for production.

51
00:02:43,370 --> 00:02:45,650
‫Then in production, we distinguish between

52
00:02:45,650 --> 00:02:49,730
‫operational errors and other unknown errors.

53
00:02:49,730 --> 00:02:50,563
‫Right?

54
00:02:50,563 --> 00:02:53,190
‫And so that's actually what we just talked about before.

55
00:02:53,190 --> 00:02:54,690
‫So for the errors that we know,

56
00:02:54,690 --> 00:02:57,470
‫we send back the real error message

57
00:02:57,470 --> 00:02:59,780
‫because we can be sure that it's not going to be

58
00:02:59,780 --> 00:03:01,130
‫some weird looking error

59
00:03:01,130 --> 00:03:03,520
‫coming somewhere from express or note

60
00:03:03,520 --> 00:03:04,910
‫or something like that.

61
00:03:04,910 --> 00:03:08,180
‫While, one the other hand, when it is an unknown error,

62
00:03:08,180 --> 00:03:11,410
‫well, then we do not want to leak the error details.

63
00:03:11,410 --> 00:03:13,880
‫And so now in this case, with the rendered website,

64
00:03:13,880 --> 00:03:16,433
‫we will actually use the same strategy.

65
00:03:17,460 --> 00:03:18,950
‫Now, what I'm going to do

66
00:03:18,950 --> 00:03:21,960
‫is to simply add the rendering of an error page

67
00:03:21,960 --> 00:03:23,900
‫to each of these functions.

68
00:03:23,900 --> 00:03:26,450
‫And basically, what I'm gonna do is to test

69
00:03:26,450 --> 00:03:29,750
‫if the URL starts with slash API.

70
00:03:29,750 --> 00:03:33,930
‫And so in that case, we send this kind of error, right.

71
00:03:33,930 --> 00:03:38,500
‫But if the URL does not start with API, well in that case,

72
00:03:38,500 --> 00:03:41,340
‫it means that we want to render an error page

73
00:03:41,340 --> 00:03:44,030
‫as a rendered website, okay?

74
00:03:44,030 --> 00:03:46,823
‫So just like we've been doing in this section.

75
00:03:47,920 --> 00:03:50,520
‫Anyway, let's now implement that.

76
00:03:50,520 --> 00:03:55,520
‫And so, we can use request dot original URL.

77
00:03:55,570 --> 00:03:58,133
‫And probably we have used that before.

78
00:04:00,000 --> 00:04:00,840
‫Alright?

79
00:04:00,840 --> 00:04:04,690
‫So original URL is basically the entire URL

80
00:04:04,690 --> 00:04:06,180
‫but not with the host.

81
00:04:06,180 --> 00:04:08,990
‫So it looks then, exactly like the route.

82
00:04:08,990 --> 00:04:12,050
‫And so again, when we're hitting our URL,

83
00:04:12,050 --> 00:04:15,640
‫well, then that route starts with slash API.

84
00:04:15,640 --> 00:04:17,440
‫And so now we can test for that.

85
00:04:17,440 --> 00:04:20,710
‫So we can use a JavaScript function called startsWith.

86
00:04:24,310 --> 00:04:26,873
‫So a function that's available for strings.

87
00:04:27,860 --> 00:04:30,973
‫And then test if it starts with slash API.

88
00:04:32,530 --> 00:04:33,363
‫Right?

89
00:04:33,363 --> 00:04:36,853
‫And so if it does, then this is what we want to do.

90
00:04:38,630 --> 00:04:41,163
‫So simply send down the error as JSON.

91
00:04:42,570 --> 00:04:46,943
‫But if not, well, then we actually want to render an error.

92
00:04:49,320 --> 00:04:52,103
‫So it's still res.status.

93
00:04:54,530 --> 00:04:56,177
‫And to statusCode as well.

94
00:04:56,177 --> 00:04:59,483
‫But in here it is actually render.

95
00:05:00,430 --> 00:05:02,480
‫Then we get the name of the template,

96
00:05:02,480 --> 00:05:05,290
‫and we're going to create this template in a second,

97
00:05:05,290 --> 00:05:07,263
‫but it's going to be called error.

98
00:05:08,230 --> 00:05:10,810
‫And then the data that we want to send there

99
00:05:10,810 --> 00:05:12,970
‫is for now just the title.

100
00:05:12,970 --> 00:05:14,430
‫And I will add some more stuff then

101
00:05:14,430 --> 00:05:16,223
‫once the template is actually done.

102
00:05:18,350 --> 00:05:22,900
‫So something went wrong

103
00:05:22,900 --> 00:05:25,323
‫is going to be the title of this error page.

104
00:05:26,490 --> 00:05:27,750
‫Alright?

105
00:05:27,750 --> 00:05:29,570
‫Oh, actually we do not have access

106
00:05:29,570 --> 00:05:31,630
‫to the request variable here.

107
00:05:31,630 --> 00:05:33,480
‫And its function.

108
00:05:33,480 --> 00:05:35,173
‫And so let's add that.

109
00:05:36,790 --> 00:05:38,160
‫Request here.

110
00:05:38,160 --> 00:05:40,270
‫And we're also going to be needing it here.

111
00:05:40,270 --> 00:05:41,103
‫This one.

112
00:05:42,790 --> 00:05:45,010
‫And so let's add that here as well.

113
00:05:45,010 --> 00:05:47,193
‫So right here.

114
00:05:53,723 --> 00:05:54,853
‫Okay.

115
00:05:55,690 --> 00:05:59,180
‫So, now we actually need to create this page,

116
00:05:59,180 --> 00:06:01,400
‫or this template, called error.

117
00:06:01,400 --> 00:06:04,683
‫And once more, I already have a simple template for that.

118
00:06:06,110 --> 00:06:11,030
‫So it's in dev-data, templates, and errorTemplate.

119
00:06:12,830 --> 00:06:14,110
‫Okay?

120
00:06:14,110 --> 00:06:15,513
‫So let's copy this.

121
00:06:17,370 --> 00:06:19,493
‫And then create a view for that.

122
00:06:21,190 --> 00:06:22,253
‫error.pug.

123
00:06:24,010 --> 00:06:24,843
‫Okay.

124
00:06:24,843 --> 00:06:28,080
‫And so here we have a simple h2 which says,

125
00:06:28,080 --> 00:06:29,800
‫uh oh, something went wrong.

126
00:06:29,800 --> 00:06:32,540
‫Then (laughs) some fun emojis there.

127
00:06:32,540 --> 00:06:34,100
‫They're not really fun.

128
00:06:34,100 --> 00:06:38,400
‫And then here we want to be able to also pass in a message.

129
00:06:38,400 --> 00:06:39,750
‫Alright?

130
00:06:39,750 --> 00:06:44,750
‫So let's add this equal to msg, just shorthand for message.

131
00:06:46,320 --> 00:06:47,530
‫Alright?

132
00:06:47,530 --> 00:06:48,963
‫And that's actually it.

133
00:06:49,940 --> 00:06:54,940
‫So let's close that and let's pass in that message.

134
00:06:55,810 --> 00:06:58,640
‫So msg is then set.

135
00:06:58,640 --> 00:07:02,403
‫And let's really set it to error dot message.

136
00:07:03,700 --> 00:07:04,533
‫Okay?

137
00:07:04,533 --> 00:07:07,260
‫And we're doing here because we are in development.

138
00:07:07,260 --> 00:07:08,423
‫So keep that in mind.

139
00:07:09,760 --> 00:07:11,460
‫Let's also add some comments here.

140
00:07:13,402 --> 00:07:14,235
‫API.

141
00:07:18,360 --> 00:07:19,593
‫Let's put that here.

142
00:07:24,740 --> 00:07:26,570
‫The rendered website.

143
00:07:26,570 --> 00:07:29,890
‫So we're doing it like this, with error message,

144
00:07:29,890 --> 00:07:31,530
‫again because in development,

145
00:07:31,530 --> 00:07:34,970
‫it doesn't really matter if we leak all of the error details

146
00:07:34,970 --> 00:07:36,660
‫to our page, right?

147
00:07:36,660 --> 00:07:39,920
‫Because no one is really going to see it since, yeah,

148
00:07:39,920 --> 00:07:41,310
‫we're in development.

149
00:07:41,310 --> 00:07:44,323
‫So that should be working now.

150
00:07:45,330 --> 00:07:48,793
‫So all we should need to do now is reload this page.

151
00:07:51,950 --> 00:07:54,030
‫But now something is wrong here.

152
00:07:54,030 --> 00:07:57,470
‫So it says it didn't send any data.

153
00:07:57,470 --> 00:07:58,633
‫So let's go back here.

154
00:07:59,470 --> 00:08:01,713
‫Well as a first problem I'm seeing here,

155
00:08:02,650 --> 00:08:06,620
‫that I should have the status code and not just the status.

156
00:08:06,620 --> 00:08:08,870
‫That's all to check if we got some error here.

157
00:08:08,870 --> 00:08:09,910
‫Oh yeah.

158
00:08:09,910 --> 00:08:11,413
‫Actually there is errors.

159
00:08:12,770 --> 00:08:16,203
‫So, it actually was the invalid status code.

160
00:08:17,770 --> 00:08:19,113
‫So here it should be code.

161
00:08:20,170 --> 00:08:21,723
‫Let's give that another save.

162
00:08:23,170 --> 00:08:24,590
‫Reload it.

163
00:08:24,590 --> 00:08:28,000
‫And now we get some error page here.

164
00:08:28,000 --> 00:08:29,830
‫Well, it's not really formatted.

165
00:08:29,830 --> 00:08:32,830
‫But still, it has the title and more importantly,

166
00:08:32,830 --> 00:08:36,180
‫it has this message that we just passed in.

167
00:08:36,180 --> 00:08:38,600
‫So there is no tour with that name.

168
00:08:38,600 --> 00:08:43,600
‫And so that comes exactly from our views controller.

169
00:08:43,760 --> 00:08:45,340
‫So right from here.

170
00:08:45,340 --> 00:08:48,720
‫So remember that logic where we create an error here

171
00:08:48,720 --> 00:08:50,920
‫which is then passed down to our global error

172
00:08:50,920 --> 00:08:52,393
‫and Lint middleware.

173
00:08:53,340 --> 00:08:54,173
‫Right?

174
00:08:54,173 --> 00:08:56,760
‫And so that's the one that will pick up these errors

175
00:08:56,760 --> 00:08:59,700
‫and send them down to the client.

176
00:08:59,700 --> 00:09:02,300
‫Now in our case, we get this error

177
00:09:02,300 --> 00:09:05,760
‫because here in our template,

178
00:09:05,760 --> 00:09:07,770
‫we still forgot to do something.

179
00:09:07,770 --> 00:09:11,660
‫Which is simply to extend, of course, our main template.

180
00:09:11,660 --> 00:09:12,810
‫Right?

181
00:09:12,810 --> 00:09:17,810
‫So we need to say extend to base template.

182
00:09:19,690 --> 00:09:22,323
‫And then as always, create that block here.

183
00:09:23,300 --> 00:09:26,040
‫So block content.

184
00:09:26,040 --> 00:09:29,200
‫And then all of this needs to be in there.

185
00:09:29,200 --> 00:09:31,080
‫And so basically here we're doing

186
00:09:31,080 --> 00:09:35,070
‫the exact same thing as we did in all the other templates.

187
00:09:35,070 --> 00:09:37,430
‫So basically injecting this content here

188
00:09:37,430 --> 00:09:40,693
‫into the content blog in the base template.

189
00:09:42,370 --> 00:09:47,370
‫So if we reload that now, then it finally looks as intended.

190
00:09:48,090 --> 00:09:48,923
‫Alright?

191
00:09:49,870 --> 00:09:53,670
‫And now, if we actually did have some error in our code,

192
00:09:53,670 --> 00:09:56,290
‫and so let's again say

193
00:09:56,290 --> 00:09:59,210
‫that we do not have this error handling here,

194
00:09:59,210 --> 00:10:02,713
‫then of course the entire error is leaked to the client.

195
00:10:06,520 --> 00:10:09,410
‫So cannot read property name of null.

196
00:10:09,410 --> 00:10:12,140
‫And of course, we do not want our website visitors

197
00:10:12,140 --> 00:10:14,630
‫to get this kind of error, right?

198
00:10:14,630 --> 00:10:17,040
‫No one would really understand what that means.

199
00:10:17,040 --> 00:10:20,520
‫And so in our production error handler,

200
00:10:20,520 --> 00:10:22,570
‫let's now take care of that.

201
00:10:22,570 --> 00:10:25,300
‫So down here in our error controller,

202
00:10:25,300 --> 00:10:28,770
‫now let's apply the same logic that we have here.

203
00:10:28,770 --> 00:10:32,840
‫So testing if we are currently handling the API or not.

204
00:10:32,840 --> 00:10:35,370
‫And of course there could be more elegant ways

205
00:10:35,370 --> 00:10:36,380
‫of doing this.

206
00:10:36,380 --> 00:10:38,820
‫For example, you could have one completely separate

207
00:10:38,820 --> 00:10:41,450
‫error handling middleware just for the API,

208
00:10:41,450 --> 00:10:44,020
‫and one for the rendered website, right?

209
00:10:44,020 --> 00:10:47,763
‫But again, I just want to keep it kind of simple here.

210
00:10:49,160 --> 00:10:49,993
‫Okay?

211
00:10:49,993 --> 00:10:52,283
‫So in this case, that's really my main goal.

212
00:10:53,570 --> 00:10:54,600
‫Alright.

213
00:10:54,600 --> 00:10:56,750
‫Let's select all of this.

214
00:10:56,750 --> 00:10:57,950
‫Oh, what happened there?

215
00:11:04,880 --> 00:11:05,783
‫Ah, here we go.

216
00:11:07,628 --> 00:11:08,461
‫Okay.

217
00:11:08,461 --> 00:11:09,773
‫So that's for the API.

218
00:11:12,490 --> 00:11:15,140
‫And now we will actually have something very similar.

219
00:11:25,280 --> 00:11:27,883
‫So this one is, again, for the rendered website.

220
00:11:30,950 --> 00:11:35,950
‫Let's call it B here and A for this one.

221
00:11:36,380 --> 00:11:38,790
‫So just to separate it a bit better.

222
00:11:38,790 --> 00:11:40,873
‫So we have and then B down here.

223
00:11:42,600 --> 00:11:45,513
‫Anyway, this will look a bit similar to this one.

224
00:11:46,700 --> 00:11:51,433
‫And so if we have an operational error,

225
00:11:52,940 --> 00:11:54,470
‫then basically the error page

226
00:11:54,470 --> 00:11:57,470
‫should look just like we had here before.

227
00:11:57,470 --> 00:12:01,640
‫But in case that it's a programming or unknown error,

228
00:12:01,640 --> 00:12:05,950
‫well then we do not want the complete message,

229
00:12:05,950 --> 00:12:08,640
‫but instead just a very generic message.

230
00:12:08,640 --> 00:12:13,640
‫So something like please try again later.

231
00:12:14,490 --> 00:12:15,660
‫Alright?

232
00:12:15,660 --> 00:12:18,770
‫Now let's see what kind of error we get here.

233
00:12:18,770 --> 00:12:21,350
‫And apparently, we get something called a

234
00:12:21,350 --> 00:12:23,380
‫lonely if statement here.

235
00:12:23,380 --> 00:12:24,213
‫Right.

236
00:12:24,213 --> 00:12:25,900
‫So yes, Lint doesn't really want us

237
00:12:25,900 --> 00:12:29,000
‫to only have an if inside of an else block.

238
00:12:29,000 --> 00:12:31,580
‫And I agree that it's kind of not

239
00:12:31,580 --> 00:12:34,280
‫a beautiful coding practice.

240
00:12:34,280 --> 00:12:36,280
‫And so in fact, let's fix that

241
00:12:37,500 --> 00:12:39,483
‫by getting rid of this else here.

242
00:12:41,600 --> 00:12:42,740
‫Give it a save.

243
00:12:42,740 --> 00:12:44,540
‫And then that error is gone.

244
00:12:44,540 --> 00:12:47,530
‫But now we need to make sure that this here

245
00:12:47,530 --> 00:12:50,230
‫really ends the request response cycle.

246
00:12:50,230 --> 00:12:54,843
‫And so we need to return here and here as well.

247
00:12:56,240 --> 00:12:57,580
‫Alright.

248
00:12:57,580 --> 00:13:02,150
‫Now, another ESLint error, unnecessary else after a return.

249
00:13:02,150 --> 00:13:04,090
‫And indeed, that is true as well.

250
00:13:04,090 --> 00:13:05,760
‫And I have been actually following this rule

251
00:13:05,760 --> 00:13:08,330
‫throughout the course because I like it myself

252
00:13:08,330 --> 00:13:09,453
‫as a coding practice.

253
00:13:10,360 --> 00:13:13,723
‫And so, yeah, let's get rid of this else here then.

254
00:13:15,000 --> 00:13:18,080
‫I really believe, and I have believed it for a long time,

255
00:13:18,080 --> 00:13:22,050
‫that it looks a lot nicer without these if else statements,

256
00:13:22,050 --> 00:13:25,660
‫but instead only with an if, like this here,

257
00:13:25,660 --> 00:13:28,253
‫and then include the else outside of that.

258
00:13:29,240 --> 00:13:31,300
‫Okay, that's what we have here now.

259
00:13:31,300 --> 00:13:33,373
‫Let's also put A and B here.

260
00:13:34,240 --> 00:13:35,073
‫B.

261
00:13:36,020 --> 00:13:38,613
‫And in fact, let's do the exact same thing here.

262
00:13:39,930 --> 00:13:41,033
‫So return.

263
00:13:44,820 --> 00:13:46,513
‫Return this one as well.

264
00:13:52,160 --> 00:13:53,653
‫Then here, A and B as well.

265
00:13:57,150 --> 00:14:00,540
‫So, that in fact looks cleaner to me.

266
00:14:00,540 --> 00:14:02,450
‫Now we have A here and A here again,

267
00:14:02,450 --> 00:14:04,733
‫but, well, never mind at this point.

268
00:14:05,570 --> 00:14:06,403
‫Alright.

269
00:14:07,320 --> 00:14:08,993
‫So return here.

270
00:14:11,260 --> 00:14:12,190
‫Return here.

271
00:14:12,190 --> 00:14:15,863
‫And before it yells at me, let's remove this.

272
00:14:17,630 --> 00:14:19,773
‫And so that is better again.

273
00:14:23,120 --> 00:14:24,833
‫So put this out here.

274
00:14:25,770 --> 00:14:28,950
‫And that should actually be it.

275
00:14:28,950 --> 00:14:29,840
‫Alright?

276
00:14:29,840 --> 00:14:31,950
‫Let's just for the sake of completeness

277
00:14:31,950 --> 00:14:35,660
‫copy this comment here as well.

278
00:14:35,660 --> 00:14:39,333
‫And then call this one B again.

279
00:14:41,160 --> 00:14:42,520
‫Alright.

280
00:14:42,520 --> 00:14:43,353
‫Perfect.

281
00:14:44,720 --> 00:14:46,910
‫Let's actually copy this one here as well

282
00:14:46,910 --> 00:14:48,603
‫to the development function.

283
00:14:49,770 --> 00:14:52,500
‫Because right now, once we send back that error,

284
00:14:52,500 --> 00:14:55,723
‫we really have no way of then seeing the complete error.

285
00:14:58,460 --> 00:15:02,930
‫Alright, so, getting rid of this to make it more visible.

286
00:15:02,930 --> 00:15:04,483
‫And now that's beautiful.

287
00:15:05,740 --> 00:15:06,900
‫Okay.

288
00:15:06,900 --> 00:15:08,800
‫So let's actually quit it here now

289
00:15:08,800 --> 00:15:12,300
‫so that we can start our production application.

290
00:15:12,300 --> 00:15:15,670
‫So basically running it now in production.

291
00:15:15,670 --> 00:15:18,500
‫And we have a script for that which is called

292
00:15:19,800 --> 00:15:23,970
‫npm run start production.

293
00:15:27,220 --> 00:15:28,560
‫Okay?

294
00:15:28,560 --> 00:15:31,100
‫So if we test this out now

295
00:15:31,100 --> 00:15:34,430
‫then we should no longer see this string here, remember?

296
00:15:34,430 --> 00:15:37,090
‫Because at this point, we do not have any error handling

297
00:15:37,090 --> 00:15:39,610
‫for an invalid tour name like this.

298
00:15:39,610 --> 00:15:40,637
‫Okay?

299
00:15:40,637 --> 00:15:41,470
‫Right?

300
00:15:41,470 --> 00:15:42,303
‫Since we're in production,

301
00:15:42,303 --> 00:15:44,220
‫and it is not an operational error,

302
00:15:44,220 --> 00:15:46,127
‫well, we do not want to see this.

303
00:15:46,127 --> 00:15:49,400
‫And so that's what we just coded up before.

304
00:15:49,400 --> 00:15:53,030
‫And so indeed, this is the more generic error message.

305
00:15:53,030 --> 00:15:54,070
‫Right?

306
00:15:54,070 --> 00:15:59,070
‫But if we then put it back here in the views controller,

307
00:16:00,800 --> 00:16:03,170
‫so if we put this error handling back,

308
00:16:03,170 --> 00:16:06,150
‫then of course, since this here will now be

309
00:16:06,150 --> 00:16:09,830
‫an operational error, then we shall of course get

310
00:16:09,830 --> 00:16:11,460
‫that error string.

311
00:16:11,460 --> 00:16:12,930
‫Because it's always nice

312
00:16:12,930 --> 00:16:15,400
‫to show a friendly message to the user.

313
00:16:15,400 --> 00:16:18,453
‫But as you saw, that actually did not happen.

314
00:16:19,540 --> 00:16:22,383
‫So why is that?

315
00:16:25,140 --> 00:16:28,450
‫Well, we are in the production error.

316
00:16:28,450 --> 00:16:31,070
‫We are at the rendered website.

317
00:16:31,070 --> 00:16:34,290
‫And indeed, we have an operational error.

318
00:16:34,290 --> 00:16:35,483
‫And so ...

319
00:16:39,010 --> 00:16:40,263
‫We have this in place.

320
00:16:41,200 --> 00:16:45,010
‫And so indeed, it should work as we expected.

321
00:16:45,010 --> 00:16:47,200
‫Well, let's just try to log to the console

322
00:16:48,540 --> 00:16:49,880
‫the error dot message

323
00:16:51,740 --> 00:16:54,573
‫just to see if we actually got it at this point.

324
00:16:56,140 --> 00:16:57,570
‫Alright.

325
00:16:57,570 --> 00:16:59,480
‫Reload this guy.

326
00:16:59,480 --> 00:17:01,853
‫And so there is the error.

327
00:17:02,720 --> 00:17:05,170
‫But still, that's very weird.

328
00:17:05,170 --> 00:17:07,363
‫So that's indeed logged the entire error.

329
00:17:15,210 --> 00:17:16,120
‫Very strange.

330
00:17:16,120 --> 00:17:20,560
‫Because for some reason, the message is also not there.

331
00:17:20,560 --> 00:17:24,363
‫So let's run it again in development.

332
00:17:25,968 --> 00:17:26,883
‫So npm start.

333
00:17:30,120 --> 00:17:30,953
‫Alright.

334
00:17:31,940 --> 00:17:35,460
‫And here for some reason, it gets access to this message.

335
00:17:35,460 --> 00:17:38,110
‫So that means that in our views controller,

336
00:17:38,110 --> 00:17:40,553
‫we actually set that message correctly.

337
00:17:44,410 --> 00:17:45,983
‫Run it in production again.

338
00:17:48,080 --> 00:17:52,183
‫So this is the kind of stuff that we don't like, right?

339
00:17:54,370 --> 00:17:57,670
‫So let's take a look at where our error in production

340
00:17:57,670 --> 00:17:59,550
‫is actually created.

341
00:17:59,550 --> 00:18:01,320
‫And that is here.

342
00:18:01,320 --> 00:18:04,720
‫So this error object that we're using here in production

343
00:18:04,720 --> 00:18:08,020
‫is a copy of this error, right?

344
00:18:08,020 --> 00:18:10,960
‫So the one that's coming into this middleware.

345
00:18:10,960 --> 00:18:15,960
‫And so let's actually take a look at both of them

346
00:18:15,960 --> 00:18:17,083
‫in the console.

347
00:18:18,850 --> 00:18:20,803
‫So error dot message.

348
00:18:23,636 --> 00:18:26,303
‫And then also error dot message.

349
00:18:29,930 --> 00:18:31,203
‫So do that again.

350
00:18:34,070 --> 00:18:35,620
‫Okay.

351
00:18:35,620 --> 00:18:37,470
‫So we see that error,

352
00:18:37,470 --> 00:18:40,590
‫so the one that's coming right into our middleware function,

353
00:18:40,590 --> 00:18:42,630
‫does indeed have the message.

354
00:18:42,630 --> 00:18:45,730
‫But then the one that we copy, so error,

355
00:18:45,730 --> 00:18:47,380
‫for some reason does not.

356
00:18:47,380 --> 00:18:49,870
‫And so this trick that we're doing here,

357
00:18:49,870 --> 00:18:53,160
‫for some reason does not copy the message with it,

358
00:18:53,160 --> 00:18:54,130
‫alright?

359
00:18:54,130 --> 00:18:57,930
‫And so let's do a quick fix of that.

360
00:18:57,930 --> 00:19:02,930
‫And let's say that error dot message equals err dot message.

361
00:19:07,100 --> 00:19:07,933
‫Alright?

362
00:19:07,933 --> 00:19:10,963
‫And so that should then fix it, hopefully.

363
00:19:13,210 --> 00:19:14,660
‫Ah, alright.

364
00:19:14,660 --> 00:19:15,653
‫Here we go.

365
00:19:16,910 --> 00:19:17,743
‫Right.

366
00:19:19,430 --> 00:19:22,930
‫So now you see that they are indeed the same.

367
00:19:22,930 --> 00:19:24,330
‫And so that was the problem.

368
00:19:25,490 --> 00:19:26,330
‫Alright?

369
00:19:26,330 --> 00:19:28,010
‫So without this,

370
00:19:28,010 --> 00:19:30,543
‫actually all the errors would not work correctly.

371
00:19:31,610 --> 00:19:33,860
‫So if we put this out here

372
00:19:33,860 --> 00:19:38,860
‫and tried to log in for example, so admin@natours.io.

373
00:19:47,490 --> 00:19:50,970
‫So you see, we also get an undefined error here.

374
00:19:50,970 --> 00:19:51,890
‫Alright.

375
00:19:51,890 --> 00:19:54,630
‫And so that's again because we're in production

376
00:19:54,630 --> 00:19:58,860
‫and our error object didn't correctly copy the message.

377
00:19:58,860 --> 00:20:01,400
‫I'm not sure why I didn't catch this one

378
00:20:01,400 --> 00:20:03,780
‫when we were actually implementing this.

379
00:20:03,780 --> 00:20:07,253
‫But maybe I didn't test it in a thorough enough way.

380
00:20:08,240 --> 00:20:09,640
‫Okay?

381
00:20:09,640 --> 00:20:11,403
‫And anyway, if we try this now,

382
00:20:12,470 --> 00:20:15,320
‫now we then get the correct error message

383
00:20:15,320 --> 00:20:16,370
‫that we're expecting.

384
00:20:18,230 --> 00:20:19,300
‫Alright.

385
00:20:19,300 --> 00:20:20,133
‫Great.

386
00:20:20,133 --> 00:20:21,360
‫So that's solved.

387
00:20:21,360 --> 00:20:24,950
‫And so that actually wraps up this video.

388
00:20:24,950 --> 00:20:26,250
‫So just in conclusion,

389
00:20:26,250 --> 00:20:28,740
‫we now have an error handling strategy

390
00:20:28,740 --> 00:20:33,740
‫that works for development, such as before,

391
00:20:34,050 --> 00:20:35,780
‫and also for production.

392
00:20:35,780 --> 00:20:39,000
‫And then in each of them, we basically have two branches.

393
00:20:39,000 --> 00:20:41,500
‫One sends the error message for the API,

394
00:20:41,500 --> 00:20:43,397
‫which is exactly what we had before,

395
00:20:43,397 --> 00:20:46,640
‫and then we also have now kind of a handler

396
00:20:46,640 --> 00:20:48,430
‫for the rendered website.

397
00:20:48,430 --> 00:20:52,220
‫And so in that case, we render out our error template.

398
00:20:52,220 --> 00:20:54,850
‫Then in production, we also distinguish between

399
00:20:54,850 --> 00:20:57,620
‫rendered website and API.

400
00:20:57,620 --> 00:20:59,270
‫And then just as before,

401
00:20:59,270 --> 00:21:01,700
‫inside of each of these branches,

402
00:21:01,700 --> 00:21:03,784
‫we then also distinguish between

403
00:21:03,784 --> 00:21:06,293
‫the operation errors and the unknown errors.

404
00:21:07,240 --> 00:21:09,140
‫So operational and unknown.

405
00:21:09,140 --> 00:21:13,230
‫And then inside rendered, also operational and unknown.

406
00:21:13,230 --> 00:21:15,490
‫And so for the rendered website,

407
00:21:15,490 --> 00:21:18,600
‫if we have an operational error, so a trusted one,

408
00:21:18,600 --> 00:21:21,270
‫then we send our trusted error message.

409
00:21:21,270 --> 00:21:23,590
‫But in case we do not trust the error,

410
00:21:23,590 --> 00:21:25,150
‫so when we do not know it,

411
00:21:25,150 --> 00:21:29,560
‫then we simply send this generic message back to the user.

412
00:21:29,560 --> 00:21:31,630
‫So, great.

413
00:21:31,630 --> 00:21:35,050
‫Let's quit that here and go back to development

414
00:21:35,920 --> 00:21:38,350
‫and wrap up this lecture.

415
00:21:38,350 --> 00:21:39,763
‫So see you in the next one.