Axios Stop 404 error appearing in the console.log

Question

I am checking to see if a resource exists via Axios, it is normal to expect a 404 to be returned if it is not present.

But, when the 404 is returned, it is displayed in the console. I have tried to catch the error, but this does not prevent it from being displayed by chrome.

        axios.get('/api/user/checkin').then((response) => {
            Vue.set(UserStore,'checkin', response.data)
            this.loading = false;
        }).catch((error) =>{})

I am checking to see if the user is checked if they are I will return a record of when they checked in and some details on the site.

If they are not then I have nothing to return so I am returning a 404. I could return a blank record but that does feel very restful.

it is natural for a browser to indicate an network request error. — moodseller, Jun 06 '20 at 12:57
I believe there is a filter in the Chrome console to filter out any `Network Requests`, you can just uncheck it and it will stop showing you this. — Danyal, Jun 06 '20 at 15:34

Ahmed Ibrahim Mah. · Answer 1 · 2020-06-06T14:46:14.230

This is a chrome behavior. see this and also this.
You can do console.clear() in catch as suggested by this answer.

axios.get('/api/user/checkin')
  .then((response) => {
    Vue.set(UserStore,'checkin', response.data)
    this.loading = false;
  })
  .catch(() => console.clear()) // this will clear any console errors caused by this request

or
.catch(console.clear) for short.

But be aware that you will lose any previous console logs.

Edit:

You may want to clear the console when you receive a 404 response only.

axios.get('/api/user/checkin')
  .then((response) => {
     Vue.set(UserStore,'checkin', response.data)
     this.loading = false;
  })
  .catch((error) => {
    if(error.response && error.response.status === 404) {
      console.clear();
    }
  })

Refer to handling errors in Axios for more.

score 2 · Answer 2 · answered Jun 06 '20 at 15:37

Instead of doing console.clear which would clear your whole console making it difficult to show logs that you actually need. Try checking the Hide Network option in the Chrome console options. It will hide all the network errors for you, which are probably the only thing showing from the network in console.

e.g.

Unchecked:

Checked:

Axios Stop 404 error appearing in the console.log

2 Answers2