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

Question

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.

Answer 1

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.