how to detect err_name_not_resolved with javascript?

Question

I am currently developing a google chrome extension that gathers information about webpages that the user visits. Currently, my plugin is able to handle 2xx, 3xx, 4xx, and 5xx status codes. However, I also need to detect when a website does not exist, and I get the error code ERR_NAME_NOT_RESOLVED. How do I do this in javascript? It seems as though my XMLHttpRequest cannot even be triggered on sites that don't exist. How do I fix this?

Answer 1

TL;DR: xhr.onerror should be what you're looking for, with a caveat.

So, the error you get you can get that when your computer has no connection, and I think if you can't connect to your device's DNS server. It's a failure of trying to initiate the XHR basically.

It would appear that the display of the error in the console might not be preventable by design, if you want to try to catch it you can use the .onerror of your xhr. Try-catch doesn't seem to work for me, despite it seemingly like it should -- might have to do with its asynchronous nature? Not sure.

Also keep in mind that .onload runs even if there's an error, even though it may not seem like it due to the lack of a connection existing.

If you have a connection to your DNS server and the resolved site simply doesn't exist, your xhr state should be 404 and this error should not appear, while if you don't have a connection/can't connect to the DNS server the xhr state should be 0 and the error should appear.

Sample code:

// you can assign a function because javascript
// in this example, we are using an anonymous function
const xhr = new XMLHttpRequest();
xhr.open('POST', '/');
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

// error handler example
xhr.onerror = () => {
    alert('error');
    console.log(xhr);
};

// needs to call as anonymous function to work right
xhr.onload = () => { handleResponse(xhr); };

xhr.send('example.com/action?input=yes');

As I was mentioning above, because both .onload and .onerror are run (in that order), I prefer to just make my onload function handle both errors and successes, hopefully this should work for you.

const handleResponse = (xhr) => {
  if (xhr.state === 200) {
    alert('you win');
  } else {
    alert('error');
  }
};

Answer 2

XMLHttpRequest's onreadystatechange listener is fired 2+ times here for existing sites and only one time with status property equal to 0 for non-existent sites, so this code works for me:

function xhrGetStatus(url, callback) {
    var xhr = new XMLHttpRequest();
    xhr.open('HEAD', url);
    xhr.onreadystatechange = function(e) {
        xhr.onreadystatechange = null;
        callback({status: xhr.status, statusText: xhr.statusText});
    };
    xhr.send();
}

xhrGetStatus('http://abc123.com', function(r) {
    console.log(r.status ? r.status : 'No such site?');
});