1
00:00:00,000 --> 00:00:09,221
[MUSIC]

2
00:00:09,221 --> 00:00:13,045
Hey everyone, Guil here, in this
practice session you'll get to sharpen

3
00:00:13,045 --> 00:00:15,710
your error handling skills in Express.

4
00:00:15,710 --> 00:00:19,470
When a user makes a request to a server,
the server needs to handle requests for

5
00:00:19,470 --> 00:00:23,350
resources that don't exist as well
as other potential server errors.

6
00:00:23,350 --> 00:00:27,100
Handling errors well can help users
understand what's going on with your app

7
00:00:27,100 --> 00:00:28,620
when something goes wrong.

8
00:00:28,620 --> 00:00:32,240
There are several ways to handle errors
on a server which can make the process

9
00:00:32,240 --> 00:00:33,730
somewhat confusing.

10
00:00:33,730 --> 00:00:35,890
So getting extra practice
with identifying and

11
00:00:35,890 --> 00:00:39,100
dealing with server errors will benefit
you in your learning journey and

12
00:00:39,100 --> 00:00:41,900
the development of your server
side JavaScript skills.

13
00:00:41,900 --> 00:00:46,120
In this practice session, I'll provide
you a small Express application.

14
00:00:46,120 --> 00:00:49,804
To get started, download
the project files, unzip them, and

15
00:00:49,804 --> 00:00:54,392
open them up in your preferred text
editor, then in your terminal or console,

16
00:00:54,392 --> 00:00:57,606
run npm install to install
the project dependencies.

17
00:01:00,070 --> 00:01:03,428
Then run npm start to launch the app.

18
00:01:03,428 --> 00:01:07,657
You can view the app in the browser
on local host port 3000.

19
00:01:07,657 --> 00:01:12,710
The apps main quotes route or
view shows several quotes.

20
00:01:12,710 --> 00:01:16,180
Clicking on one of the quotes navigates
the user to a route displaying

21
00:01:16,180 --> 00:01:17,650
the individual quote.

22
00:01:17,650 --> 00:01:21,680
But what happens if a user tries to
navigate to a quote that doesn't exist,

23
00:01:21,680 --> 00:01:25,270
for example, 'quotes/123'?

24
00:01:25,270 --> 00:01:28,232
Or what if they navigate to some other

25
00:01:28,232 --> 00:01:32,351
route that doesn't exist
like '/abc'?

26
00:01:32,351 --> 00:01:37,551
The page is stuck waiting and waiting
with no further information for the user.

27
00:01:37,551 --> 00:01:41,167
And what if the server encounters some
other error like trying to retrieve

28
00:01:41,167 --> 00:01:44,600
a file that doesn't exist or
maybe it can't reach a database.

29
00:01:44,600 --> 00:01:46,730
This is where you,
the full stack developer,

30
00:01:46,730 --> 00:01:50,290
comes in to save the user
from any further frustration.

31
00:01:50,290 --> 00:01:52,177
For this practice session,

32
00:01:52,177 --> 00:01:57,770
you'll have several tasks to perform in
the files app.js and routes quotes.js.

33
00:01:57,770 --> 00:02:00,605
I've included comments providing
the tasks you'll need to complete, so

34
00:02:00,605 --> 00:02:02,630
let's have a look at them.

35
00:02:02,630 --> 00:02:06,040
First, it's important to make
sure that Express catches all

36
00:02:06,040 --> 00:02:09,390
errors that occur while running
route handlers and middleware.

37
00:02:09,390 --> 00:02:16,530
So in app.js, on line 32,
you'll find a mostly empty 404 handler.

38
00:02:16,530 --> 00:02:20,170
This is the handler or middleware that
catches requests that aren't caught by

39
00:02:20,170 --> 00:02:22,425
any other route handlers or middleware.

40
00:02:22,425 --> 00:02:23,910
In Express, requests for

41
00:02:23,910 --> 00:02:28,760
undefined or non existent routes do not
result in an error as I just demonstrated.

42
00:02:28,760 --> 00:02:30,520
So it would help if you
had a way to catch and

43
00:02:30,520 --> 00:02:33,490
handle this situation when
your app encounters it.

44
00:02:33,490 --> 00:02:35,550
Here in the 404 handler,

45
00:02:35,550 --> 00:02:40,030
I've included a helpful log statement
to indicate when this middleware fires.

46
00:02:40,030 --> 00:02:44,910
Your task here is to send
a response back to the client.

47
00:02:44,910 --> 00:02:49,650
Set the response status to 404 and
use the render method to

48
00:02:49,650 --> 00:02:54,890
render the not found pug template that's
supplied for you in the views folder.

49
00:02:54,890 --> 00:02:57,730
For instance,
when a user navigates to an undefined or

50
00:02:57,730 --> 00:03:00,100
non existent route like '/1234',

51
00:03:00,100 --> 00:03:05,770
the 404 handler will handle the request
and render a helpful error message.

52
00:03:07,080 --> 00:03:12,850
Right below you'll find a global
error handler initially on line 42.

53
00:03:12,850 --> 00:03:17,100
This is the middleware that will deal
with any errors that your route handlers

54
00:03:17,100 --> 00:03:18,200
encounter.

55
00:03:18,200 --> 00:03:22,650
I've also included a helpful log statement
to indicate when this middleware fires.

56
00:03:22,650 --> 00:03:26,840
But this time I placed the console.log
method inside of an if statement

57
00:03:26,840 --> 00:03:31,830
that first checks if an error exists
before logging to the console.

58
00:03:31,830 --> 00:03:36,220
And I'm logging a short message indicating
that this global error handler gets called

59
00:03:36,220 --> 00:03:40,140
as well as displaying a stack
trace via the value of err for

60
00:03:40,140 --> 00:03:42,040
convenience inspection.

61
00:03:42,040 --> 00:03:44,610
Keep in mind that the main 404 handler

62
00:03:44,610 --> 00:03:49,190
does not catch errors that occur in
any of your defined route handlers.

63
00:03:49,190 --> 00:03:52,840
So next you'll need to create an if else,
statement for

64
00:03:52,840 --> 00:03:58,198
dealing with 404 like errors or any errors
caught by route handlers you defined.

65
00:03:58,198 --> 00:04:05,280
If the error status is 404, then set the
response status to 404 and use the render

66
00:04:05,280 --> 00:04:10,610
method to render the not found template
just as you did with the main 404 handler.

67
00:04:10,610 --> 00:04:14,490
But this time, make sure to pass
the error object to the template.

68
00:04:15,580 --> 00:04:19,550
Else for any other errors caught
by the global error handler,

69
00:04:19,550 --> 00:04:23,000
set the error message to the given
message, err.message for

70
00:04:23,000 --> 00:04:27,340
example, or
specify a general default error message.

71
00:04:27,340 --> 00:04:31,200
That way if you define an error message
in an individual route handler,

72
00:04:31,200 --> 00:04:33,940
this global error handler
will honor that message.

73
00:04:33,940 --> 00:04:37,200
Otherwise it will assign the general
message you define here.

74
00:04:37,200 --> 00:04:42,100
Next, you'll set the response status
to the given error status, or 500, so

75
00:04:42,100 --> 00:04:47,090
that if no err.status is set,
500 will be set by default.

76
00:04:47,090 --> 00:04:50,770
And lastly, you'll render the error
template that's supplied for

77
00:04:50,770 --> 00:04:54,980
you in the views folder,
being sure to pass it the error object.

78
00:04:56,080 --> 00:05:00,200
That way when users navigate
to the quotes/error route,

79
00:05:00,200 --> 00:05:05,350
which is handled on line 15 of quotes.js,
and a status

80
00:05:05,350 --> 00:05:10,350
500 server errors thrown by default,
the app will display the error template.

81
00:05:10,350 --> 00:05:16,759
Finally, here in quotes.js you'll
find a get route handler on line 27.

82
00:05:16,759 --> 00:05:20,719
Again I've added a helpful log statement
to indicate when this route handler

83
00:05:20,719 --> 00:05:22,020
gets called.

84
00:05:22,020 --> 00:05:27,150
In here, you'll need to write code to
check if the requested quote exists.

85
00:05:27,150 --> 00:05:33,330
If it does, you'll run the res.render
method already present in this handler.

86
00:05:33,330 --> 00:05:38,740
Else, you'll create a new error, set its
status to 404, then provide a friendly

87
00:05:38,740 --> 00:05:42,770
error message and forward it to the global
error handler with the next() method.

88
00:05:42,770 --> 00:05:46,449
That way when users navigate to a quote
route, they'll see the relative quote or

89
00:05:46,449 --> 00:05:48,938
if they navigate to a quote
route that doesn't exist,

90
00:05:48,938 --> 00:05:51,010
the app will display
the not found template.

91
00:05:52,930 --> 00:05:58,240
The goal is to render the not found
view if the user visits a non existent

92
00:05:58,240 --> 00:06:04,360
route like '/abc, as well as
a not found view displaying the error and

93
00:06:04,360 --> 00:06:08,770
stack trace if the user visits
a non existing quote route,

94
00:06:08,770 --> 00:06:13,720
like 'quotes/123',
or if any other error occurs,

95
00:06:13,720 --> 00:06:15,989
the error template renders.

96
00:06:17,775 --> 00:06:21,240
Go ahead and give it a try and
don't worry if you get stuck.

97
00:06:21,240 --> 00:06:24,549
I've posted resources in the teachers
notes to review in case you do.

98
00:06:24,549 --> 00:06:28,130
In the next video, I'll walk you
through one possible solution.

99
00:06:28,130 --> 00:06:28,630
Good luck.