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.

Answer 1

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.