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?

Rob M. · Accepted Answer · 2013-11-27 01:08:55Z

29

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...
}

answered Nov 27, 2013 at 1:08

Rob M.

36.6k6 gold badges56 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Synthead Over a year ago

This works great. I should also ask: In Chrome's JS console, it still shows "GET (url)" with a red X to the left of it while tallying the error on the bottom-right of the console. Is there a way to catch this too?

Rob M. Over a year ago

Afaik chrome console shows all failed requests in this manner, catching the error will prevent breaking your code

Pier Over a year ago

In Firefox the name of the error is TypeError but the message says NetworkError when attempting to fetch resource

Aleksandar · Accepted Answer · 2020-04-27 11:57:12Z

7

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.

edited Apr 27, 2020 at 11:57

answered Jan 23, 2019 at 14:22

Aleksandar

4,2341 gold badge46 silver badges46 bronze badges

7 Comments

Dylan Smith Over a year ago

FWIW, my axios network errors have a request status of 0, and the response object is undefined.

Aleksandar Over a year ago

@DylanSmith are You sure You are checking in the right place? Or catching it the right way?

Dylan Smith Over a year ago

I think so. The condition I'm working with is that the server is inaccessible (similar to the OP), so there is no response, so it makes sense that it would be undefined.

Aleksandar Over a year ago

Well, that is a special case that You now know how to deal with :)

BoomZilla Over a year ago

@DylanSmith Upvote. You're right. The answer is not suited for axios, cause result.name is always "Error" for me with axios errors. Checking if result.response is undefined is suited for checking network errors below layer 5. Also the result contains the boolean value isAxiosError.

|

Alwin · Accepted Answer · 2022-05-14 13:05:26Z

2

With axios I use the following code:

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

answered May 14, 2022 at 13:05

Alwin

1,10715 silver badges25 bronze badges

2 Comments

Mugen Over a year ago

other answer suggests it should be error.name and not .message

Alwin Over a year ago

@Mugen Yeah, but when I tested it only the official XMLHttpRequest provided error.name. With the axios package only error.message was provided. That's the reason for writing my answer.

NaNpx · Accepted Answer · 2013-11-27 01:10:28Z

0

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

answered Nov 27, 2013 at 1:10

NaNpx

5303 silver badges7 bronze badges

1 Comment

broofa Over a year ago

readystate doesn't change until after send() is called, but the send() call is what's generating the exception.

Collectives™ on Stack Overflow

How to catch NetworkError in JavaScript?

4 Answers 4

3 Comments

7 Comments

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

7 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related