Now that worked perfectly when you typed in the right email and password, but what happens when you type something wrong? It'd be kind of a bad experience if you do not have some type of error catching and we're gonna walk through two different types of ways to catch errors and how to work with that inside of a react form.

So first let's just test this out, I'm going to type in some wrong credentials. So if I try to log in right now, you can see that I get a response back, nothing happens on the screen and so this would be very confusing behavior to a user.

If I look at the data, you can see that I no longer get that data status created, but instead now I get data status in a 401 error. So a 401 error is a specific kind of error, is an http code and it means that you're not authorized so if you ever see 401 come back with some API you're trying to communicate with, it means you're not authorized to access whatever you are trying to access on that API.

So what we wanna do is we wanna catch that type of error. That is the type of error where you have sent up your username and your password and for some reason or another they're not correct and you want to be able to let the user know.

Now the other type of error that we wanna catch is one where let's say the API is actually structured incorrectly or maybe it's down. So if I did sessionsasdf, there is not a route called that but if your API ever changes or anything like that happens, you wanna be able to catch that.

So if I hit save and come back here now, and let's try to log in even with good credentials, if I hit Login, now I'm gonna get these giant errors where it says POST 404 Not Found, Uncaught in promise, request failed with status code 404.

I wanna be able to catch errors where that occurs. Now you might be thinking, well, I'm never gonna type in the wrong API endpoint. Well, one, you probably will because I type the wrong API endpoint in constantly especially when I'm building out a new application, that kind of thing happens.

But another even more common scenario is an API potentially just being down. So if DevCamp Space and that server were to go down for any reason, even for a moment when a user is trying to log in, you would get an error, you would actually get a 500 error which is called a server error.

So we wanna be able to catch and react to those kinds of situations. So that's what we're gonna build out in this guide. So let's first tackle the more challenging one which is catching the error. So the first thing I'm gonna do is to create a spot on the page here where we can display the error text.

So let's come up to state 'cause I think this is the most natural spot for it and I'm going to say errorText just like this and it's gonna start off as an empty string and then I want to render this on the page. So right here, I'm not gonna really care about styling or anything like that right now. For right now, I'm just gonna create an empty div and say this.state.errorText here.

Now if I hit save, there is nothing, it's not taking up any space, it's just there as an empty string, so that's fine. I'm gonna clear this console off, and now what we can do is we can update our state's errorText anytime that we need to.

So let's start by catching any kind of errors like with an incorrect API or if an API server is down. So the way that you do that is you come to the end of the then of a function call and now I'm gonna call catch.

Now catch is something specific to working with Axios and working with promises. This is the last item you'd place on a list and it's what happens if an error occurs, this will catch the error. So instead of catching the response here, we're gonna catch the error, and then we're gonna pass in curly brackets just like a normal function, and let's close that off by typing curly bracket and then a paren.

Now for right now, you could just console log this. So I could just say console.log our error or I could say some error occurred and then print out the error. And that's fine, we can just do this to make sure that it's working.

login.js

.then(response => {
  console.log("response", response);
}).catch(error => {
  console.log("some error occurred", error);
});

So if I come back now and I can type anything in here 'cause it's still the wrong API, hit Login and now you can see it looks similar but it is slightly different.

Now we're catching the error so we're still getting that same POST request error of not found but now you can see it says some error occurred. This is what we printed out and then we got the full error which is just that the error request failed with a status code of 404.

So that's okay but that's only half of the solution. Remember, we wanna update the error text up here. So instead of just console logging this out, let's say this.setState and then inside of here let's actually update our new error text.

So I'm gonna say errorText and here is where I wanna say an error occurred and that's it. So I can get rid of this console log here and update the state,

login.js

.then(response => {
  console.log("response", response);
})
.catch(error => {
  this.setState({
    errorText: "An error occurred"
  })
});

come back one more time, clear this out, and now if I try it with the wrong API once again, hit Login, you can see it prints out an error occurred. So this is working perfectly, that's exactly how you'd wanna notify your users. So that's the very first situation.

Now the other situation's a little trickier because if I were to type in the wrong credentials, I'm not gonna get an error, remember I just get a different status code back. So what we can do is place a conditional inside of here. So instead of printing this out, what I can do is say something like if response.data.status 'cause remember that is what gets returned and status gets returned whether it's created or whether it's that 401.

So if response.data.status is equal to created 'cause that's what we get when it works, then I wanna say something like console.log you can come in, something like that. Eventually, we're going to update the parent components and we're gonna be able to set state for the entire application whenever a user has successfully logged in.

And next though, we're going to update that error text state. So if it is created, that means everything's good to go but if anything else happens such as entering in the wrong credentials, we wanna update the error text. So here I can say this.setState and then once again let's go and let's say errorText and set this equal to wrong email or password.

.then(response => {
  if (response.data.status === "created") {
    console.log("You can come in...");
  } else {
    this.setState({
      errorText: "Wrong email or password"
    });
  }
})

Okay, let's test this out now, clear everything out and I can even close the console. Now if I type in something that I know is wrong like this and type login, now it says, oh looks like, oh you know what? I forgot to change the URL, need to change it back to sessions, there we go. 'Cause that if you notice, we should get different error text values. So that told me that an actual error occurred so that was what we put together in action.

So now I'm going to type in the wrong credentials again, hit Login and now it says wrong email or password.

So that is perfect, that gives us instant feedback on knowing that what we typed in is not working. Now let's come up 'cause you may say that okay, that's all well and good but how do we clear this off? Because now let's say that I go and I type something that is right like this one right here, then the wrong email or password code is still going to be there.

So if I hit Login now, I'm logged in and so if I open this up, let's open it up and clear everything out, so if I come here and type something that is right. So if I type this in and type login, it says you can come in but it still says wrong email or password.

So we need to clear this off and I think the most logical place to clear this off is as soon as a user comes back and starts typing data in. Well we know where that happens right here in handleChange, we can add a different value here and say errorText and just reset it back to an empty string.

login.js

handleChange(event) {
  this.setState({
    [event.target.name]: event.target.value,
    errorText: ""
  });
}

So now coming back one more time, let's start with something bad, something that is inaccurate. So if I hit Login, I get the wrong email or password, as soon as I come back through and start typing again, notice how the error text goes away.

So great job if you went through that, we now have added some client and some server-side validation here by being able to check if someone's logged in or not and then also to update the page and give them some information if either type of error occurs.

If an error occurs where they entered the wrong credentials or if an error occurred where something was wrong with the API call itself.

Resources

• Source Code