"Swift Functions and Optionals" was retired on May 31, 2020. You are now viewing the recommended replacement.
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 Express Basics!
You have completed Express Basics!
Preview
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