Handling Chrome console errors in JavaScript (XMLHttpRequest)

xmlhttprequest error handling
prevent 404 error in console
xmlhttprequest catch 404 error
javascript http request catch error
xmlhttprequest status 0
xhr status failed
xhr send catch error
xmlhttprequest status 0 chrome

So for over three days, I'm keep searching on how to get this error hidden from the console and respond to this error:

Failed to load resource: net::ERR_NAME_NOT_RESOLVED

Error image in the Google Chrome's console, that I want to hide and handle

Neither official chrome documentation helps. https://developers.google.com/web/tools/chrome-devtools/console/track-exceptions

Nor any tricks that I came along on the google search.

The JavaScript that produces this ineventable error to occur

(For quick testing of the handling solution)

<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
</head>
<body>
information: <div id="information" ></div>

<script>
	var httpRequest = new XMLHttpRequest();
	httpRequest.open("GET", "https://sdajfkljsdfk.lt", true);
	httpRequest.onload = function (e) {
		if (httpRequest.readyState === 4) {
			if (httpRequest.status === 200) {
				console.log(httpRequest.responseText);
			} else {
				document.getElementById("information").innerHTML = "Error Unresponsive Domain";
			}
		}
	};

	httpRequest.send(null);
</script>
</body>
</html>

Try doing this

httpRequest.open("GET", "https://sdajfkljsdfk.lt", true);
httpRequest.onload = function (e) {
    if (httpRequest.readyState === 4) {
        if (httpRequest.status === 200) {
            console.log(httpRequest.responseText);
        } else {
            document.getElementById("information").innerHTML = "Error Unresponsive Domain";
        }
    }
};
httpRequest.onerror = function (e) {
    document.getElementById("information").innerHTML = "Error Unresponsive Domain";
};
httpRequest.send(null);

Also you can take a look at this link if my answer is not clear enough. This one too

UPDATE

You're not going to be able to delete one specific error from the console. Only way to clear it is to try something like this:

httpRequest.onerror = function (e) {
    document.getElementById("information").innerHTML = "Error Unresponsive Domain";
    console.clear(); //clear console
};
httpRequest.send(null);

I also stumbled upon this but I don't know if it will help you.

Nothing appears in console if there is a registered error handler, or a flag indicating Chromium always displays HTTP 404s as errors in the Javascript console. I've setup a LOAD and ERROR event listeners for my XMLHttpRequest, but when I purposfully try to load a file that is missing, my ERROR event handler is never called.

It is now Oct 2018 and still no great solution for this problem.

Here is an active thread in a Chromium forum, last posts were from this month.

https://bugs.chromium.org/p/chromium/issues/detail?id=124534

Apparently many users do have the claim that 4xx response codes are expected and valid, and should be at least "catch-able" by some means.

Browsers also report a status of 0 in case of XMLHttpRequest errors. Example. var xhr = new XMLHttpRequest(); console. Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet; onerror: Chrome Full support Yes: Edge Full support ≤18: Firefox Full support Yes: IE Full support 10: Opera Full support Yes: Safari Full support Yes: WebView Android Full support Yes

You can't. The reason for network related errors is not exposed to JS. They are hidden just like Same Origin Policy violations.

(If it were possible, then a website could loop over a list of names used on private LANs (such as names used by Intranet servers and IoT devices), detect the errors and identify what devices were on the LAN. This information could then be used to launch further attacks.)

The XMLHttpRequestEventTarget.onerror is the function called when an true); xmlhttp.onerror = function () { console.log("** An error occurred  Handling responses. There are several types of response attributes defined by the living standard specification for the XMLHttpRequest() constructor. These tell the client making the XMLHttpRequest important information about the status of the response. Some cases where dealing with non-text response types may involve some manipulation and

This page is a reference of features related to the Chrome DevTools Console. Open Console Settings and enable Log XMLHttpRequests to log all For example, console.log() is in the Info group, whereas console.error() is in the Error group. For example, if https://example.com/a.js and https://example.com/b.js are  Camilo Reyes explains the best practices for proper error handling in JavaScript, including how to deal with errors thrown by asynchronous code.

Deprecations and removals in Chrome 84 · New in Chrome 83 · Handling Heavy Ad So long XMLHttpRequest If you've never used Promises before, check out Introduction to JavaScript Promises. An XMLHttpRequest would need two listeners to be set to handle the success and console.log('Fetch Error :-S', err); XMLHttpRequest is a built-in browser object that allows to make HTTP requests in JavaScript. Despite of having the word “XML” in its name, it can operate on any data, not only in XML format. We can upload/download files, track progress and much more. Right now, there’s another, more modern method fetch, that somewhat deprecates

You also want to have your browser console open so we can see the results of our HTTP The "Inspect" menu item when right-clicking in Chrome This new JavaScript file will create an XHR object and send a GET request to a JSON API. As with any other promise, fetch() errors are handled in the catch() method that's  JavaScript catches adddlert as an error, and executes the catch code to handle it. JavaScript try and catch The try statement allows you to define a block of code to be tested for errors while it is being executed. The catch statement allows you to define a block of code to be executed, if an error occurs in the try block.

Comments
  • What do you mean by respond to error? Are you trying to solve it? It's just literally telling you that this file https://sdajfkljsdfk.lt does not exist. It can't pull it from anywhere. Replace that with anything else (ex: https://code.jquery.com/jquery-3.2.1.min.js) it won't give you that error.
  • That error shows, that this domain is inaccessible, I want that after that error occurs - I could do some changes to the DOM, like: adding text to some part of the page that the domain is not responsive.
  • It is impossible to hide the network error that appears in the console other than by simply not having a network error.
  • This actually really clear usage of object.onerror event listener. Thank you very much for that. However, the error still stays in the console even through I handled it using onerror listener. One of the quick solutions came into my head: is to use console.clear(); method. I succeeded in geting rid of that error by clearing everything in the console. But I don't want that the console had that "Console was cleared." showed up. Also I don't want that everything would be cleared up, only this single error that I handled.
  • I don't see how Delete command could be relevant to clearing that unnecessary "GET sdajfkljsdfk.lt net::ERR_NAME_NOT_RESOLVED" error from the console log. It is not like you can delete onerror method and the error will be gone. I was having a though, that maybe exporting console log, filtering it and then importing might be good idea. However I have little doubt that importing console log might be impossible.
  • You can't delete one specific error from the log, only way to do it is to clear the whole log see updated answer @user3789797
  • That's for sure, and that's why it is getting harder and harder to solve this solution fully. I do think that there might be a hard and very resources consuming way to do this. I very doubt it's worth it. However partly solution you suggested on this post earlier is great, at least i can respond to the error right now.
  • But that error message in the console, might cause a lot of trouble. As it is not needed, but some developer months from now, will wonder why there is this error, editing such code, and it will turn out that the error is useless and uncessary. However, the time will be already spent on solving and checking that error.
  • Could you share some related links on this topic and how did chrome's developers decided to use this short of "common sense" solution. That would be helpful to have some sources on this. It's simple, but also interesting to know more about this descision.