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
Build a custom error middleware function into the app.
Documentation
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
You just learned how to tell Express
when an error has occurred in your app.
0:00
Now let's tell Express
how to handle that error.
0:04
This is done with a special
type of middleware.
0:07
While Express middleware has three
parameters, error middleware has four.
0:11
It's the same signature
as normal middleware but
0:16
an extra parameter at the beginning.
0:19
That's where Express will pass
the error object to itself.
0:22
When an object is passed
into the next call,
0:27
Express jumps to the first middleware
it can find, with four parameters.
0:30
So far,
we don't have any of those in our app.
0:36
So Express invokes its own native
handler inside its code base.
0:39
We can overwrite that behavior by
putting it in our own error handler,
0:43
which will serve a custom
template back to the client.
0:47
The template is where we can format the
error to be more readable than the text
0:50
that we currently see.
0:54
In App JS let's add an error handler
after the last middleware function.
0:57
We'll pass it into the app.use method.
1:04
Remember that it takes four parameters,
error,
1:11
request, response, and next.
1:16
Inside the handler we'll render a template
back to the client called error.
1:20
The template doesn't exist yet
so we'll write that soon.
1:26
The error object has properties
that hold the data about the error.
1:30
So we can pass that in as the second
argument to the render function.
1:35
This will give the template
access to the error data.
1:39
Just to refresh your memory,
1:43
let's use the alternative way to set
locals that you learnt about earlier.
1:45
Let's set the error
property on res.locals.
1:50
To equal the error object.
2:01
Now, I'll create the template
now in the views folder.
2:04
I'll call it error.pug.
2:08
I'll extend the layout And
then create a content block.
2:14
I want the human-readable
string to be large on the page.
2:24
So I'll create an h1 and set it to
the error messages message property.
2:28
Then underneath that I will
put the HTTP status in an h2.
2:40
Finally, that large block of
text that we saw earlier could.
2:47
Be useful, so
I'll include that in the text below.
2:51
The big text box is
called a stack trace and
2:55
the error object has it
in the stack property.
2:58
Let's look at the browser now and
that looks a lot better.
3:06
Notice we don't have
a status code on our object.
3:10
That's because that HTTP codes aren't
a native part of JavaScript's error objects.
3:14
In facts, let's look at
the Chrome developer tools, and
3:19
if we go into network,
and refresh the page.
3:24
We don't get any error codes.
3:28
We did a get a 200, or
a 304, not modified.
3:31
This means that the request is fine,
but that's not true.
3:36
There was an error that's stop the server.
3:40
Let's go back and fix that.
3:43
In our error handler,
we can set the status of the response
3:46
using the status method
on the response object.
3:50
The status method takes
the number of the code.
3:54
Normally if there's an error in the code
on the server it will throw a status 500,
3:57
this is a general error,
that just means that the server couldn't
4:02
fulfil the request because
something was unexpected.
4:06
This might be a bug in our server code.
4:10
For example, let's send a 500 status for
own download error.
4:12
To give the template access to this code,
we can set 500 to
4:18
be the status property of the error
right after we create it.
4:23
There is nothing special about
this status property name here.
4:34
The error object is just like
any of the JavaScript object and
4:38
properties can be set on it.
4:41
Now down in the error handler let's
read the status property we just set.
4:44
We can pass that into this status method.
4:51
Now the template will be able
to print this status code and
4:54
the browser will be able
to receive the error code.
4:57
Let's check it out.
5:00
There's the code, and in dev tools,
we can see that we get in
5:04
the right HTTP status, 500,
the error handler is complete.
5:09
Let's go back and clear out the middleware
that we're using to test it.
5:15
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