Cnolimit Cnolimit - 7 months ago 193
React JSX Question

How to catch and handle error 422 response Redux/Axios

I have a action making a

request to the server in order to update a users password, although 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 => {
.catch(error => {
console.log('ERROR', error)
switch (error.type) {
case 'password_invalid':
dispatch(PasswordUpdateFailure('Incorrect current password'))
case 'invalid_attributes':
dispatch(PasswordUpdateFailure('Fields must not be blank'))

When i log the error this is what i see

Error Logged

Although when I check the Network tab i can see the response body, but for some reason i can't access the values??

Network Tab

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.


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

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

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 => )


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


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