How to hide console status error message while fetching in React js?

Question

In my React app, I'm using fetch() to get data from my API, _callAPI() function gets domain parameter and call API if a website of the domain exists in my DB. If it exists, it returns the website's object, otherwise it returns 500. So, I can't figure out if the website exists until I use fetch(). The problem is that every time fetch() doesn't find anything, it throws the following:

container.jsx:25 GET http://localhost:3000/boutiques/detail/?q=testdomain.com 500 (Internal Server Error)

When it doesn't doesn't find a lot of websites, the console log is packed with that error message. Is there a way to ignore that sort of message while fetching?

fetch()

_callApi = () => {
    const { domain } = this.props;

    return fetch(`/boutiques/detail/?q=${domain}`)
      .then(response => {
        if (response.status === 500) {
          return 500;
        }
        return response.json();
      })
      .then(json => json)
      .catch(err => console.log(err));
  };

Answer 1

If you want to mute the browser error:

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

Credits.

If you want to mute the Unhandled error in the console:

You can always mute the error on front-end, as follows:

.catch(err => { const mute = err })

But it would be better to notify somehow the user about the error and not doing such workarounds.

Also it would better your server to return an error message in the response and on the front-end side you will proceed it.

Looking into your case, it may be better the server to response with status code 400. Here are the HTTP error codes and their purpose:

• 4xx (Client Error): The request contains bad syntax or cannot be fulfilled
• 5xx (Server Error): The server failed to fulfill an apparently valid request