fetching from a URL shows an error in console even after catching it?

GoldCredential

Suppose, I have this function with a wrong 'uri' string provided to fetch:

function imgChanger(uri) {
    fetch('uri', { mode: 'cors' })//WRONG 'uri' to demonstrate that catch doesn't prevent console's red error
        .then(function (response) {
            if (!response.ok) {
                throw new Error(response.statusText);
            }
            return response.json();
        }).then(function (response) {
            img.src = response.data.images.original.url;
        }).catch((err)=>{
            console.log(err);
        });
}

Despite handling the error, I can see a 404 message in the console:

enter image description here

I have two questions regarding this: why is it being shown despite catching it and how do I handle it?

raina77ow

I'm afraid there's little you can do here. There's an Issue 124534: Provide a way not to display 404 XHR errors in console open in Chromium almost 10 (!) years ago:

Chromium always displays HTTP 404s as errors in the Javascript console. Apart from forcing line noise onto developers when they may not want it (404s can be spotted easily in the 'Network' tab), I think this actually goes against the spirit of HTTP. If you have a telephone direcotry lookup, for example, and you GET http://myHost/directory/numbers/12345678

... the server should respond with a 404 if that number was not in the directory. This is even really an 'error' in my opinion - it's just information. Why should Chromium display this as an error in the console?

And as you can see, it's still open (and is essentially treated as 'by design'). Here's another telling quote:

8 years gone by and I still cannot control how a client responds to a request. Our in-house API's have been changed to always respond with 200, with a custom status field to correctly filter what is an actual error and what is just simply not there.

It's painfully moronic that we have to move away from REST to actually use a semantic status.

But rejoice! there seems to be a discussion open in 2021, so hopefully we'll get things moving in the end. Now, unfortunately, it's not that easy:

There seems to be general agreement that it would be preferable to remove these error messages from the console. But it is also very likely that currently a lot of DevTools users depend on these error messages in their workflow. We have not yet found a way to reconcile these 2 sides.

And now the obligatory xkcd comic:

enter image description here

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

Why does fetch return even after catching an error?

console log of returned value shows a unusable response even after chaining a then to it

Node.js UnhandledPromiseRejectionWarning even after catching it

hive application shows running even after killing from command line

Node JS Fetching JSON from url is executing AFTER the rest of the code

Observable stops firing even when catching the error

Fetching metadata from url

Why Gitbash console shows my user Chopped as the default Windows Username even after I changed it?

console log shows old value even after updating it inside .then method in JS

Why MongoDB is fetching documents from disk after a sort even when the used index contains all fields on the query

fetching from local server in react shows impossible

Why does console give errors after fetching data from API Angular

Java JSoup error fetching URL

Observable continues to retry subscription after catching error

Executing a code block even after catching an exception in Scala

node fetching json from url

Fetching Images URL from wikipedia

Fetching data from an API - Console Repeats

React native app shows an error saying that key will be undefined even after providing a key

After converting from C# to vb.net it shows an error

after logout from users account all page shows error

CATCHING URL FROM ROUTE // php laravel

Error fetching data from website

After deploying to netlify one page of react project is not showing. Console shows error "TypeError: Object(...) is not a function"

Git shows differences even after `push --force`?

Shows tons of vlc application even after removing it

How can i change the URL string i'm fetching from after each fetch?

Is "catch(console.error)" a valid way of catching Promise rejections?

.catch() is catching all errors even from another promise by fetch()