Hide 401 console.error in chrome dev tools getting 401 on fetch() call

javascript xmlhttprequest fetch-api
ThinkBonobo picture ThinkBonobo · Jan 6, 2017 · Viewed 10.8k times · Source

I have some code where i make a fetch call. This takes advantage of window.fetch api built into modern chrome / firefox.

The code sometimes hits a 401:unauthorized response. This is normal and I want it ignored, which I can do with the flow of the code. However, Chrome does show an unsightly console.error message when I try to run it.

How can I PROGRAMMATICALLY prevent this console error from showing in the dev console on all machines (i.e., no chrome dev filters or tampermonkey type plugins).

here's a sample to work off of:

fetch("http://httpstat.us/401", {requiredStatus: 'ok'})
    .then(function() {
        console.log("pass!");
    }).catch(function() {
        console.log("fail!");
    });

enter image description here

Answer

joepin picture joepin · Mar 23, 2017

Unfortunately, this cannot be done, as this type of message in the console is printed by chrome itself. Repressing this type of message has been debated for years, but the consensus seems to be that this message is desirable - see this discussion.

Just in case you're interested: As per this comment, the reason we're seeing this message is because the response to resource retrieval requests is evaluated, and messages are dispatched at the context level.

Essentially, the way chrome was written does not allow us to change this effect, and thus we have the error messages.

Related questions

Fetch API vs XMLHttpRequest

I know that Fetch API uses Promises and both of them allow you to do AJAX requests to a server. I have read that Fetch API has some extra features, which aren't available in XMLHttpRequest (and in the Fetch API …

Read More
fetch - Missing boundary in multipart/form-data POST

thanks for stopping by. I want to send a new FormData() as the body of a POST request using the fetch api the operation looks something like this the problem here is that the boundary, something like boundary=----WebKitFormBoundaryyEmKNDsBKjB7QEqu …

Read More
set withCredentials to the new ES6 built-in HTTP request API : Fetch

How to set withCredentials=true to fetch which return promise. Is the following correct : fetch(url,{ method:'post', headers, withCredentials: true }); I think the MDN documentation talked about everything about http-requesting except this point: withCredentials

Read More