Unable to catch and log the Error response from an axios request

Question

I am having a axios request in my react application, for which I am following the axios npm docs.

This is my axios request

 axios.post(helper.getLoginApi(), data)
        .then((response) => {
            console.log(response);

            this.props.history.push(from.pathname)
        })
        .catch((error)=> {
            console.log(error);
        })

I am able to successfully log the data on a successful request. However When I intentionally produce an error and try to console.log it, I don't get the result logged instead, I just see

POST http://localhost:3000/login 401 (Unauthorized) :3000/login:1
Error: Request failed with status code 401 login.js:66

at createError (createError.js:16)

at settle (settle.js:18)

at XMLHttpRequest.handleLoad (xhr.js:77)

However when I go to Network Tab in Chrome Console, I can see the below response returned.

Thanks for help in advance .

Have you tried wrapping your axios into a try {} catch(e) {} statement? Have you tried checking the response.status inside then? Just some ideas - I don't know why it won't work — lumio
@lumio, as I said, in .then , I am able to successfully log response.data but not in the .catch block — Jagrati
Even though I use axios by myself I'm not sure if axios always fails when status isn't 2xx. Have you tried throwing an error inside then when response.status is not 200? — lumio
I haven't tried that, I will do that once I try the answer posted by @ShubhamKhatri and if it doesn't work — Jagrati

Shubham Khatri Shubham Khatri · Accepted Answer · 2017-06-28T15:13:00

From the Github Docs. The response of an axios request looks like

{
  // `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
  // All header names are lower cased
  headers: {},

  // `config` is the config that was provided to `axios` for the request
  config: {},

  // `request` is the request that generated this response
  // It is the last ClientRequest instance in node.js (in redirects)
  // and an XMLHttpRequest instance the browser
  request: {}
}

So essentially catch(error => ) is actually just catch(response => )

and so you can log error.response.data and you should be able to see your response message.

When you log console.log(error), what you see is the string returned by the toString method on the error object.

According to the error handling section on the same docs, you can have the catch the error response like

axios.post(helper.getLoginApi(), data)
        .then((response) => {
            console.log(response);

            this.props.history.push(from.pathname)
        })
        .catch((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);
            }
        })

Unable to catch and log the Error response from an axios request

1 Answers