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

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

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'));

Here is the proper way to handle the error object:

axios.put(this.apiBaseEndpoint + '/' + id, input).then((response) => {    // Success}).catch((error) => {    // Error    if (error.response) {        // The request was made and the server responded with a status code        // that falls out of the range of 2xx        // console.log(error.response.data);        // console.log(error.response.status);        // console.log(error.response.headers);    } else if (error.request) {        // The request was made but no response was received        // `error.request` is an instance of XMLHttpRequest in the browser and an instance of        // http.ClientRequest in node.js        console.log(error.request);    } else {        // Something happened in setting up the request that triggered an Error        console.log('Error', error.message);    }    console.log(error.config);});

Origin url https://gist.github.com/fgilio/230ccd514e9381fafa51608fcf137253