How to catch and handle error response 422 with Redux/Axios?
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.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'));
Get this solution programmatically \u2014 free, no authentication.
curl https://depscope.dev/api/error/f5542195c746610d5764bef5ba2359fadf2af56b7a46d3359b14509032c05c07