{"id":732,"hash":"f5542195c746610d5764bef5ba2359fadf2af56b7a46d3359b14509032c05c07","pattern":"How to catch and handle error response 422 with Redux/Axios?","full_message":"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.\n\nreturn axios({\n  method: 'post',\n  data: {\n    password: currentPassword,\n    new_password: newPassword\n  },\n  url: `path/to/endpoint`\n})\n.then(response => {\n  dispatch(PasswordUpdateSuccess(response))\n})\n.catch(error => {\n  console.log('ERROR', error)\n  switch (error.type) {\n    case 'password_invalid':\n      dispatch(PasswordUpdateFailure('Incorrect current password'))\n      break\n    case 'invalid_attributes':\n      dispatch(PasswordUpdateFailure('Fields must not be blank'))\n      break\n  }\n})\n\nWhen I log the error this is what I see:\n\nWhen I check the network tab I can see the response body, but for some reason I can't access the values!\n\nHave 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.","ecosystem":"npm","package_name":"reactjs","package_version":null,"solution":"Axios is probably parsing the response. I access the error like this in my code:\n\naxios({\n  method: 'post',\n  responseType: 'json',\n  url: `${SERVER_URL}/token`,\n  data: {\n    idToken,\n    userEmail\n  }\n})\n .then(response => {\n   dispatch(something(response));\n })\n .catch(error => {\n   dispatch({ type: AUTH_FAILED });\n   dispatch({ type: ERROR, payload: error.data.error.message });\n });\n\nFrom the docs:\n\nThe response for a request contains the following information.\n\n{\n  // `data` is the response that was provided by the server\n  data: {},\n\n  // `status` is the HTTP status code from the server response\n  status: 200,\n\n  // `statusText` is the HTTP status message from the server response\n  statusText: 'OK',\n\n  // `headers` the headers that the server responded with\n  headers: {},\n\n  // `config` is the config that was provided to `axios` for the request\n  config: {}\n}\n\nSo the catch(error => ) is actually just catch(response => )\n\nEDIT:\n\nI 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.\n\nconsole.log('errorType', typeof error);\nconsole.log('error', Object.assign({}, error));\n\nEDIT2:\n\nAfter 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.\n\nconsole.log('error', error);\nconsole.log('errorType', typeof error);\nconsole.log('error', Object.assign({}, error));\nconsole.log('getOwnPropertyNames', Object.getOwnPropertyNames(error));\nconsole.log('stackProperty', Object.getOwnPropertyDescriptor(error, 'stack'));\nconsole.log('messageProperty', Object.getOwnPropertyDescriptor(error, 'message'));\nconsole.log('stackEnumerable', error.propertyIsEnumerable('stack'));\nconsole.log('messageEnumerable', error.propertyIsEnumerable('message'));","confidence":0.95,"source":"stackoverflow","source_url":"https://stackoverflow.com/questions/38798451/how-to-catch-and-handle-error-response-422-with-redux-axios","votes":71,"created_at":"2026-04-19T04:51:33.563696+00:00","updated_at":"2026-04-19T04:51:33.563696+00:00"}