Catch a 404 error for XHR

Question

Basically, I had to create a javascript APP object, which will queue an sequence of asynchronous requests for the server, process response to JSON, and log errors from it.

JSON processing errors were caught easily with "try-catch", but server errors like 404, 500 etc. are still shown in the console of the browser, while I need to silently log it in "APP.history".

I tried to implement it via the code below, but none of 404 errors fires one error. What am I doing wrong?

xhr = new XMLHttpRequest();
xhr.open("GET", url, true)
xhr.onerror = function(){console.log("error")}  
xhr.upload.onerror = function(){console.log("error")}

By the way, how could it be done with jQuery AJAX?

Answer 1

A 404 status will not trigger xhr.onerror() because, technically it's not an error; the 404 itself is a valid response.

One solution is to use the loadend() handler, which fires no matter what. Then check the status for 404, or whichever status you're interested in.

xhr = new XMLHttpRequest();
xhr.open("GET", url, true);

xhr.onloadend = function() {
    if(xhr.status == 404) 
        throw new Error(url + ' replied 404');
}

The same method exists for XMLHttpRequestUpload. Unfortunately, our browser vendors don't allow us to programmatically suppress network errors in 2017. However, networks errors can be suppressed using the console's filtering options.