Returning Error Values Through Axios/Express To React App

Question

I've got a handleSubmit function that fetches data from my backend as part of a larger component. I'd like to send the error information to my redux store and/or local component when the back-end fails, but am unable to do so.

The handleSubmit function looks like this (it's using React hooks, which are wired up correctly. Can post the full component if that is useful):

const handleSubmit = async (e, { dataSource, filter, filterTarget }) => {

    e.preventDefault();
    setIsLoading(true);
    setErrorValue(null);
    setError(false);

    const token = localStorage.JWT_TOKEN;
    const link = filterTarget === "Identifier" ? `http://localhost:8081/api/${dataSource}/${filter}`: `http://localhost:8081/api/${dataSource}?filter=${filter}&filterTarget=${filterTarget}`;

    try {
        let data = await axios.get(link, { headers: { authorization: token }});
        props.setData(data);
        setError(false);
        setIsLoading(false);
    } catch (err){           
        setErrorValue(err.message);
        setError(true);
        setIsLoading(false);
    };
};

I'm intentionally making bad requests through the form, which will trigger an error in my backend. These are handled through my custom Express middleware function, which looks like this (I'll add more once I get this framework to work):

  handleOtherError: (error, req, res, next) => { // Final custom error handler, with no conditions. No need to call next() here.
      console.log("This error handler is firing!");
      return res.status(500).json({ 
          message: error.message,
          type: "ServerError"
      });
    }

I know that this function is firing because the console.log statement is appearing on my server, and if I change the status code, so does the status code error on the front-end in my Google Chrome console.

In fact, if I go to the network tab, the correct error information appears for my request. Here's the video of me making a bad request:

However, when I try to access the err.message on my front-end, I'm not able to do so. The err.message in my try/catch handler for the handleSubmit function only ever gives me the Request failed with status code XXX

What am I doing wrong?

Answer 1

See https://github.com/axios/axios#handling-errors

You can access the response by using err.response.data.message, not err.message.

Answer 2

Found the answer posted elsewhere: https://github.com/axios/axios/issues/960

Apparently, to get the message, you have to use err.response.data.message

Simply using "err" will only give you a basic string respresentation of the error.