handling error response from express to react

Question

I'm trying to send an error response from and express api call that has an error when a user adds a non-unique category or no category at all. I'm able to save the category to the DB and send back a proper response. I'm not sure I'm using the correct response method in express.

Express:

exports.addCategory = (req, res, next) => {
  var category = new Category(req.body);
  category.save().then(doc => {
    res.send(doc);
  }).catch(err => {
    res.send({message:'Category must be unique!'});
  });

}

React

export function addCategoryName( name ){
  return (dispatch) => {
    const dbPost = axios.post('/api/add-category', {name:name});
    dbPost.then(result => {
      console.log("result = ", result);
      dispatch({
        type: type.ADD_CATEGORY_NAME,
        payload: result.data
      });
    }).catch(err => {
      console.log("CATCH = ", err);
      // dispatch({
      //   type: type.ADD_CATEGORY_NAME_ERROR,
      //   payload: err.message
      // });
    });
  }
}

The above response goes straight to the dbPost.then(result => { instead of the catch. So I tried

Express response

res.status(err.statusCode || 500).json({message:msg});

This gave me:

CATCH =  Error: Request failed with status code 500
    at createError (createError.js:15)
    at settle (settle.js:18)
    at XMLHttpRequest.handleLoad (xhr.js:77)

All i'm trying to do is respond with an error message from express and for my axios promise to catch it as an error. But I can't seem to get to the error message. Is there something I'm missing in express as a response for this.

Possible duplicate of [Proper way to set response status and JSON content in a REST API made with nodejs and express](https://stackoverflow.com/questions/26066785/proper-way-to-set-response-status-and-json-content-in-a-rest-api-made-with-nodej) — Dekel, Sep 01 '17 at 23:42
Not a duplicate. My question is why is the catch method in my axios call not catching the error message. This is why I asked if maybe its something to do with express response but the more I look at it its not express. But thanks for your reply and link — eman, Sep 01 '17 at 23:50
It's not catching the error message because the result is not an error. If you want the result to be an error you need to set error-code (as in the duplicate...) — Dekel, Sep 01 '17 at 23:51
I tried setting error code res.status(500).send({ error: "boo:(" }); the problem is this goes to the then( result ) and not the catch(error) in axios promise. Not sure what you mean by error-code — eman, Sep 02 '17 at 00:01
CATCH = Error: Request failed with status code 500 at createError (createError.js:15) at settle (settle.js:18) at XMLHttpRequest.handleLoad (xhr.js:77) — eman, Sep 02 '17 at 00:05
I was hoping the axios catch would give me the error of boo:( — eman, Sep 02 '17 at 00:09

score 15 · Answer 1 · answered Sep 02 '17 at 00:42

So it turns out it wasn't my express response it was the fact that I needed to add console.log("CATCH = ", err.response); in my axios promise catch in react. I was missing the response object. I had no idea I need that.

For full code in case anyone else has the same issue.

React:

export function addCategoryName( name ){
  return (dispatch) => {
    const dbPost = axios.post('/api/add-category', {name:name});
    dbPost.then(result => {
      console.log("result = ", result);
      dispatch({
        type: type.ADD_CATEGORY_NAME,
        payload: result.data
      });
    }).catch(err => {
      console.log("CATCH = ", err.response);
       dispatch({
         type: type.ADD_CATEGORY_NAME_ERROR,
         payload: error.response.data.error
       });
    });
  }
}

handling error response from express to react

1 Answers1