CODEWITHSUNDEEP
javascriptvue.jspromiseuncaught-exception
telecomshy
telecomshy

Reputation: 75

Why does Vue's errorHandler fail to catch axios's error?

I set up a global errorHandler in Vue3's main.js:

app.config.errorHandler = error => {
    console.log("catch error")
}

In general methods, it works well. For example:

methods: {
  showMessage() {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        reject("async error!")
      }, 500)
    })
  }
}

It print catch error in console, But when I use Axios to make a request, it can't catch axios's Uncaught (in promise) Error. Such as:

methods: {
  showMessage() {
    this.$axios.get('/wrong-url/').then(response => {
      console.log('wrong url')
    })
  }
}

The global errorHandler cannot catch the error at this time. The console displays the error:

Uncaught (in promise) Error: Request failed with status code 404

I've googled it, but I can't find the reason.

Upvotes: 1

Views: 2714

Answers (2)

Max S.
Max S.

Reputation: 1461

config.errorHandler is for handling frontend errors. Yоu still have to create an interceptor when the app is created:

...
created() {
    axios.interceptors.response.use((response) => {
        return response;
    }, function(error) {
        // Do something ...

        return Promise.reject(error);
    });
}
...

app.config.errorHandler = (err, instance, info) => {
    // Do something ...
};

Upvotes: 2

Estus Flask
Estus Flask

Reputation: 222538

The promise is not returned and isolated inside a method, which is a mistake. With a few exceptions, promise chain should always be preserved, this allows errors to be handled:

  showMessage() {
    return this.$axios.get('/wrong-url/').then(response => {
    ...

A fool-proof way is to use async..await because it forces a function to return a promise:

  async showMessage() {
    const response = await this.$axios.get('/wrong-url/');
    ...

It can be combined linter rule to avoid mistakes with promise chaining.

Upvotes: 2

Related Questions