CODEWITHSUNDEEP
vue.jserror-handlingaxiosinterceptorhttp-status-code-401
Taras Kryvko
Taras Kryvko

Reputation: 177

Prevent logging errors to console when using Axios interceptor

I've implemented axios interceptor in my VueJs project, which looks like this: 

      axios.interceptors.response.use(
    async (response) => {  
      return response;
    },
    async (error) => {

      const originalRequest = error.config;
      const isPublicUrl = [
        '/account/login',
        '/account/register' 
      ].some(url=> originalRequest.url.includes(url)); 
      if(isPublicUrl){
        return Promise.reject(error);
      }
      if(error.response.status!==401){ 
        return Promise.reject(error);
      }
      const token:TokenOpts =  store.getters['auth/getToken'];
      try{
        const res = await AuthService.refreshToken(token); 
        const newToken = res.data;
        store.dispatch('auth/refreshToken',newToken);
        originalRequest.headers.Authorization = `Bearer ${newToken.accessToken}`; 
        const originalResponce = await axios.request(originalRequest); 
        return Promise.resolve(originalResponce); 
      }
      catch(error){ 
        return Promise.reject(error);
      } 
    }
    )

I can refresh my token and then send original request, here no problems. My problem is that when I intercept an error, and end up inside error handler: async (error) => { HERE ... I already have an error in Chrome console. How can I prevent logging this error into the console?

enter image description here

Upvotes: 3

Views: 3366

Answers (1)

Gowthaman
Gowthaman

Reputation: 1282

This has nothing to do with VueJs. All errors will be logged in the console as that is the default option enabled in your browser. Follow this link to disable your network error messages. Suppress Chrome 'Failed to load resource' messages in console

Upvotes: 2

Related Questions