Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
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