How to catch NetworkError in JavaScript?

Question

In Chrome's JavaScript console, if I run this:

var that = new XMLHttpRequest();
that.open('GET', 'http://this_is_a_bad_url.com', false);
that.send();

I get an intentionally expected error:

NetworkError: A network error occurred.

I want to catch this, so I use:

var that = new XMLHttpRequest();
that.open('GET', 'http://this_is_a_bad_url.com', false);
try {
  that.send();
} catch(exception) {
  if(exception instanceof NetworkError) {
    console.log('There was a network error.');
  }
}

However, I get an error about NetworkError not being defined:

ReferenceError: NetworkError is not defined

How can I catch NetworkError?

Answer 1

I think what you meant was:

if(exception.name == 'NetworkError'){
   console.log('There was a network error.');
}

I don't believe the Error is an instance of NetworkError, but thrown in this manner:

throw {
   name: 'NetworkError',
   message: 'A network error occurred.'
   // etc...
}

Answer 2

I found this answer while looking for a way to examine a Network Error I got while using Axios, so if You are not using Axios, this answer is probably not for You.

The error object I receive through Axios has config, request and response attributes, and both the request and response have the status attribute. response object's attribute is displayed in the image below:

My axios configuration looks like this:

this.client = axios.create(options);
this.client.interceptors.response.use(this.handleSuccessResponse, this.handleErrorResponse);
this.unauthorizedCallback = () => {};

and the handleErrorResponse method is:

handleErrorResponse(error) {
  // use the information from the error object here
}

---

EDIT: As suggested by @Erdős-Bacon:

If You are using axios and nginx, this might be the comment for You. I had issues with error.response being undefined, turned out it was because of CORS issue. Had to setup my nginx config to keyword always add appropriate headers to solve CORS, otherwise headers get stripped on error responses, so CORS issues crop up. See this answer for more info.

Answer 3

With axios I use the following code:

if (error.message === 'Network Error') {
   console.log('There was a network error.');
}

Answer 4

Look into the onreadystatechange event. You can get the status of the response.

Answer 5

exception.name returns 'Error' even on network errors a better way can be checking if error has url config like this :

if(exception.config && exception.config.url){
  // network error
} else {
  // other errors
}