How do display actual network error to user when using XMLHttpRequest?

Question

XMLHttpRequest.status is typically just '0' if some network type error has occurred trying to make an Ajax/XMLHttpRequest call. But surely there should be a way of telling the user exactly what the network error was, e.g. whether the DNS resolution failed, or the connection was actively refused, or even whether the connection was made but then aborted before any valid HTTP response was sent? I.E. at least prints out some extra info in the JavaScript console, e.g.

SCRIPT7002: XMLHttpRequest: Network Error 0x2efd, Could not complete the operation due to error 00002efd.

But it's hardly very friendly, and I can't see how to query that info from javascript to translate into something I can show to the user.

I don't mind if it has to be implemented differently for different browsers, but I'm struggling to see any way of fetching in this information at all currently.

BTW at a minimum I'd want to be able to distinguish:

• a) no internet connectivity (e.g. wifi disconnected)
• b) DNS failure (can't resolve the name)
• c) couldn't establish TCP connection to server (either actively refused or timed out)
• d) invalid response (not an HTTP response)
• e) SSL certificate failure

In any case where a valid HTTP response IS returned, but is not status 200 OK, it's fine - I can get a sensible error message to display to the user. But for anything else there doesn't seem to be a way to distinguish the various possible types of errors. In my application the user is responsible for supplying the address to make the Ajax requests to, so if they get it wrong I want to be able to tell them why the request is failing.

Answer 1

Handling onerror of XHR helps you more here with the actual details that what has gone wrong; you can as well try ontimeout handler to catch specifically if it is getting timed out; and also as mentioned by @dandavis before XHR you can as well check for navigator.onLine to avoid any no network situation before calling XHR. A simple stub here:

function makeRequest() {
    if(navigator.onLine){
    let xhr = new XMLHttpRequest();
    xhr.open('GET', 'someurl/somepage', true);
    xhr.timeout = 2000;
    xhr.onload = function () {
        // Your request is completed
        if (xhr.readyState == 4 && xhr.status == 200) {
            //successful
        }
    };
    x.onerror= function(e) {
    //Error occured, e will give you more information
    };
    xhr.ontimeout = function (e) {
        // Your request timed out
    };
    xhr.send(null);
  }
  else{
    alert('No network connection');
  }
}

Answer 2

You'd better dig into the onerror event of XMLHttpRequest instance

xhr.onerror = function(e) {
   if(e matches stuation 1) {
      console.log('no internet connectivity (e.g. wifi disconnected)');
   } else {
      //...other conditions
   }
};

It may somehow difficult to judge what the exact type of error occurs, just try check e.message or something else.

Notice that a status code != 200 will not trigger the onerror event but the onload event. handle it carefully