CODEWITHSUNDEEP
javascriptvue.jsaxios
JaChNo
JaChNo

Reputation: 1563

Axios Stop 404 error appearing in the console.log

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.

Upvotes: 12

Views: 8133

Answers (2)

Danyal
Danyal

Reputation: 860

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:

enter image description here

Checked: enter image description here

Upvotes: 2

Ahmed Ibrahim Mah.
Ahmed Ibrahim Mah.

Reputation: 316

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.

Upvotes: 7

Related Questions