How to catch and handle error response 422 with Redux/Axios?

Question

I have an action making a POST request to the server in order to update a user's password, but I'm unable to handle the error in the chained catch block.

return axios({   method: 'post',   data: {     password: currentPassword,     new_password: newPassword   },   url: `path/to/endpoint` }) .then(response => {   dispatch(PasswordUpdateSuccess(response)) }) .catch(error => {   console.log('ERROR', error)   switch (error.type) {     case 'password_invalid':       dispatch(PasswordUpdateFailure('Incorrect current password'))       break     case 'invalid_attributes':       dispatch(PasswordUpdateFailure('Fields must not be blank'))       break   } }) 

When I log the error this is what I see:

When I check the network tab I can see the response body, but for some reason I can't access the values!

Have I unknowingly made a mistake somewhere? Because I'm handling other errors from different request fine, but can't seem to work this one out.

Answer 1

Example

getUserList() {     return axios.get('/users')       .then(response => response.data)       .catch(error => {         if (error.response) {           console.log(error.response);         }       });   } 

Check the error object for response, it will include the object you're looking for so you can do error.response.status

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

Answer 2

Axios is probably parsing the response. I access the error like this in my code:

axios({   method: 'post',   responseType: 'json',   url: `${SERVER_URL}/token`,   data: {     idToken,     userEmail   } })  .then(response => {    dispatch(something(response));  })  .catch(error => {    dispatch({ type: AUTH_FAILED });    dispatch({ type: ERROR, payload: error.data.error.message });  }); 

From the docs:

The response for a request contains the following information.

{   // `data` is the response that was provided by the server   data: {},    // `status` is the HTTP status code from the server response   status: 200,    // `statusText` is the HTTP status message from the server response   statusText: 'OK',    // `headers` the headers that the server responded with   headers: {},    // `config` is the config that was provided to `axios` for the request   config: {} } 

So the catch(error => ) is actually just catch(response => )

EDIT:

I still dont understand why logging the error returns that stack message. I tried logging it like this. And then you can actually see that it is an object.

console.log('errorType', typeof error); console.log('error', Object.assign({}, error)); 

EDIT2:

After some more looking around this is what you are trying to print. Which is a Javascipt error object. Axios then enhances this error with the config, code and reponse like this.

console.log('error', error); console.log('errorType', typeof error); console.log('error', Object.assign({}, error)); console.log('getOwnPropertyNames', Object.getOwnPropertyNames(error)); console.log('stackProperty', Object.getOwnPropertyDescriptor(error, 'stack')); console.log('messageProperty', Object.getOwnPropertyDescriptor(error, 'message')); console.log('stackEnumerable', error.propertyIsEnumerable('stack')); console.log('messageEnumerable', error.propertyIsEnumerable('message'));