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?

Toby Mellor · Accepted Answer · 2019-06-11 22:33:14Z

6

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

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

answered Jun 11, 2019 at 22:33

Toby Mellor

8,2078 gold badges38 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Pratyush Narain Over a year ago

Still not getting the result.

Harrison Cramer · Accepted Answer · 2019-06-11 22:30:39Z

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.

answered Jun 11, 2019 at 22:30

Harrison Cramer

4,63611 gold badges40 silver badges75 bronze badges

Collectives™ on Stack Overflow

Returning Error Values Through Axios/Express To React App

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related