Not able to get error message in axios .catch

Question

I'm using React-native version 0.62.2, Axios version ^0.19.2 express version ^4.17.1

In express im using

 if (!user) {
  return res.status(404).send({email:'email not exist'})
}

But the thing is on front end (react-native) side using axios,i'm getting following in catch: [Error: Request failed with status code 404] and not the err.response

code on react-native side using axios

   export const onLogin = userData => {
  return dispatch => {
    dispatch(onFetching());
    Axios.post(`${Routes.login}`, userData)
      .then(res => {
       console.log(res)
      })
      .catch(err => {
        console.log(err)
      });
  };
};

so am i doing anything wrong here?

Can you update your post with a minimal working example demonstrating your problem

import axios from 'axios'



const instance = axios.create({
    timeout: 1000,
    validateStatus: function validateStatus(status) {
        let default = status >= 200 && status < 300
        let extra = status == 404
        return default || extra
    }
});


export default instance;

so whats exactyly happening hear his

Answer 1

But the thing is on front end (react-native) side using axios,i'm getting following in catch: [Error: Request failed with status code 404] and not the err.response

That's working by design, when the status code of a response is not in the range of 200-299 by default it throws an error.

You can change this default by overwriting validateStatus in axios.create. For example to accept the default allowed status code range + 404:

const instance = axios.create({
    ...
    validateStatus: function validateStatus(status) {
        let default = status >= 200 && status < 300;
        let extra = status == 404
        return default || extra
    }
});

Then axios will not throw an error even if status code is 404.

This is not recommended though, status code not in 2xx are meant to be handled as errors. To get the response you should use

• .then(err => console.log(err.response), which in your case will be {email:'email not exist'}

Axios default validateStatus:

  validateStatus: function validateStatus(status) {
    return status >= 200 && status < 300;
  }

Axios error properties: error, config, code, request, response

You can check the defaults of axios here: https://github.com/axios/axios/blob/6642ca9aa1efae47b1a9d3ce3adc98416318661c/lib/defaults.js#L79

createError: https://github.com/axios/axios/blob/master/lib/core/createError.js

Update 2:

But where to use this instance variable on react-native side right.

Yes, you can put it in a seperate file and then import it. Then whenever you want to use axios with the options configured here you can import the already defined instance instead of passing down multiple options to axios everytime.

For example:

utils/axios.js

const instance = axios.create({
    ...
    validateStatus: function validateStatus(status) {
        let default_ = status >= 200 && status < 300;
        let extra = status == 404
        return default_ || extra
    }
});
export default instance;

Then instead of using: import axios from "axios"; use import axios from "./utils/axios";