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?

score 29 · Accepted Answer · answered Nov 27 '13 at 01:08

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 '13 at 01:08

Rob M.

35,491
6
51
50

1

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? – Synthead Nov 27 '13 at 22:26
2

Afaik chrome console shows all failed requests in this manner, catching the error will prevent breaking your code – Rob M. Nov 28 '13 at 00:12
4

In Firefox the name of the error is `TypeError` but the message says `NetworkError when attempting to fetch resource` – Pier Sep 17 '19 at 19:31

Aleksandar · Answer 2 · 2020-04-27T11:57:12.160

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 '20 at 11:57

answered Jan 23 '19 at 14:22

Aleksandar

3,558
1
39
42

3

FWIW, my axios network errors have a request status of 0, and the response object is undefined. – Dylan Smith Jul 31 '19 at 18:00
@DylanSmith are You sure You are checking in the right place? Or catching it the right way? – Aleksandar Aug 01 '19 at 06:58
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. – Dylan Smith Aug 01 '19 at 17:25
Well, that is a special case that You now know how to deal with :) – Aleksandar Aug 02 '19 at 11:03
2

@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`. – JackLeEmmerdeur Oct 21 '19 at 03:09
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](https://stackoverflow.com/a/16308982). – Erdős-Bacon Apr 25 '20 at 01:50
When using Axios, you can also check if the "Network Error" is contained in error.toString(). error.toString() returns "Error: Network Error". – foske Aug 25 '21 at 09:52

score 2 · Answer 3 · answered May 14 '22 at 13:05

2

With axios I use the following code:

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

answered May 14 '22 at 13:05

Alwin

786
9
19

other answer suggests it should be `error.name` and not `.message` – Mugen Dec 21 '22 at 07:21
@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. – Alwin Dec 21 '22 at 07:34

score 0 · Answer 4 · answered Nov 27 '13 at 01:10

0

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

answered Nov 27 '13 at 01:10

NaNpx

530
3
7

2

readystate doesn't change until after send() is called, but the send() call is what's generating the exception. – broofa Nov 27 '13 at 04:27

How to catch NetworkError in JavaScript?

4 Answers4

Linked