1
00:00:02,200 --> 00:00:03,033
Now,

2
00:00:03,033 --> 00:00:04,110
in the last lecture,

3
00:00:04,110 --> 00:00:06,960
I introduced this 4 0 4 page

4
00:00:06,960 --> 00:00:09,410
if a restaurant wasn't found.

5
00:00:09,410 --> 00:00:10,430
And in general,

6
00:00:10,430 --> 00:00:12,520
we added a lot of key features

7
00:00:12,520 --> 00:00:15,270
which you'll need for many websites.

8
00:00:15,270 --> 00:00:18,390
But we also have another of case where

9
00:00:18,390 --> 00:00:21,550
some resource might not be found.

10
00:00:21,550 --> 00:00:25,190
What if I manually entered this URL here

11
00:00:25,190 --> 00:00:26,960
and I have a typo,

12
00:00:26,960 --> 00:00:30,270
and instead of restaurants with an S at the end,

13
00:00:30,270 --> 00:00:31,830
which would be correct.

14
00:00:31,830 --> 00:00:32,880
I entered restaurant.

15
00:00:34,490 --> 00:00:35,604
If I now it enter,

16
00:00:35,604 --> 00:00:39,290
I get this ugly error page here,

17
00:00:39,290 --> 00:00:41,100
which is not what we want.

18
00:00:41,100 --> 00:00:43,540
We want to keep the user on our website

19
00:00:43,540 --> 00:00:45,693
and show a custom error page.

20
00:00:46,740 --> 00:00:50,740
Now that actually would be another 4 0 4 scenario

21
00:00:50,740 --> 00:00:54,670
because we have a page not found case here.

22
00:00:54,670 --> 00:00:57,480
It's just not that a restaurant wasn't found,

23
00:00:57,480 --> 00:00:59,250
but an entire page.

24
00:00:59,250 --> 00:01:01,799
We simply have no route for this

25
00:01:01,799 --> 00:01:03,600
URL

26
00:01:03,600 --> 00:01:05,330
and therefore I also want to show this

27
00:01:05,330 --> 00:01:09,573
4 0 4 page not found fallback page here.

28
00:01:10,960 --> 00:01:11,793
Now,

29
00:01:11,793 --> 00:01:13,560
how could we make that work?

30
00:01:13,560 --> 00:01:14,393
Of course,

31
00:01:14,393 --> 00:01:17,500
we could add a new route anywhere.

32
00:01:17,500 --> 00:01:19,180
Let's say at the bottom,

33
00:01:19,180 --> 00:01:20,610
where we look for

34
00:01:20,610 --> 00:01:23,820
get requests to slash restaurant,

35
00:01:23,820 --> 00:01:26,653
and then I could handle this exact case.

36
00:01:27,790 --> 00:01:29,270
But what if the user entered

37
00:01:29,270 --> 00:01:32,730
restauran without the T and the S?

38
00:01:32,730 --> 00:01:34,410
You see where does this leading?

39
00:01:34,410 --> 00:01:37,120
We can't handle all the possible

40
00:01:37,120 --> 00:01:40,083
invalid URLs the user might've entered.

41
00:01:41,060 --> 00:01:41,893
Instead,

42
00:01:41,893 --> 00:01:43,660
what we would want down there is a

43
00:01:43,660 --> 00:01:44,680
general

44
00:01:44,680 --> 00:01:45,513
catch

45
00:01:45,513 --> 00:01:46,346
all

46
00:01:46,346 --> 00:01:47,179
route.

47
00:01:47,179 --> 00:01:50,570
That catches all requests that haven't been handled

48
00:01:50,570 --> 00:01:52,823
by other routes up to this point.

49
00:01:53,810 --> 00:01:56,864
And whilst there are different ways of making this work,

50
00:01:56,864 --> 00:02:00,050
the most common form of handling this

51
00:02:00,050 --> 00:02:02,460
is to add our own custom

52
00:02:02,460 --> 00:02:04,233
middleware.

53
00:02:04,233 --> 00:02:05,066
Now,

54
00:02:05,066 --> 00:02:06,620
for that recall

55
00:02:06,620 --> 00:02:08,039
that middleware

56
00:02:08,039 --> 00:02:08,889
was

57
00:02:08,889 --> 00:02:11,560
something like we have it up here.

58
00:02:11,560 --> 00:02:14,250
When we use the use method on app,

59
00:02:14,250 --> 00:02:16,190
and we then have some

60
00:02:16,190 --> 00:02:17,030
helper

61
00:02:17,030 --> 00:02:21,920
functionality that executes on every incoming request.

62
00:02:21,920 --> 00:02:23,170
And that's important.

63
00:02:23,170 --> 00:02:26,410
That's what I explained early in the course.

64
00:02:26,410 --> 00:02:27,243
Middleware

65
00:02:27,243 --> 00:02:28,076
is

66
00:02:28,076 --> 00:02:28,909
some

67
00:02:28,909 --> 00:02:31,330
functionality that executes

68
00:02:31,330 --> 00:02:32,280
on

69
00:02:32,280 --> 00:02:34,400
multiple incoming requests,

70
00:02:34,400 --> 00:02:38,540
or maybe even every incoming request.

71
00:02:38,540 --> 00:02:41,580
And very often it's not the last step

72
00:02:41,580 --> 00:02:43,410
in handling that request,

73
00:02:43,410 --> 00:02:45,403
but only one step of many.

74
00:02:46,298 --> 00:02:48,810
Now we want to add our own middleware

75
00:02:48,810 --> 00:02:51,430
that handles all the requests that haven't

76
00:02:51,430 --> 00:02:53,280
been handled up to this point,

77
00:02:53,280 --> 00:02:56,090
and sends back this 4 0 4 page

78
00:02:56,090 --> 00:02:57,383
for all of them.

79
00:02:58,250 --> 00:03:00,240
And the important thing now will be

80
00:03:00,240 --> 00:03:03,230
that we don't add our own middleware here

81
00:03:03,230 --> 00:03:05,370
next to the other middleware.

82
00:03:05,370 --> 00:03:08,560
But instead at the bottom of this app JS file

83
00:03:08,560 --> 00:03:10,760
right before we listen.

84
00:03:10,760 --> 00:03:12,290
Now, why at the bottom?

85
00:03:12,290 --> 00:03:14,870
Because all incoming requests are basically

86
00:03:14,870 --> 00:03:16,310
funneled through

87
00:03:16,310 --> 00:03:18,740
all these middleware functions

88
00:03:18,740 --> 00:03:20,760
and all these routes.

89
00:03:20,760 --> 00:03:23,840
So if a new request reaches our server,

90
00:03:23,840 --> 00:03:27,070
then it is first funneled through these middlewares

91
00:03:27,070 --> 00:03:29,850
and then it checks the different routes

92
00:03:29,850 --> 00:03:32,423
to find the one route that should handle it.

93
00:03:33,490 --> 00:03:34,323
And of course,

94
00:03:34,323 --> 00:03:38,060
we only want to send back our standard 4 0 4 page,

95
00:03:38,060 --> 00:03:41,800
if no route handled the that request,

96
00:03:41,800 --> 00:03:44,800
otherwise we would send back a 4 0 4 page for

97
00:03:44,800 --> 00:03:46,470
every incoming request

98
00:03:46,470 --> 00:03:47,973
and we don't want to do that.

99
00:03:48,910 --> 00:03:51,560
Therefore this 4 0 4 handling

100
00:03:51,560 --> 00:03:54,543
Rick middleware should come at the very end here.

101
00:03:55,540 --> 00:03:58,230
And that now just poses one question,

102
00:03:58,230 --> 00:04:00,983
how do we add our own middleware?

103
00:04:02,086 --> 00:04:03,410
For this we again,

104
00:04:03,410 --> 00:04:04,920
use app use

105
00:04:04,920 --> 00:04:07,770
because this allows us to register a function

106
00:04:07,770 --> 00:04:08,603
that executes for

107
00:04:08,603 --> 00:04:11,590
every incoming request.

108
00:04:11,590 --> 00:04:14,640
And we can now pass our handling function

109
00:04:14,640 --> 00:04:16,702
directly to app use.

110
00:04:18,010 --> 00:04:21,500
App use also would allow us to still add

111
00:04:21,500 --> 00:04:22,630
a URL,

112
00:04:22,630 --> 00:04:24,810
which acts as a filter.

113
00:04:24,810 --> 00:04:25,660
So that we say

114
00:04:25,660 --> 00:04:28,891
only handle the requests that started with

115
00:04:28,891 --> 00:04:30,341
slash

116
00:04:30,341 --> 00:04:31,510
admin,

117
00:04:31,510 --> 00:04:32,800
for example,

118
00:04:32,800 --> 00:04:35,320
and other requests would be ignored,

119
00:04:35,320 --> 00:04:38,050
but I don't want to have any filter here.

120
00:04:38,050 --> 00:04:39,540
And therefore we just passed this

121
00:04:39,540 --> 00:04:41,373
handling function like this.

122
00:04:42,810 --> 00:04:43,643
Now,

123
00:04:43,643 --> 00:04:46,100
this function is the same kind of handler function

124
00:04:46,100 --> 00:04:48,300
as we add in all the routes.

125
00:04:48,300 --> 00:04:49,750
It receives a request

126
00:04:49,750 --> 00:04:50,940
and a response

127
00:04:52,060 --> 00:04:53,684
and also a third object,

128
00:04:53,684 --> 00:04:56,453
but I'll come back to that later in the course,

129
00:04:57,350 --> 00:05:00,910
and now therefore we can still render a response here

130
00:05:00,910 --> 00:05:02,180
with the res render

131
00:05:02,180 --> 00:05:04,383
and renders 4 0 4 page.

132
00:05:05,950 --> 00:05:07,900
And if we write it like this,

133
00:05:07,900 --> 00:05:11,527
then this will kick in whenever we have a request,

134
00:05:11,527 --> 00:05:15,013
that's not handled by any of the other routes.

135
00:05:17,410 --> 00:05:20,030
And hence, if we now save this,

136
00:05:20,030 --> 00:05:22,580
if I reload this invalid URL,

137
00:05:22,580 --> 00:05:25,290
I now get my page not found page.

138
00:05:25,290 --> 00:05:27,670
If I go to a valid page though,

139
00:05:27,670 --> 00:05:29,740
I see that page instead.

140
00:05:29,740 --> 00:05:33,573
So it really only kicks in if we entered something invalid.

141
00:05:34,650 --> 00:05:36,580
And that is also a feature

142
00:05:36,580 --> 00:05:39,970
we typically want to add to all our websites,

143
00:05:39,970 --> 00:05:43,790
because we want to show some standard error page.

144
00:05:43,790 --> 00:05:44,623
If a

145
00:05:44,623 --> 00:05:45,990
invalid URL

146
00:05:45,990 --> 00:05:47,093
was entered.