Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Practice Error Handling in Express!
You have completed Practice Error Handling in Express!
Preview
This video introduces the error handling challenge that you'll be working on completing.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[MUSIC]
0:00
Hey everyone, Guil here, in this
practice session you'll get to sharpen
0:09
your error handling skills in Express.
0:13
When a user makes a request to a server,
the server needs to handle requests for
0:15
resources that don't exist as well
as other potential server errors.
0:19
Handling errors well can help users
understand what's going on with your app
0:23
when something goes wrong.
0:27
There are several ways to handle errors
on a server which can make the process
0:28
somewhat confusing.
0:32
So getting extra practice
with identifying and
0:33
dealing with server errors will benefit
you in your learning journey and
0:35
the development of your server
side JavaScript skills.
0:39
In this practice session, I'll provide
you a small Express application.
0:41
To get started, download
the project files, unzip them, and
0:46
open them up in your preferred text
editor, then in your terminal or console,
0:49
run npm install to install
the project dependencies.
0:54
Then run npm start to launch the app.
1:00
You can view the app in the browser
on local host port 3000.
1:03
The apps main quotes route or
view shows several quotes.
1:07
Clicking on one of the quotes navigates
the user to a route displaying
1:12
the individual quote.
1:16
But what happens if a user tries to
navigate to a quote that doesn't exist,
1:17
for example, 'quotes/123'?
1:21
Or what if they navigate to some other
1:25
route that doesn't exist
like '/abc'?
1:28
The page is stuck waiting and waiting
with no further information for the user.
1:32
And what if the server encounters some
other error like trying to retrieve
1:37
a file that doesn't exist or
maybe it can't reach a database.
1:41
This is where you,
the full stack developer,
1:44
comes in to save the user
from any further frustration.
1:46
For this practice session,
1:50
you'll have several tasks to perform in
the files app.js and routes quotes.js.
1:52
I've included comments providing
the tasks you'll need to complete, so
1:57
let's have a look at them.
2:00
First, it's important to make
sure that Express catches all
2:02
errors that occur while running
route handlers and middleware.
2:06
So in app.js, on line 32,
you'll find a mostly empty 404 handler.
2:09
This is the handler or middleware that
catches requests that aren't caught by
2:16
any other route handlers or middleware.
2:20
In Express, requests for
2:22
undefined or non existent routes do not
result in an error as I just demonstrated.
2:23
So it would help if you
had a way to catch and
2:28
handle this situation when
your app encounters it.
2:30
Here in the 404 handler,
2:33
I've included a helpful log statement
to indicate when this middleware fires.
2:35
Your task here is to send
a response back to the client.
2:40
Set the response status to 404 and
use the render method to
2:44
render the not found pug template that's
supplied for you in the views folder.
2:49
For instance,
when a user navigates to an undefined or
2:54
non existent route like '/1234',
2:57
the 404 handler will handle the request
and render a helpful error message.
3:00
Right below you'll find a global
error handler initially on line 42.
3:07
This is the middleware that will deal
with any errors that your route handlers
3:12
encounter.
3:17
I've also included a helpful log statement
to indicate when this middleware fires.
3:18
But this time I placed the console.log
method inside of an if statement
3:22
that first checks if an error exists
before logging to the console.
3:26
And I'm logging a short message indicating
that this global error handler gets called
3:31
as well as displaying a stack
trace via the value of err for
3:36
convenience inspection.
3:40
Keep in mind that the main 404 handler
3:42
does not catch errors that occur in
any of your defined route handlers.
3:44
So next you'll need to create an if else,
statement for
3:49
dealing with 404 like errors or any errors
caught by route handlers you defined.
3:52
If the error status is 404, then set the
response status to 404 and use the render
3:58
method to render the not found template
just as you did with the main 404 handler.
4:05
But this time, make sure to pass
the error object to the template.
4:10
Else for any other errors caught
by the global error handler,
4:15
set the error message to the given
message, err.message for
4:19
example, or
specify a general default error message.
4:23
That way if you define an error message
in an individual route handler,
4:27
this global error handler
will honor that message.
4:31
Otherwise it will assign the general
message you define here.
4:33
Next, you'll set the response status
to the given error status, or 500, so
4:37
that if no err.status is set,
500 will be set by default.
4:42
And lastly, you'll render the error
template that's supplied for
4:47
you in the views folder,
being sure to pass it the error object.
4:50
That way when users navigate
to the quotes/error route,
4:56
which is handled on line 15 of quotes.js,
and a status
5:00
500 server errors thrown by default,
the app will display the error template.
5:05
Finally, here in quotes.js you'll
find a get route handler on line 27.
5:10
Again I've added a helpful log statement
to indicate when this route handler
5:16
gets called.
5:20
In here, you'll need to write code to
check if the requested quote exists.
5:22
If it does, you'll run the res.render
method already present in this handler.
5:27
Else, you'll create a new error, set its
status to 404, then provide a friendly
5:33
error message and forward it to the global
error handler with the next() method.
5:38
That way when users navigate to a quote
route, they'll see the relative quote or
5:42
if they navigate to a quote
route that doesn't exist,
5:46
the app will display
the not found template.
5:48
The goal is to render the not found
view if the user visits a non existent
5:52
route like '/abc, as well as
a not found view displaying the error and
5:58
stack trace if the user visits
a non existing quote route,
6:04
like 'quotes/123',
or if any other error occurs,
6:08
the error template renders.
6:13
Go ahead and give it a try and
don't worry if you get stuck.
6:17
I've posted resources in the teachers
notes to review in case you do.
6:21
In the next video, I'll walk you
through one possible solution.
6:24
Good luck.
6:28
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up