1 00:00:00,000 --> 00:00:09,221 [MUSIC] 2 00:00:09,221 --> 00:00:13,045 Hey everyone, Guil here, in this practice session you'll get to sharpen 3 00:00:13,045 --> 00:00:15,710 your error handling skills in Express. 4 00:00:15,710 --> 00:00:19,470 When a user makes a request to a server, the server needs to handle requests for 5 00:00:19,470 --> 00:00:23,350 resources that don't exist as well as other potential server errors. 6 00:00:23,350 --> 00:00:27,100 Handling errors well can help users understand what's going on with your app 7 00:00:27,100 --> 00:00:28,620 when something goes wrong. 8 00:00:28,620 --> 00:00:32,240 There are several ways to handle errors on a server which can make the process 9 00:00:32,240 --> 00:00:33,730 somewhat confusing. 10 00:00:33,730 --> 00:00:35,890 So getting extra practice with identifying and 11 00:00:35,890 --> 00:00:39,100 dealing with server errors will benefit you in your learning journey and 12 00:00:39,100 --> 00:00:41,900 the development of your server side JavaScript skills. 13 00:00:41,900 --> 00:00:46,120 In this practice session, I'll provide you a small Express application. 14 00:00:46,120 --> 00:00:49,804 To get started, download the project files, unzip them, and 15 00:00:49,804 --> 00:00:54,392 open them up in your preferred text editor, then in your terminal or console, 16 00:00:54,392 --> 00:00:57,606 run npm install to install the project dependencies. 17 00:01:00,070 --> 00:01:03,428 Then run npm start to launch the app. 18 00:01:03,428 --> 00:01:07,657 You can view the app in the browser on local host port 3000. 19 00:01:07,657 --> 00:01:12,710 The apps main quotes route or view shows several quotes. 20 00:01:12,710 --> 00:01:16,180 Clicking on one of the quotes navigates the user to a route displaying 21 00:01:16,180 --> 00:01:17,650 the individual quote. 22 00:01:17,650 --> 00:01:21,680 But what happens if a user tries to navigate to a quote that doesn't exist, 23 00:01:21,680 --> 00:01:25,270 for example, 'quotes/123'? 24 00:01:25,270 --> 00:01:28,232 Or what if they navigate to some other 25 00:01:28,232 --> 00:01:32,351 route that doesn't exist like '/abc'? 26 00:01:32,351 --> 00:01:37,551 The page is stuck waiting and waiting with no further information for the user. 27 00:01:37,551 --> 00:01:41,167 And what if the server encounters some other error like trying to retrieve 28 00:01:41,167 --> 00:01:44,600 a file that doesn't exist or maybe it can't reach a database. 29 00:01:44,600 --> 00:01:46,730 This is where you, the full stack developer, 30 00:01:46,730 --> 00:01:50,290 comes in to save the user from any further frustration. 31 00:01:50,290 --> 00:01:52,177 For this practice session, 32 00:01:52,177 --> 00:01:57,770 you'll have several tasks to perform in the files app.js and routes quotes.js. 33 00:01:57,770 --> 00:02:00,605 I've included comments providing the tasks you'll need to complete, so 34 00:02:00,605 --> 00:02:02,630 let's have a look at them. 35 00:02:02,630 --> 00:02:06,040 First, it's important to make sure that Express catches all 36 00:02:06,040 --> 00:02:09,390 errors that occur while running route handlers and middleware. 37 00:02:09,390 --> 00:02:16,530 So in app.js, on line 32, you'll find a mostly empty 404 handler. 38 00:02:16,530 --> 00:02:20,170 This is the handler or middleware that catches requests that aren't caught by 39 00:02:20,170 --> 00:02:22,425 any other route handlers or middleware. 40 00:02:22,425 --> 00:02:23,910 In Express, requests for 41 00:02:23,910 --> 00:02:28,760 undefined or non existent routes do not result in an error as I just demonstrated. 42 00:02:28,760 --> 00:02:30,520 So it would help if you had a way to catch and 43 00:02:30,520 --> 00:02:33,490 handle this situation when your app encounters it. 44 00:02:33,490 --> 00:02:35,550 Here in the 404 handler, 45 00:02:35,550 --> 00:02:40,030 I've included a helpful log statement to indicate when this middleware fires. 46 00:02:40,030 --> 00:02:44,910 Your task here is to send a response back to the client. 47 00:02:44,910 --> 00:02:49,650 Set the response status to 404 and use the render method to 48 00:02:49,650 --> 00:02:54,890 render the not found pug template that's supplied for you in the views folder. 49 00:02:54,890 --> 00:02:57,730 For instance, when a user navigates to an undefined or 50 00:02:57,730 --> 00:03:00,100 non existent route like '/1234', 51 00:03:00,100 --> 00:03:05,770 the 404 handler will handle the request and render a helpful error message. 52 00:03:07,080 --> 00:03:12,850 Right below you'll find a global error handler initially on line 42. 53 00:03:12,850 --> 00:03:17,100 This is the middleware that will deal with any errors that your route handlers 54 00:03:17,100 --> 00:03:18,200 encounter. 55 00:03:18,200 --> 00:03:22,650 I've also included a helpful log statement to indicate when this middleware fires. 56 00:03:22,650 --> 00:03:26,840 But this time I placed the console.log method inside of an if statement 57 00:03:26,840 --> 00:03:31,830 that first checks if an error exists before logging to the console. 58 00:03:31,830 --> 00:03:36,220 And I'm logging a short message indicating that this global error handler gets called 59 00:03:36,220 --> 00:03:40,140 as well as displaying a stack trace via the value of err for 60 00:03:40,140 --> 00:03:42,040 convenience inspection. 61 00:03:42,040 --> 00:03:44,610 Keep in mind that the main 404 handler 62 00:03:44,610 --> 00:03:49,190 does not catch errors that occur in any of your defined route handlers. 63 00:03:49,190 --> 00:03:52,840 So next you'll need to create an if else, statement for 64 00:03:52,840 --> 00:03:58,198 dealing with 404 like errors or any errors caught by route handlers you defined. 65 00:03:58,198 --> 00:04:05,280 If the error status is 404, then set the response status to 404 and use the render 66 00:04:05,280 --> 00:04:10,610 method to render the not found template just as you did with the main 404 handler. 67 00:04:10,610 --> 00:04:14,490 But this time, make sure to pass the error object to the template. 68 00:04:15,580 --> 00:04:19,550 Else for any other errors caught by the global error handler, 69 00:04:19,550 --> 00:04:23,000 set the error message to the given message, err.message for 70 00:04:23,000 --> 00:04:27,340 example, or specify a general default error message. 71 00:04:27,340 --> 00:04:31,200 That way if you define an error message in an individual route handler, 72 00:04:31,200 --> 00:04:33,940 this global error handler will honor that message. 73 00:04:33,940 --> 00:04:37,200 Otherwise it will assign the general message you define here. 74 00:04:37,200 --> 00:04:42,100 Next, you'll set the response status to the given error status, or 500, so 75 00:04:42,100 --> 00:04:47,090 that if no err.status is set, 500 will be set by default. 76 00:04:47,090 --> 00:04:50,770 And lastly, you'll render the error template that's supplied for 77 00:04:50,770 --> 00:04:54,980 you in the views folder, being sure to pass it the error object. 78 00:04:56,080 --> 00:05:00,200 That way when users navigate to the quotes/error route, 79 00:05:00,200 --> 00:05:05,350 which is handled on line 15 of quotes.js, and a status 80 00:05:05,350 --> 00:05:10,350 500 server errors thrown by default, the app will display the error template. 81 00:05:10,350 --> 00:05:16,759 Finally, here in quotes.js you'll find a get route handler on line 27. 82 00:05:16,759 --> 00:05:20,719 Again I've added a helpful log statement to indicate when this route handler 83 00:05:20,719 --> 00:05:22,020 gets called. 84 00:05:22,020 --> 00:05:27,150 In here, you'll need to write code to check if the requested quote exists. 85 00:05:27,150 --> 00:05:33,330 If it does, you'll run the res.render method already present in this handler. 86 00:05:33,330 --> 00:05:38,740 Else, you'll create a new error, set its status to 404, then provide a friendly 87 00:05:38,740 --> 00:05:42,770 error message and forward it to the global error handler with the next() method. 88 00:05:42,770 --> 00:05:46,449 That way when users navigate to a quote route, they'll see the relative quote or 89 00:05:46,449 --> 00:05:48,938 if they navigate to a quote route that doesn't exist, 90 00:05:48,938 --> 00:05:51,010 the app will display the not found template. 91 00:05:52,930 --> 00:05:58,240 The goal is to render the not found view if the user visits a non existent 92 00:05:58,240 --> 00:06:04,360 route like '/abc, as well as a not found view displaying the error and 93 00:06:04,360 --> 00:06:08,770 stack trace if the user visits a non existing quote route, 94 00:06:08,770 --> 00:06:13,720 like 'quotes/123', or if any other error occurs, 95 00:06:13,720 --> 00:06:15,989 the error template renders. 96 00:06:17,775 --> 00:06:21,240 Go ahead and give it a try and don't worry if you get stuck. 97 00:06:21,240 --> 00:06:24,549 I've posted resources in the teachers notes to review in case you do. 98 00:06:24,549 --> 00:06:28,130 In the next video, I'll walk you through one possible solution. 99 00:06:28,130 --> 00:06:28,630 Good luck.