Error Handling

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