1
00:00:00,020 --> 00:00:00,380
All right.

2
00:00:00,380 --> 00:00:04,059
And up next, let's talk about the 404 errors.

3
00:00:04,070 --> 00:00:11,540
So technically, we can use this approach where essentially we just copy and paste this status and Json

4
00:00:11,540 --> 00:00:12,590
and all that.

5
00:00:12,590 --> 00:00:16,340
But we need to keep in mind again that we are repeating ourselves.

6
00:00:16,340 --> 00:00:23,870
So a better approach is to actually set up a custom class which is going to extend from the error class

7
00:00:23,900 --> 00:00:31,340
where we right away provide the status code and then we just import the custom error class and we provide

8
00:00:31,340 --> 00:00:38,570
the message and essentially we send the error response from our error handler.

9
00:00:38,570 --> 00:00:45,200
And this is one of those things where, yes, technically it's going to be a little bit tedious to set

10
00:00:45,200 --> 00:00:46,670
this entire thing up.

11
00:00:46,700 --> 00:00:53,720
But keep in mind that you can and most likely you will take this from project to project.

12
00:00:53,720 --> 00:00:59,210
So yes, it's going to be a little bit painful right now, but once we have it in place, we can not

13
00:00:59,210 --> 00:01:04,379
only use it in this project but also in all of the upcoming projects.

14
00:01:04,379 --> 00:01:05,910
So what am I talking about?

15
00:01:05,940 --> 00:01:13,840
Well, instead of copying this one every time we need 404, remember that if we throw an error.

16
00:01:13,860 --> 00:01:19,740
So if I'm going to go here with throw new error, the result is going to be following.

17
00:01:19,950 --> 00:01:25,170
I will send back the response from my error middleware.

18
00:01:25,170 --> 00:01:26,430
So let me try this out.

19
00:01:26,430 --> 00:01:29,300
So I have over here this get job.

20
00:01:29,760 --> 00:01:38,460
Let me navigate over here to get single job and again let me mess with the ID notice now I get back

21
00:01:38,460 --> 00:01:39,780
this 500.

22
00:01:39,780 --> 00:01:41,370
So something went wrong.

23
00:01:41,370 --> 00:01:47,490
But if I actually take a look at the console, I see this error and something.

24
00:01:47,490 --> 00:01:50,730
So essentially the error was triggered.

25
00:01:50,730 --> 00:01:52,320
Everything is correct.

26
00:01:52,350 --> 00:01:58,650
We're just not passing this message correctly down to our error middleware.

27
00:01:58,650 --> 00:02:06,060
And in order to fix it, we want to set up a custom error class which is going to extend the built in

28
00:02:06,060 --> 00:02:07,560
error class in JavaScript.

29
00:02:07,590 --> 00:02:09,180
We'll add our own code.

30
00:02:09,180 --> 00:02:18,090
In this case, it's going to be 404 and also we'll set up the functionality where in our own middleware

31
00:02:18,090 --> 00:02:24,960
in the error one, we'll check whether it's our own error, basically the one that we are throwing or

32
00:02:24,960 --> 00:02:26,490
it's just some generic one.

33
00:02:26,490 --> 00:02:29,850
So just bear with me one by one first.

34
00:02:30,390 --> 00:02:34,830
Let's navigate back to our route and we want to create a new folder.

35
00:02:35,190 --> 00:02:37,260
And here I'm going to call this errors.

36
00:02:37,290 --> 00:02:41,490
And inside of this folder, I want to create a file.

37
00:02:41,490 --> 00:02:44,370
And in my case, I'm going to call this custom errors.

38
00:02:44,400 --> 00:02:52,320
Now, in the previous course iteration, we created pretty much a separate file for each error.

39
00:02:52,350 --> 00:02:56,850
In this case, we're going to do a little bit differently where basically there's going to be only one

40
00:02:56,850 --> 00:03:03,390
file and we'll export all of the errors from this file, and that way we'll use named imports.

41
00:03:03,390 --> 00:03:08,790
Again, not a big deal, but just letting you know that there's also other approaches we can take.

42
00:03:08,820 --> 00:03:10,410
First, we'll need status codes.

43
00:03:10,410 --> 00:03:10,680
Why?

44
00:03:10,860 --> 00:03:18,570
Because we are creating our own error class and it kind of makes sense for me to hard code that status

45
00:03:18,570 --> 00:03:19,080
code.

46
00:03:19,110 --> 00:03:22,440
Let's say if it's going to be a not found error.

47
00:03:23,150 --> 00:03:26,150
I mean, I know that always status code is going to be 404.

48
00:03:26,150 --> 00:03:27,410
Why I need to copy and paste.

49
00:03:27,410 --> 00:03:31,100
I know that it's going to be the case and therefore I'll grab the status codes.

50
00:03:31,190 --> 00:03:33,380
Then we want to right away export.

51
00:03:33,380 --> 00:03:36,170
Like I said, we'll create a class.

52
00:03:36,170 --> 00:03:42,260
And as a side note, if you're iffy on any of the syntax we're about to set up.

53
00:03:43,270 --> 00:03:47,260
There's a nice breakdown of the code in the Readme.

54
00:03:47,290 --> 00:03:52,540
And if you're still confused, just keep in mind that this is the only time we'll use the class syntax.

55
00:03:52,540 --> 00:03:53,870
So just bear with me.

56
00:03:53,890 --> 00:03:55,410
We need to come up with a name.

57
00:03:55,420 --> 00:03:58,600
In my case, I'm going to go with not found error.

58
00:03:58,840 --> 00:04:05,440
We need to go with extends and we're extending the error class again built into the JavaScript.

59
00:04:05,620 --> 00:04:10,580
Then we want to go with constructor and essentially we want to pass in the message.

60
00:04:10,600 --> 00:04:17,300
Remember, we were able to log the message right when we set up the code to throw the message in, get

61
00:04:17,300 --> 00:04:18,100
a single job.

62
00:04:18,100 --> 00:04:22,380
So this is what we're passing here and then we'll set up the curlies.

63
00:04:22,390 --> 00:04:24,520
We're going to go with super over here.

64
00:04:24,670 --> 00:04:28,030
We'll still pass the message and then we'll go with this dot.

65
00:04:28,030 --> 00:04:31,150
And technically the name one is optional.

66
00:04:31,300 --> 00:04:36,700
You don't have to set this up, but I do want to showcase that it's always an option, for example.

67
00:04:37,440 --> 00:04:39,000
I'm going to go with the same name.

68
00:04:39,000 --> 00:04:42,240
But again, please keep in mind we're not going to use this in this project.

69
00:04:42,240 --> 00:04:45,810
This is just to showcase that, yes, you can set more properties.

70
00:04:45,840 --> 00:04:51,210
Now, the one that we will use is this and we need to come up with the name for the property.

71
00:04:51,210 --> 00:04:53,910
And in my case, that is going to be the status code.

72
00:04:54,840 --> 00:04:55,800
Status code.

73
00:04:55,800 --> 00:05:01,560
And in here we're looking for status codes and the 404 is not found.

74
00:05:01,560 --> 00:05:05,100
So essentially, this just gets me 404.

75
00:05:05,100 --> 00:05:13,410
And since we're exporting this one over here now, let's navigate to our job controller.

76
00:05:13,620 --> 00:05:20,430
And essentially we want to import then we're looking for not found error notice.

77
00:05:20,430 --> 00:05:24,990
We nicely get the suggestion, then let's keep on moving.

78
00:05:24,990 --> 00:05:31,410
And again, let's try it over here where we have a job now, we still don't have any functionality in

79
00:05:31,410 --> 00:05:32,730
our own middleware.

80
00:05:32,760 --> 00:05:33,990
Don't worry about it.

81
00:05:34,200 --> 00:05:37,140
I just want to go here with the following logic.

82
00:05:37,140 --> 00:05:43,980
I want to remove everything that we have right now and basically we're going to go with throw new and

83
00:05:43,980 --> 00:05:46,020
now we're looking for not found error.

84
00:05:46,020 --> 00:05:50,730
So eventually the status code is going to be 404.

85
00:05:50,820 --> 00:05:56,350
And essentially in here we just want to pass in that message and since the message is going to be exactly

86
00:05:56,350 --> 00:05:58,450
the same, I'm just going to copy it.

87
00:05:58,450 --> 00:05:59,890
So this is going to be faster.

88
00:05:59,890 --> 00:06:05,440
So notice we don't need to provide the status code and we right away know what's happening.

89
00:06:05,440 --> 00:06:08,170
So this is going to be a not found error.

90
00:06:08,170 --> 00:06:10,750
So now let's navigate again to get single job.

91
00:06:10,750 --> 00:06:12,010
Let's send it over here.

92
00:06:12,010 --> 00:06:15,100
We have 500, but now check it out.

93
00:06:15,130 --> 00:06:19,030
We have not found error and we have the message.

94
00:06:19,030 --> 00:06:20,860
So where is this coming from?

95
00:06:20,860 --> 00:06:24,160
Well, this is coming from our own middleware.

96
00:06:24,160 --> 00:06:26,290
So again, let's go back to server.

97
00:06:26,530 --> 00:06:30,040
Let's scroll down and essentially we have this log.

98
00:06:30,040 --> 00:06:32,200
So this is where it's coming from.

99
00:06:32,200 --> 00:06:38,140
So the last step right now is to set up a separate file for this middleware.

100
00:06:38,140 --> 00:06:42,640
And yes, of course you can set it up over here in a server, but again, it's going to be more lines

101
00:06:42,640 --> 00:06:48,490
of code and it just makes sense to set it up separately.

102
00:06:48,640 --> 00:06:56,520
And then we'll check if there is a status code property on our custom error.

103
00:06:56,520 --> 00:06:59,130
We'll use that one instead of this 500.

104
00:06:59,250 --> 00:07:01,230
And the same goes for message.

105
00:07:01,230 --> 00:07:06,450
So for starters, let's create a folder and I'm going to call this middleware.

106
00:07:07,230 --> 00:07:09,090
Since you can probably imagine.

107
00:07:09,090 --> 00:07:10,320
We'll have a few of them.

108
00:07:10,470 --> 00:07:11,730
We'll go with middleware here.

109
00:07:12,520 --> 00:07:16,360
Then let's create a new file and I'm going to call this error.

110
00:07:17,670 --> 00:07:18,450
And lower.

111
00:07:19,140 --> 00:07:20,640
And then middleware.

112
00:07:21,490 --> 00:07:28,600
JS And let's just for now grab everything that we have in a server.

113
00:07:29,410 --> 00:07:37,570
So essentially I'm looking for this function over here, so we'll still invoke it in the server, but

114
00:07:37,570 --> 00:07:38,380
of course.

115
00:07:39,170 --> 00:07:41,510
We'll just export from Errorhandler.

116
00:07:41,600 --> 00:07:44,900
For starters, let's grab the status code.

117
00:07:45,820 --> 00:07:47,170
Or status codes.

118
00:07:47,410 --> 00:07:48,640
Let's be more precise.

119
00:07:48,640 --> 00:07:50,350
Then I want to come up with my function.

120
00:07:50,350 --> 00:07:52,330
And in my case, I'm going to call this error.

121
00:07:53,290 --> 00:07:55,390
And lower and then middleware.

122
00:07:56,540 --> 00:08:00,170
And for now, let me set it equal to my controller.

123
00:08:00,320 --> 00:08:07,940
And as a side note, in order to check for these type of spelling errors, I use this extension, the

124
00:08:07,940 --> 00:08:13,190
code spell checker, and I cannot stop raving about this awesome extension.

125
00:08:13,190 --> 00:08:18,020
So essentially, if it's going to see that the name does not make any sense, it's going to give you

126
00:08:18,020 --> 00:08:19,690
this blue squiggly line.

127
00:08:19,700 --> 00:08:26,660
Now, I still manage to get the spelling errors even with this extension, but it has reduced tremendously

128
00:08:26,660 --> 00:08:30,350
the amount of spelling errors I have.

129
00:08:30,380 --> 00:08:32,090
So in here, let's go with export.

130
00:08:32,120 --> 00:08:32,870
We want to.

131
00:08:33,650 --> 00:08:35,000
Set it up as default.

132
00:08:35,000 --> 00:08:38,809
And then we're looking for error handler middleware.

133
00:08:38,840 --> 00:08:41,870
Then let's right away actually import it.

134
00:08:41,870 --> 00:08:44,120
So let's go back to the server.

135
00:08:44,390 --> 00:08:45,470
Let's scroll up.

136
00:08:45,470 --> 00:08:47,840
So we have over here our routers.

137
00:08:48,200 --> 00:08:49,790
Let's leave that.

138
00:08:49,940 --> 00:08:54,500
And right after the routers, let's set up the middleware.

139
00:08:56,620 --> 00:09:00,110
And we're looking for import then error handler middleware.

140
00:09:00,130 --> 00:09:01,970
Make sure you have that JS.

141
00:09:02,930 --> 00:09:05,360
And of course, we want to invoke it over here.

142
00:09:05,360 --> 00:09:08,780
So we're going to go here with Errorhandler middleware.

143
00:09:08,780 --> 00:09:12,440
And then as far as the logic inside of this middleware.

144
00:09:13,260 --> 00:09:15,880
Like I said, we want to check for the status code.

145
00:09:15,900 --> 00:09:21,420
If the error has one, if it's present, then we want to use that one.

146
00:09:21,720 --> 00:09:25,370
And if not, then we'll just use the generic one.

147
00:09:25,380 --> 00:09:26,940
So let's try this one out.

148
00:09:27,150 --> 00:09:31,260
Effectively we'll set up two properties, one for status code and one for message.

149
00:09:31,260 --> 00:09:37,260
And if the value is missing, essentially if there is no status code or a message, then we'll just

150
00:09:37,260 --> 00:09:39,000
go with something generic.

151
00:09:39,030 --> 00:09:40,800
Let's start with the status code.

152
00:09:40,800 --> 00:09:45,000
So I'm going to go here with const status code.

153
00:09:45,000 --> 00:09:53,850
And remember when we were setting up the custom error, the property name is status code and judging

154
00:09:53,850 --> 00:10:01,530
by the course Q&A, this is somewhat confusing since quite often I see students having a bug where they

155
00:10:01,530 --> 00:10:03,270
go with status codes.

156
00:10:03,270 --> 00:10:05,910
So status codes is the main library.

157
00:10:05,940 --> 00:10:10,740
As far as our property, it's actually a status code, so go here with error.

158
00:10:10,740 --> 00:10:18,370
So that's the error that we're accessing and we want to go with status code again, not status codes

159
00:10:18,370 --> 00:10:19,390
but code.

160
00:10:19,390 --> 00:10:24,070
And if it's not there, then we want to go with the library, the status code.

161
00:10:24,070 --> 00:10:28,690
And like I said, we're just going to go with something generic, basically 500.

162
00:10:28,690 --> 00:10:31,480
And for that we're looking for internal server.

163
00:10:31,480 --> 00:10:33,040
So that's the status code.

164
00:10:33,100 --> 00:10:36,040
And of course now we just want to change it in here.

165
00:10:36,040 --> 00:10:39,070
We're going to go with status code property.

166
00:10:39,490 --> 00:10:40,420
Okay, awesome.

167
00:10:40,420 --> 00:10:45,400
And then when it comes to Json, when it comes to this message, let's do the same thing.

168
00:10:45,400 --> 00:10:47,290
Let's create the variable.

169
00:10:47,290 --> 00:10:49,180
So I'm going to go here with message.

170
00:10:49,700 --> 00:10:56,090
And by default, when it comes to JavaScript error class, whatever will pass here as an error.

171
00:10:56,820 --> 00:11:01,900
Essentially is going to be available in the message property.

172
00:11:01,920 --> 00:11:07,170
So since I'm passing here, this node job with ID, blah, blah, blah, blah, blah, blah.

173
00:11:07,290 --> 00:11:14,130
Well, it's going to be available here in the error message now if it's not present.

174
00:11:14,810 --> 00:11:17,210
Of course, again, we'll go with something generic.

175
00:11:17,210 --> 00:11:18,470
So let's try over here.

176
00:11:18,480 --> 00:11:19,760
We'll say error.

177
00:11:19,850 --> 00:11:22,010
Then again, this is happening by default.

178
00:11:22,040 --> 00:11:29,090
We just grab this message and if it's not present, then I said, Let's go with something generic.

179
00:11:29,720 --> 00:11:31,340
Something went wrong.

180
00:11:31,880 --> 00:11:34,690
Try again later.

181
00:11:34,700 --> 00:11:35,540
Like so.

182
00:11:35,900 --> 00:11:40,190
Now we just want to remove this logic over here.

183
00:11:40,190 --> 00:11:45,740
So now let's navigate to get single job again.

184
00:11:45,740 --> 00:11:46,610
Let's send it.

185
00:11:46,610 --> 00:11:53,090
And what we should see is the 404 with the message that we're passing in our controller.

186
00:11:53,090 --> 00:11:55,130
So let's send it and check it out.

187
00:11:55,130 --> 00:11:56,780
Now, everything is correct.

188
00:11:56,780 --> 00:12:04,490
So the last thing we want to do, go back to the error controller and then one by one, remove this

189
00:12:04,490 --> 00:12:08,270
hardcoded option and set it equal to not found error.

190
00:12:08,270 --> 00:12:15,320
And again, this is one of those things which you can and you should reuse it in your other projects.

191
00:12:15,320 --> 00:12:21,590
So yes, it was a little bit painful to set it up, but once you have everything in place.

192
00:12:22,240 --> 00:12:25,360
You can use it in all your projects.

193
00:12:25,390 --> 00:12:30,360
Now, of course, it's not going to be looking for job, so we're still checking for correct property,

194
00:12:30,370 --> 00:12:34,600
but we don't want to hardcode anymore those responses.

195
00:12:34,960 --> 00:12:39,250
And with this in place now, we can move on to the next topic.