MERN Stack Tutorial #13 - Handling Error Responses

all right then gang so we're reaching the finish line this is all looking pretty good there's a couple of things left that i want to do and the first one is how we're handling the errors over here because at the minute if we try to add a new exercise and we miss some of the fields we get this error down here which is good but the error is absolutely naff i wouldn't want to give my users an error like that because it says all this jargon workout validation failed reps path reps is required and path load is required etc now instead it would be nicer if there was a simpler error message right here and also maybe highlight in red the border of the input fields that are required once they try to send a request and they're not filled in so we're going to see how to do that in this lesson so the first thing we have to do is step back into the back end code and open up the workout controller because this is where we're handling the post request to add a new workout document now at the minute we tried to do that right here and if there's an error we catch it here and we send that error message back now this error is being created by mongoose because we created a mongoose model based on this schema right here and if mongoose tries to save a new document to the database whereby the document doesn't correspond or doesn't uphold this schema then it's going to throw that error now that's great it applies this level of security for us so that we don't save anything to the database that doesn't match the schema however the error message is absolutely pants and ideally i'd want to make a more friendly error message so what i'm going to do is i'm going to go back to the workout controller and do my own little check here so what i'll do is i'll create a new variable and i'm going to call that empty fields and set that to an empty array to begin with so the idea here is we're going to detect which fields are empty when they send the post request and then we can send that information back to the client so i'll first of all check if we don't have a title so if the title is empty then i'm going to get the empty fields and i'm going to push something to that empty fields array and it's going to be the name of the field that's empty so title and i'll do the same thing for the other fields as well so we have if not load then i'll take the empty fields and i'll push to that and this time it's going to be load that we push and then finally we'll do a check for the reps so if we don't have a value for that again we'll take the empty fields and we'll push a value onto that which is going to be reps so by the time we've done these three checks we should have an array of empty fields and it's going to contain any of these things here or none of them if they fill them all in all right now then after we've done all those checks we can do one more check and this check is to see if the length of this array is greater than zero because if it is greater than zero it means one of these things or more is inside the array and at that point we don't want to go any further and even try to add that document to the database we just want to send an error back to the clients and say which fields are missing so i can say if empty fields dot length is greater than zero then we're going to do something and what we're going to do is return a response where the status is 400 and then also return some json which is an object and then inside this object we'll have an error message that says something like please fill in all the fields so that's the message we're going to show on the front end underneath the form and then also i want to send back as a second argument or a second property rather inside this json the empty fields themselves so that will be an array of all of the fields that still need filling in all right so now we can go back to our front end and we can handle this error a bit differently so let's cross this off close the back end and open up the front end and head to the workout form components so this right here this is where we're getting back the error and now we can kind of approach this a little bit differently so in terms of the error itself we don't really need to do much else because we already have some state for the error message it's just that the error message on the error property that we get back is a little nicer now but what we do also have is we have the empty fields also inside this json response so what i'm going to do is create some state for that so i'll say const and we'll call this empty fields and set empty fields like so and we'll say that's equal to use state and we're going to pass in an empty array to begin with now if we get some empty fields we can populate this so let's do that right here i'm going to say set empty fields like so and inside there we'll take the json and the empty fields property okay so whatever empty fields we get back from the server we're setting that inside this piece of state right here now there's one more thing we need to do and that's to set the empty fields again but this time when the response is okay so much like we set the error to null we're going to set the empty fields to an empty array again so we don't see those errors in the page so now we have those empty fields right here we can kind of use those to conditionally style these different impulse so the way we're going to do that is by giving these different inputs a conditional class so let's start with the top one and we'll say that the class name is equal to something dynamic and that's going to be the empty fields and then we're going to do a check basically here we're going to do a ternary operator we're going to evaluate something to see if it includes the title which is basically what this input is for and if it does apply a class to it if it doesn't just apply a class of an empty string so in essence we're kind of giving it no class so we'll say dot includes right here and we're looking for the title so that's the thing we're kind of evaluating and that's going to be true or false now for a ternary operator we do the question mark and if it's true the class we want to give this field or this input is the error class then we do a colon and then the class we want to apply if this is false is just an empty string so we take away the class in essence okay so now we're only getting this error class if this is true if title is in the empty fields and so we can style this error class for this import in the css all right then so let's go down to the next one and in fact i'm going to copy that i'm going to paste it in here and paste in here but we need to change what we're looking for so this one is the load and then this one is the reps so now we have those kind of conditional classes we also want to style those things as well so they have maybe a red border so what i'm going to do is i'm just going to copy this style from my repo over here woohoo and let me go to index.css only a dead simple style so we say any input with a class of error has a border now with one pixel solid and the color is this error color that we define right at the top all right so let's save this and give it a whirl so then let's start to add a new workout so i'm going to say bench press and the load is going to be 30 kilograms and in fact what we'll do is we'll send the request without these two fields present so add the workout and you can see now these two are red this one isn't because we have a value for this but these two are red and it says down here please fill in all the fields so we'll say for the load 35 kilograms what i'm going to do is add this workout and we can see now the red is taken away from this field but it still remains here the reps is going to be 20 then we can add the workout then all the errors disappear the form is cleared and we see the new exercise over here awesome so that my friends is all working

Channel: Net Ninja

Views: 26,169

Keywords: mern, mern tutorial, mern crash course, mern tutorials, react, mongodb, node.js, express, node.js api, express api, express tutorial, node tutorial, node and react, mern vs mevn, full stack tutorial, full stack, full-stack, fullstack, mern stack, mern stack tutorial, mern stack crash course

Id: AWFwioQdjrg

Length: 8min 25sec (505 seconds)

Published: Fri Jul 01 2022