Preview
Video Player
00:00
00:00
Error Handling
3:48Our application is functional, but our work is not done! Let's write some code to handle a few cases of invalid input from our users.
Our form submits a number
to the Express app
0:00
which processes the request with
middleware and returns a result.
0:03
But what happens if we give
our app a word like four?
0:07
The parseFloat method converts text
into the value NaN or not a number.
0:13
Submitting an empty form field
also results in not a number.
0:19
Seeing NaN on the resulting page
would probably confuse our users.
0:23
Instead of showing the user NaN,
0:28
let's throw an error when
the user submits invalid data.
0:30
In our middleware,
parseFloat produces the NaN value.
0:33
So let's validate the input
right after this line.
0:38
We can check if the value is NaN
by using the function isNaN.
0:41
If the value we pass in is not a number,
the function returns true.
0:47
We'll add an if statement and
0:52
use isNaN and pass in num.
0:57
Inside, we'll create an error object.
1:00
And add a description string,
Submitted value is not a number.
1:09
Then we can pass the error to next.
1:19
One little quirk of next
we should talk about.
1:24
It doesn't actually close
out the middleware function.
1:27
After it's called,
the middleware continues to run.
1:31
And when next is called again down here,
Express throws an error.
1:34
That kind of bug can be hard to trace.
1:40
So let's avoid that by adding
return before next up here.
1:42
That will make sure
the function ends right here.
1:50
Let's save this and
check it out in the browser.
1:53
If we refresh, whoa!
1:57
We're getting an error before
the form even renders.
2:01
Can you spot the problem?
2:04
I'll give you a hint.
2:06
It has to do with this value right here.
2:07
Pause the video and think about it for
a moment if you want to.
2:10
Because we're not submitting a form
with our GET request, this value,
2:14
the number property, is undefined.
2:18
And just as a little experiment,
let's open up Chrome DevTools and
2:21
call parseFloat on undefined.
2:25
We get not a number.
2:31
That means our error will get thrown.
2:33
So at the top of this function,
2:36
let's say,
if request.body.number is undefined.
2:41
Don't continue on.
2:51
Move on to the next middleware function.
2:52
That way,
GET requests will render the form.
2:58
But when our form defines the number
property in POST requests, the request
3:01
of the rest of this function will spring
into action the way we want it to.
3:07
Testing in the browser,
we see that our form renders now.
3:12
And if we enter a numeric value,
we get the right answer.
3:17
And if we enter an invalid value like
an empty string, our error is triggered.
3:22
This error is still not
very user-friendly, but
3:28
it's give us a little practice with
throwing an error with middleware.
3:30
You could take this further if you wanted
and send the user something less scary.
3:34
But I'll let you work
that out on your own.
3:39
Next, let's have a look at packaging
up our middleware into a module and
3:41
making it configurable.
3:46