React fetch error/response catching not working

Question

I built a signup page that needs to check whether an inputted email is already taken. When a duplicate email is taken, it gets stopped in the java spring api backend and returns a status of "400".

(I've also tried using the spring annotation @column(unique=true) but could not get the 422 error to catch, either.)

I then have a catch for that status, which should then set an error (for which a field exists); when any error is set, the page won't continue. If there are no errors, the page automatically signs in and reroutes to the homepage.

I've tried catching the error as error, error status, error response, and response. (since technically a received exception from the backend isnt an error.) I just can't seem to get it to catch.

I'd appreciate if anyone knows what's wrong here and how to fix it.

the signup code, in which I'm leaving the various methods by which I've tried to catch the response:

const signUp = () => {
    axios
      .post('http://localhost:8080/signup', {
        email,
        password,
        firstName,
        lastName
        // address,
        // phoneNumber,
        // image
      })
      // eslint-disable-next-line consistent-return
      .catch((err) => {
        if (err.status) {
          setEmailUsedError('Already in use. ');
        }
      })
      .then(() => {
        post('/login', null, {
          email,
          password
        }).then((data) => {
          if ('token' in data) {
            sessionStorage.token = data.token;
            const { sub } = JSON.parse(atob(data.token.split('.')[1]));
            sessionStorage.email = sub;
            onLogin();
            history.push('/');
          }
        })
          .catch((err) => {
            if (err.res.status === 422) {
              setEmailError('Already in use. ');
            } else setServerError(true);
          });
      });
  };

then the uncaught error message in the browser:

Update: I changed .then((res)... to `.catch

      .then((res) => {
        if (res.status) {
          setEmailUsedError('Already in use. ');
        }

in the signUp function to .catch((err)...

Now it's showing the error is caught, but isn't setting the error as is coded. Not sure why.

Same result when I tried .catch((res)...

Answer 1

While there may be other factors in play, based on the console message it is your call to the /signup endpoint that is returning 422, rather than /login (as shown in the code sample). You may wish to check if the enclosing block calling it is itself chained with a catch statement.

Based on the assumption that /signup is called immediately before /login, you'll need a catch block on the same indent level as the .then(() => {post()...}.