1 00:00:01,160 --> 00:00:05,340 Our air handily Middleware is now aware of the type of error that is dealing with. 2 00:00:05,360 --> 00:00:09,620 So now we need to inspect each of these different errors somehow formulate a response and send it back 3 00:00:09,620 --> 00:00:10,530 to the user. 4 00:00:10,580 --> 00:00:15,350 But as a quick reminder the entire reason we got into this entire discussion was we wanted to make sure 5 00:00:15,350 --> 00:00:19,940 that all these different services and all these different kinds of errors are always gonna result in 6 00:00:19,940 --> 00:00:21,930 the exact same structure of air. 7 00:00:21,990 --> 00:00:26,210 We never actually sat down and discussed exactly what the structure of that response should look like. 8 00:00:26,210 --> 00:00:28,060 So let's do that right now. 9 00:00:28,130 --> 00:00:33,170 This is going to be the common response structure for all ears that we have inside our application. 10 00:00:33,350 --> 00:00:38,690 So no matter what the air is no matter the reason for it no matter the server that it is read coming 11 00:00:38,690 --> 00:00:44,890 from we're always going to send back an object that has an errors property and then inside there is 12 00:00:44,890 --> 00:00:50,610 going to be an array of objects each of those objects will have a message that describes the error that 13 00:00:50,610 --> 00:00:56,690 occurred and optionally we'll have a field that refers to the what this error is tied to. 14 00:00:56,700 --> 00:01:02,520 So for example if there's an issue with some email address we would have a field of email and a message 15 00:01:02,520 --> 00:01:05,160 of invalid email or something similar to that. 16 00:01:05,280 --> 00:01:09,810 Now note that this is in kind of typescript interface syntax right here. 17 00:01:09,870 --> 00:01:11,880 You'll notice the empty brackets that I have right here. 18 00:01:11,880 --> 00:01:16,370 That means that this object is going to be a array of objects with that exact structure. 19 00:01:17,280 --> 00:01:23,100 So errors is going to be an array of objects and each of those objects are required to have a message 20 00:01:23,100 --> 00:01:28,370 property that is a string and possibly optionally a field that is a string as well. 21 00:01:28,600 --> 00:01:34,640 So again this is the common structure we're going have everywhere inside of application or errors of 22 00:01:34,640 --> 00:01:41,010 course so when we talk about doing some actual handling or generation of response inside of our area 23 00:01:41,010 --> 00:01:45,660 handling middleware we're not actually just going to take the reasons property off of say the request 24 00:01:45,660 --> 00:01:49,380 validation error or just the reason property off the database connection error. 25 00:01:49,440 --> 00:01:52,040 Instead we want to make sure that we take these errors. 26 00:01:52,100 --> 00:01:57,160 The reason or messaging around them and form them all into this common response structure. 27 00:01:57,330 --> 00:02:03,180 So let's try doing that right now back inside of our middleware but here's our middleware. 28 00:02:03,180 --> 00:02:05,620 We need to go round to each of these different if statements. 29 00:02:05,640 --> 00:02:10,560 So if statement 1 and if statement 2 we're going to take a look at the error that just appeared instead 30 00:02:10,560 --> 00:02:14,030 of our middleware we're going to extract some details about that error. 31 00:02:14,190 --> 00:02:19,350 We're going to massage them essentially or transform them into this exact format right here and then 32 00:02:19,350 --> 00:02:21,790 send the response back to the user. 33 00:02:21,870 --> 00:02:27,620 So we're going to first start off with our instance of right here of request validation error. 34 00:02:27,780 --> 00:02:32,690 Let's get a quick reminder on what all the different error messaging inside there looks like. 35 00:02:32,770 --> 00:02:37,830 So I can go to the definition of request validation error and as you'll recall this thing is going to 36 00:02:37,830 --> 00:02:39,820 have an heiress property assigned to it. 37 00:02:40,020 --> 00:02:45,750 That's going to be an array of validation error and a validation error if we hover over it. 38 00:02:45,780 --> 00:02:53,960 You'll recall as a parent property a message location and value so we need to take this heirs array 39 00:02:54,050 --> 00:02:59,040 right here and we're going to transform it into this structure right here. 40 00:02:59,100 --> 00:03:06,310 That's what we have to do back inside of our middleware so inside my middleware I'm going to first define 41 00:03:06,310 --> 00:03:10,840 a variable called formatted ears and I'll get that from air. 42 00:03:10,840 --> 00:03:21,920 So that's our request validation error dot errors dot map so we will map over each error and for each 43 00:03:21,950 --> 00:03:28,190 error we're going to make sure that we return an object that has a message and possibly a field as well 44 00:03:29,200 --> 00:03:37,940 so I will return message the value from that is going to come from air dot message and field and the 45 00:03:37,960 --> 00:03:42,130 value for that will come from air dot RAM 46 00:03:45,170 --> 00:03:49,350 though again just to make sure that step was really clear we took all the errors. 47 00:03:49,360 --> 00:03:53,410 Remember this is the information we wanted to communicate from our root handler over to the area handling 48 00:03:53,410 --> 00:03:58,090 middleware we wanted to take that array of validation errors that we got back from Express validator 49 00:03:58,500 --> 00:04:03,040 and we wanted to transform it into this structure right here and that's what we are doing with this 50 00:04:03,100 --> 00:04:06,510 mapping statement. 51 00:04:06,580 --> 00:04:10,810 So now that we've built out this list of formatted errors we can take it and send it back to the user 52 00:04:11,160 --> 00:04:16,120 but I'll put in a return because we want to return early and not execute anything else inside of here 53 00:04:17,370 --> 00:04:32,190 and we'll do a rez that status of 400 and then we will send an object that has a list of errors as formatted 54 00:04:32,340 --> 00:04:33,820 errors like so. 55 00:04:34,020 --> 00:04:34,560 Just be clear. 56 00:04:34,560 --> 00:04:40,800 I said that we had to transform the errors inside of our request validation error into this structure 57 00:04:40,800 --> 00:04:41,480 right here. 58 00:04:41,550 --> 00:04:45,540 Just be really precise what we really just did with that mapping statement was essentially generate 59 00:04:45,540 --> 00:04:47,300 that array of objects. 60 00:04:47,430 --> 00:04:49,040 And that's why we took the result to that. 61 00:04:49,050 --> 00:04:54,510 So that's the array of objects we threw into this object with errors to make sure that we conformed 62 00:04:54,510 --> 00:04:58,030 to this structure right here all right. 63 00:04:58,040 --> 00:05:06,700 So let's say this will then go over to Bozeman and do a quick test so I want to test out that invalid 64 00:05:06,760 --> 00:05:10,260 request handler and make sure I put in it. 65 00:05:10,300 --> 00:05:13,710 In any event invalid email I'll send this off. 66 00:05:13,960 --> 00:05:15,640 And there we go. 67 00:05:15,700 --> 00:05:20,980 You'll notice that we now have an object that has an airport property and an inside there is an array 68 00:05:20,980 --> 00:05:26,950 of objects each object as a message and possibly a field as well. 69 00:05:26,950 --> 00:05:32,020 So now our response coming back from my area handling middleware when we get a error of type request 70 00:05:32,020 --> 00:05:38,980 validation error is going to always conform to this exact error response structure is remember we want 71 00:05:38,980 --> 00:05:43,210 to make sure that every single error that we ever send back to our ReACT app is always going to follow 72 00:05:43,450 --> 00:05:44,450 this structure. 73 00:05:44,530 --> 00:05:51,490 So the react app does not need to know how to implement 50 different error passing methods okay. 74 00:05:51,540 --> 00:05:55,710 So we're pretty much going to repeat the same exact process or something very similar to it for our 75 00:05:55,710 --> 00:05:57,770 database connection there now. 76 00:05:57,780 --> 00:06:04,270 So in this case I'm going to return early because I don't want to run anything else inside of your I'll 77 00:06:04,270 --> 00:06:09,180 do a red dot status in this case. 78 00:06:09,200 --> 00:06:14,120 It's not really appropriate to use stats go to a four hundred four hundred means bad request which usually 79 00:06:14,120 --> 00:06:16,610 indicates that the user sent us some bad data. 80 00:06:16,610 --> 00:06:20,000 In this case if we have a database connection error that's really indicating that there is something 81 00:06:20,000 --> 00:06:21,110 wrong with our server. 82 00:06:21,150 --> 00:06:25,010 And so we should really use a five hundred status code for that or something similar. 83 00:06:25,010 --> 00:06:33,700 So we could always look up our list of each TTP status codes and it might be a little bit more appropriate 84 00:06:33,700 --> 00:06:39,850 to do something like a 500 error in this case to say a sorry something internally is not quite right 85 00:06:39,940 --> 00:06:42,520 or maybe even a five or three either one. 86 00:06:42,520 --> 00:06:43,150 Totally fine. 87 00:06:43,180 --> 00:06:52,260 Let's just go to 500 in this case and then I'll send again the exact same structure will do errors. 88 00:06:52,420 --> 00:06:57,090 Let's go and get a reminder of all the data that is available to us inside of database connection error. 89 00:06:57,230 --> 00:07:02,200 So go back to that error definition is database connection here right here and you'll recall that in 90 00:07:02,200 --> 00:07:07,630 this case we've got that reason property that is storing the reason that we just threw this database 91 00:07:07,630 --> 00:07:18,870 connection error so in this case we can't send back in array that will create manually inside there. 92 00:07:18,870 --> 00:07:27,960 I'll just give it a message and I'll assign to message E R dot reason like so so again we still have 93 00:07:27,960 --> 00:07:33,090 that same exact structure that we said that we want to have for every single response we've got our 94 00:07:34,050 --> 00:07:38,520 array of objects where each one has a message and possibly a field. 95 00:07:38,520 --> 00:07:40,770 In this case there's no field to tie to our message. 96 00:07:40,770 --> 00:07:44,330 So we are not including that field. 97 00:07:44,360 --> 00:07:45,570 Let's save this. 98 00:07:45,620 --> 00:07:50,120 We'll go back over to postman and do another test go inside a post man I'm going to update my email 99 00:07:50,120 --> 00:07:55,490 again and put in a valid e-mail to make sure that I get the database connection error. 100 00:07:55,940 --> 00:08:00,050 I'll send this off and now we get a 500 Internal Server Error. 101 00:08:00,290 --> 00:08:03,230 And I've got the exact same structure as before. 102 00:08:03,230 --> 00:08:12,060 Awesome the last thing we need to take care of is the final response type right here so if we don't 103 00:08:12,060 --> 00:08:13,800 understand the air that just came in. 104 00:08:13,950 --> 00:08:17,760 If this is just some generic error that we didn't really plan on we still need to make sure that this 105 00:08:17,760 --> 00:08:21,180 follows the same structure that we said we were going to follow for everything else. 106 00:08:21,180 --> 00:08:24,680 So that same kind of errors that's an array of objects. 107 00:08:24,810 --> 00:08:27,420 Right now it's just sending back a single object that has a message. 108 00:08:27,420 --> 00:08:34,160 Property can replace that with errors I'll put in an array. 109 00:08:34,340 --> 00:08:40,460 I'll give it one object with a message and we can either just try to take the message property off the 110 00:08:40,460 --> 00:08:48,200 incoming air or we could put in a more generic thing just something like something went wrong or something 111 00:08:48,200 --> 00:08:50,670 like that okay. 112 00:08:50,700 --> 00:08:54,310 So let's say this and we'll just do one last test. 113 00:08:54,310 --> 00:08:58,210 Even though we don't really have the ability to really test out that final error we'll just send and 114 00:08:58,210 --> 00:09:00,010 make sure that I still have everything working. 115 00:09:00,010 --> 00:09:00,250 Yeah. 116 00:09:00,290 --> 00:09:02,270 Looks like it's still working. 117 00:09:02,460 --> 00:09:02,710 OK. 118 00:09:02,740 --> 00:09:06,970 So at this point time we've now seen kind of the entire start to finish. 119 00:09:06,970 --> 00:09:12,610 We've seen that we wanted to have these very common structures for every single thing that could possibly 120 00:09:12,610 --> 00:09:17,590 go wrong inside our application so that our ReACT application can always take the air and work with 121 00:09:17,590 --> 00:09:21,910 it and somehow without it needing to have a intricate understanding of what's going on behind the scenes 122 00:09:23,730 --> 00:09:30,100 we did this by creating this custom area handling middleware we needed to transfer some very precise 123 00:09:30,100 --> 00:09:34,600 information about all these errors that occurred from the request handler into the error handling middleware 124 00:09:34,930 --> 00:09:40,910 which is why we subclass the air base class into request validation error and database connection error 125 00:09:41,880 --> 00:09:45,760 then anytime that we saw these errors appear inside of our middleware we could check to see if that 126 00:09:45,790 --> 00:09:52,890 errors is of a particular type and if it is then we'll go ahead and interpret that error accordingly. 127 00:09:52,900 --> 00:09:55,030 Again this really is a good example right here. 128 00:09:55,030 --> 00:09:57,530 But we are not quite done yet. 129 00:09:57,580 --> 00:10:01,840 As I mentioned there's still a couple of improvements they're going to throw on top this make it even 130 00:10:01,870 --> 00:10:09,280 easier to use from our different root handlers than what we have right now so still a little bit to 131 00:10:09,280 --> 00:10:09,630 go. 132 00:10:09,670 --> 00:10:11,760 Quick pause right here and we'll continue in just a moment.