¿Cómo capturar y manejar la respuesta de error 422 con Redux/Axios?

Tengo una acción haciendo un POST solicitud al servidor para actualizar la contraseña de un usuario, pero no puedo manejar el error en el bloque catch encadenado.

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

Cuando registro el error esto es lo que veo:

Cuando reviso la pestaña de red, puedo ver el cuerpo de la respuesta, pero por alguna razón no puedo acceder a los valores.

¿He cometido un error sin saberlo en alguna parte? Porque estoy manejando bien otros errores de diferentes solicitudes, pero parece que no puedo resolver este.

Ejemplo

getUserList() {
    return axios.get("https://stackoverflow.com/users")
      .then(response => response.data)
      .catch(error => {
        if (error.response) {
          console.log(error.response);
        }
      });
  }

Verifique la respuesta del objeto de error, incluirá el objeto que está buscando para que pueda hacer error.response.status

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

Axios probablemente esté analizando la respuesta. Accedo al error así en mi código:

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

De los documentos:

La respuesta a una solicitud contiene la siguiente información.

{
  // `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: {}
}

Entonces el catch(error => ) en realidad es solo catch(response => )

EDITAR:

Todavía no entiendo por qué registrar el error devuelve ese mensaje de pila. Intenté registrarlo así. Y luego puedes ver que es un objeto.

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

EDIT2:

Después de mirar un poco más alrededor este es lo que está tratando de imprimir. Que es un objeto de error de Javascipt. Axios luego mejora este error con la configuración, el código y la respuesta como este.

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

Esta es la forma correcta de manejar el error objeto:

axios.put(this.apiBaseEndpoint + "https://stackoverflow.com/" + 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);
});

URL de origen https://gist.github.com/fgilio/230ccd514e9381fafa51608fcf137253

axios.post('http://localhost:8000/api/auth/register', {
    username : 'test'
}).then(result => {
    console.log(result.data)
}).catch(err => {
    console.log(err.response.data)
})

agregar captura obteniendo respuesta de error ==> err.response.data

También estuve perplejo en esto por un tiempo. No repetiré demasiado las cosas, pero pensé que sería útil para otros agregar mis 2 centavos.

los error en el código de arriba es de tipo Error. Lo que pasa es el Encadenar se llama al método en el objeto de error porque está intentando imprimir algo en la consola. Esto es implícito, como resultado de escribir en la consola. Si observa el código de toString en el objeto de error.

Error.prototype.toString = function() {
  'use strict';

  var obj = Object(this);
  if (obj !== this) {
    throw new TypeError();
  }

  var name = this.name;
  name = (name === undefined) ? 'Error' : String(name);

  var msg = this.message;
  msg = (msg === undefined) ? '' : String(msg);

  if (name === '') {
    return msg;
  }
  if (msg === '') {
    return name;
  }

  return name + ': ' + msg;
};

Como puede ver arriba, usa los componentes internos para construir la cadena para enviar a la consola.

hay genial documentos en esto en mozilla.

Puede usar una declaración en línea si no así:

.catch(error => {
    dispatch({
        type: authActions.AUTH_PROCESS_ERROR,
        error: error.response ? error.response.data.code.toString() : 'Something went wrong, please try again.'
    }); 
});

Lo único que me ayudó fue lo siguiente:

axios.put('/api/settings', settings, {
  validateStatus: status => status >= 200 && status < 300 || status === 422
})

https://stackoverflow.com/a/66285529/5849569