Set a code/status for "Network Error"

[jonathan-stone]

I'm trying to detect when my server is down so that I can display an appropriate error message to the user.

In this case, axios network requests throw an error which is different from all other axios errors, as discussed here: #204

In my code, it seems the only way to detect this error is to check err.message:
if (err.message === "Network Error"){/*tell user the server is down*/}

This bothers me because string comparisons are a little risky; perhaps some day this message will be translated, and my code will fail.

It would be great if err.status or err.code (or err.???) were set to some documented value that we can check for in our code.

Is there any other way to detect this scenario that I'm missing?
Thanks all!

[mzabriskie]

I think you're right. A status code would make sense.

[rubennorte]

As someone said in #204, there are some cases where it is impossible to catch network errors in the browser, so Axios responds with a generic error (new Error('Network error')). If you want to distinguish them from bad responses (status code !== 2xx or custom check) I think the best way is just checking the status property instead of the error message. E.g.:

axios.request(options).catch(function(error) {
  if (!error.status) {
    // network error
  }
});

I think setting a custom status code would be a bad idea (it could cause more confusion) and setting a specific property would not help at all because we only have a single error case.

Of course in Node.js is easier because you have access to the actual error and can check according to the Node.js documentation.

[jonathan-stone]

Ah, so any error thrown by an Axios call is guaranteed to either 1) have a status, or 2) be a generic network error? I suppose that's good enough.

[ShivakumarRavi]

So far, I cant able to get the error code like 404,500.., Still I am getting Network Error. How to solve this?
instance.post('/foo', {request_id : 12345})
.then(function(response) {})
.catch(function(error){
console.log(error); // Network Error
console.log(error.status); // undefined
console.log(error.code); // undefined
});

[jonathan-stone]

Network Error means Axios couldn't connect to your server at all, so it can't get any error code from the server. Maybe try it with another tool (curl, postman, or a browser) to ensure you can connect to it?

[ShivakumarRavi]

I can able to connect with my server, it actually returns 404 Error code and with some other API calls server returns 500 Internal server error, but still i can't able to get the network error code through scripting(i.e.,console.log(error.status); // undefined ).

[jonathan-stone]

It's in error.response.status.

[fgiarritiello]

I'm having this issue. Can anyone help me please?

The server response is 401 but axios gives me this:

error --> "Network Error"
error.response --> undefined
error.status --> undefined

[jonathan-stone]

When error is "network error" that means Axios coudn't connect to your server, or for some reason does not get the response from your server. So that 401 error is never making it into Axios. Maybe post a question with some sample code on StackOverflow?

[codygreen]

Ran into this when using AWS API-Gateway. For anyone seeing the same issues it's a problem with 4xx errors (in my case a 401) not responding with the CORS headers. Spent hours troubleshooting this damn issue! Thanks @jonathan-stone for pointing my troubleshooting in the right direct.

[fgiarritiello]

@codygreen I'm still having this issues and I ran into this https://forums.aws.amazon.com/message.jspa?messageID=763752

Have you found a workaround?

[diegorodriguesvieira]

Does anyone have any solutions to this problem?

[joelnet]

My problem was with Jest+ Axios. I solved it by adding this to my package.json:

"jest": {
    "testEnvironment": "node"
}

[hammadzz]

This works, although I can't seem to find documentation to support it. I am assuming that error.response should be empty on a network error otherwise it is an api error.

axios.request(options).catch(function(error) {
  if (!error.response) {
    // network error
  } else {
    // http status code
    const code = error.response.status
    // response data
    const response = error.response.data
  }
});

[rexgama]

Did anyone find a best solution about this? Axios people make some noise :(

[samayo]

I also got this error today, I don't know what the problem is, this is my script:

   var url = "http://localhost:8000/";
   Axios.get(url).then(function(response){
     alert(response)
   }).catch(function(error){
     alert(error)
   });

http://localhost:8000/ returns a JSON response, this does not work on other hosts

[irfanevrens]

It might be a Cors Error.

[dcshiman]

Line 87, it has been set to 'Network Error' in the xhr adapter ? how to change this so that the error can be caught ?

axios/lib/adapters/xhr.js

Lines 84 to 91 in d7f021b

	request.onerror = function handleError() {
	// Real errors are hidden from us by the browser
	// onerror should only fire if it's a network error
	reject(createError('Network Error', config, null, request));
	// Clean up request
	request = null;
	};

[dcshiman]

My bad, its not an issue but expected behavior due to browser security. XHR error responses now receives an ProgressEvent on error status codes.

[amir-beheshty]

I'm having the same issue. I believe it's an issue with CORS. Has anyone found a good solution for this?

[hammadzz]

@codygreen did you manage to fix your issue with API Gateway? Can't even figure out the response status code to help me debug further.

[juanp123]

Same general problem here. For me it was definitely CORS. Browser was making OPTIONS requests to the server and I didn't have a handler setup for them (in node). Axios would complete the (failed) request successfully but with an undefined response

      return axios.httpClients.server.post('/someUrl, {
        someData:some_data
      }).then(response => {
        console.log(response);
        //the following errors out because response is undefined
        if (response.data && response.data.success === true) {
        }
      }).catch(err => {
           //catch never triggered
            console.log(err)
      });

[dcshiman]

What is your response code of the response? if it's a network error, when using the Fetch API browsers will log it to the console but not pass it to JavaScript for security reasons hence the body is empty. See FETCH STANDERS, if you want to access the network errors of the response, change the HTTP response code to 200 and include the error message in the body of the response.

[hammadzz]

My problem was a dns issue. It worked in postman but failed in axios. Tried a curl to find out that it was also failing there. So my DNS was not configured correctly. Check that if you run into this issue.

[ComputerCarl]

I don't know if this helps you, but I had created an application which was proxying requests. The framework I was using was gobbling up the Express error. Finally, after explicitly forwarding the error res.send({ message: messageFromProxy });, I was able to see an error and deal with it on the client.

Good luck.

[balwant-sd]

@jonathan-stone said, Network Error means Axios couldn't connect to your server at all, so it can't get any error code from the server.

may be this will help someone.

error.data ;

[ketysek]

@balwant-sd as you can see on the screenshot I've sent here, the browser correctly recognises the 413 status code, but axios doesn't

Even in network tab I can see 413 status code...

[dkagle]

As mentioned above a Login POST that returns a 401 error returns just 'Network Error' with code as undefined instead of 401.

[Falkyouall]

So this error seems to be a misconfigured CORS error which reflects just on your network tab. I have the same issue as @ketysek, and it seems that my ngnix is not applying CORS for this. As before mentioned, a generic network error will never make it into axios error.response. Here i like to blame the Backend.. oh wait, i did that...

[amitjoshi2188]

Hello i am also having same issue, even request getting proper response axios always return "Network Error" and goes to .catch(function(error) {}); par. is any one having solution for this problem ?

[koladev32]

I had the same problem today. This issue is mostly about the backend not allowing origins cross site HTTP requests. In my case, I am using django so I just placed the corsheaders class as high as possible to the MIDDLEWARE :
MIDDLEWARE = [ 'corsheaders.middleware.CorsMiddleware', //..etc ]
And I created a CORS_ORIGIN_WHITELIST to only allow certain origins :
CORS_ORIGIN_WHITELIST = [ "http://localhost:8081" , //..etc ]
This is for django-cors-headers. If you are not a django user, you should check the documentation of your favorite cors headers module.

[ErAz7]

As someone said in #204, there are some cases where it is impossible to catch network errors in the browser, so Axios responds with a generic error (new Error('Network error')). If you want to distinguish them from bad responses (status code !== 2xx or custom check) I think the best way is just checking the status property instead of the error message. E.g.:

axios.request(options).catch(function(error) {
  if (!error.status) {
    // network error
  }
});

I think setting a custom status code would be a bad idea (it could cause more confusion) and setting a specific property would not help at all because we only have a single error case.

Of course in Node.js is easier because you have access to the actual error and can check according to the Node.js documentation.

the problem with this approach is let's say we run some code in axios.then and the code has some error, for example "assignment to constant" (which was my case), with the approach you mentioned, we will get network error for "assignment to constant"

code example :

axios(options).then(() => {
  const foo = '';
  foo = 'bar'; // will throw error "assignment to constant"
}).catch(error => {
  if (!error.status) {
    // "assignment to constant" will be considered as network error
  }
})

[mifi]

I use this utility function to catch network errors from lower in the call stack (prevents identifying non-axios errors as network errors):

function isNetworkError(err) {
  return !!err.isAxiosError && !err.response;
}

See #1419

[ErAz7]

I use this utility function to catch network errors from lower in the call stack (prevents identifying non-axios errors as network errors):

function isNetworkError(err) {
  return !!err.isAxiosError && !err.response;
}

See #1419

Solved the problem
Thanks

[hwhelchel]

@mifi can you show a more detailed example of how you're using isNetworkError to prevent identifying non-axios errors as network errors?

[mifi]

Just like this:

try {
  ...
  some code that calls axios
  ...
} catch (err) {
  if (isNetworkError(err)) return alert(‘check your connection);
  throw err;
}

[webjay]

If it's a CORS error and you use Serverless, this can fix it:

resources:
  Resources:
    # CORS for 4xx errors
    GatewayResponseDefault4XX:
      Type: 'AWS::ApiGateway::GatewayResponse'
      Properties:
        ResponseParameters:
          gatewayresponse.header.Access-Control-Allow-Origin: "'*'"
          gatewayresponse.header.Access-Control-Allow-Headers: "'*'"
        ResponseType: DEFAULT_4XX
        RestApiId:
          Ref: 'ApiGatewayRestApi'

[estellederrien]

hello, can somebody help me , 'NETWORK ERROR':
https://stackoverflow.com/questions/58717673/axios-sending-network-error-while-status-is-200-ok

[narenderv7]

When error is "network error" that means Axios coudn't connect to your server, or for some reason does not get the response from your server. So that 401 error is never making it into Axios. Maybe post a question with some sample code on StackOverflow?

I'm also getting the same error, For me, It reaching the server and I'm responding with 403 and a JSON, which results in the Network Error in the Axios

I'm able to see the response in the browser network tab, but in the catch block err.response is undefined

[WarisR]

@narenderv7 me too

[narenderv7]

@WarisR I have fixed this by allowing cors on the server-side. I thought Axios issue but actually it isn't. I can help you if you let me know the issue that you're really facing.

Add in the server 'Access-Control-Allow-Origin': '*'

[abdelaziz321]

@ketysek I'm having the same error

did you find a way to catch this error?

[Popov-VV]

Hi guys, i have problem CORS error where was getting response with status 403 (4** & 5**)
Nginx sending header "Access-Control-Allow-Origin" only for response status 2** & 3**.

i resolve this problem edit nginx config from:
add_header 'Access-Control-Allow-Origin' '*';
to:
add_header 'Access-Control-Allow-Origin' '*' always;

[hnrqsss]

I have the same issue i'm test it using axios 0.18.0 and 0.19.0

Steps:
i made i request with expired token sometimes the error.response came correctly, but sometimes the error response came undefined and the message is 'Network error'. Why is this happens thats a backend error or a bug in axios?

[kenberkeley]

Sometimes it may be caused by the AD blockers in your browser ...
Try incognito or private mode, or download a new browser to test ...

[WarisR]

@narenderv7 Yes, it's server side mistake. But I think Axios should be able to handle an error of this case, right?

[luatnd]

I need to distingue those two cases:

• POST https://xxx.com/sendMessage net::ERR_NAME_NOT_RESOLVED
• POST https://xxx.com/sendMessage net::ERR_INTERNET_DISCONNECTED

As I checked. error return by the catch block is the same in both cases above.

There still an issue:
#1296

[Ouael-Ben]

The Error still Exist , if any anybody has a solution for this issue Share with us please.

[angus96]

I use this utility function to catch network errors from lower in the call stack (prevents identifying non-axios errors as network errors):

function isNetworkError(err) {
  return !!err.isAxiosError && !err.response;
}

See #1419

the timeout error can also match those conditions.