Vue3全局errorHandler无法捕获Axios请求错误的原因排查

Hey there, let's break down why your Vue 3 global error handler works for regular async Promises but misses Axios request errors, plus how to fix this for good.

The Root Cause #

Vue's app.config.errorHandler does a great job catching unhandled Promise rejections from Vue-managed contexts (like component methods, lifecycle hooks, or custom Promises you write yourself). But Axios wraps its request errors in its own AxiosError object, and its internal error handling creates a layer that stops the rejection from automatically bubbling up to Vue's error system.

Even though you're calling Axios inside a component method, the rejected Promise from Axios doesn't get picked up by Vue's handler unless we explicitly pass it along.

Solution 1: Manually Rethrow Errors for Specific Requests #

If you only need to handle errors for a few requests, add a .catch() block to your Axios call and rethrow the error. This lets Vue's global handler catch it:

methods: {
  showMessage() {
    this.$axios.get('/wrong-url/')
      .then(response => {
        console.log('wrong url');
      })
      .catch(error => {
        // Rethrow the error to trigger Vue's global handler
        throw error;
      });
  }
}

Or use async/await for cleaner code:

methods: {
  async showMessage() {
    try {
      const response = await this.$axios.get('/wrong-url/');
      console.log('wrong url');
    } catch (error) {
      throw error;
    }
  }
}

Solution 2: Global Axios Interceptor (Best for All Requests) #

To avoid repeating .catch() blocks everywhere, set up a global Axios response interceptor that forwards all errors directly to Vue's errorHandler. This way every Axios error gets handled globally automatically:

In your main.js:

import { createApp } from 'vue';
import App from './App.vue';
import axios from 'axios';

const app = createApp(App);

// Add Axios response interceptor to handle errors globally
axios.interceptors.response.use(
  // Pass successful responses through unchanged
  response => response,
  // Catch errors and send them to Vue's global error handler
  error => {
    app.config.errorHandler(error);
    // Keep the Promise rejected so you can still handle errors locally if needed
    return Promise.reject(error);
  }
);

// Your existing global error handler
app.config.errorHandler = error => {
  console.log("catch error", error);
};

// Attach Axios to the Vue instance
app.config.globalProperties.$axios = axios;

app.mount('#app');

Why This Works #

The interceptor catches every Axios error before it reaches your component code. By calling app.config.errorHandler(error), we explicitly feed the error into Vue's global handling system. Returning Promise.reject(error) ensures you can still add local .catch() blocks if you need to handle specific errors in individual components.

内容的提问来源于stack exchange，提问作者telecomshy