面试题：如何捕获和处理 Vue 项目中的错误？

在 Vue 项目中，捕获和处理错误是确保应用稳定性和用户体验的重要环节。以下是常见的错误捕获和处理方法：

1. 全局错误捕获

Vue 提供了全局的错误捕获机制，可以通过 Vue.config.errorHandler 捕获和处理全局错误。

示例

Vue.config.errorHandler = (err, vm, info) => {
  console.error('全局错误:', err);
  console.error('组件:', vm);
  console.error('错误信息:', info);
  // 可以将错误上报到服务器
};

参数说明：
- err：错误对象。
- vm：发生错误的 Vue 组件实例。
- info：错误信息（如生命周期钩子名称）。

2. 组件内错误捕获

在组件中，可以通过 errorCaptured 生命周期钩子捕获子组件的错误。

示例

export default {
  errorCaptured(err, vm, info) {
    console.error('组件内错误:', err);
    console.error('子组件:', vm);
    console.error('错误信息:', info);
    // 可以阻止错误继续向上传播
    return false;
  },
};

返回值：
- 如果返回 false，错误不会继续向上传播。
- 如果返回 true 或不返回值，错误会继续传播到全局 errorHandler。

3. 异步错误捕获

对于异步代码（如 setTimeout、Promise），需要使用 try-catch 或 Promise.catch 捕获错误。

示例

export default {
  methods: {
    async fetchData() {
      try {
        const data = await axios.get('/api/data');
        console.log(data);
      } catch (err) {
        console.error('异步错误:', err);
      }
    },
  },
};

4. 路由错误捕获

在 Vue Router 中，可以通过 router.onError 捕获路由导航错误。

示例

router.onError((err) => {
  console.error('路由错误:', err);
  // 可以将错误上报到服务器
});

5. 错误边界（Error Boundary）

Vue 3 引入了类似 React 错误边界的概念，可以通过 <error-boundary> 组件捕获子组件的错误。

示例

<template>
  <error-boundary>
    <child-component />
  </error-boundary>
</template>

<script>
import { ErrorBoundary } from 'vue-error-boundary';

export default {
  components: {
    ErrorBoundary,
  },
};
</script>

自定义错误边界组件：

  export default {
    data() {
      return {
        hasError: false,
        error: null,
      };
    },
    errorCaptured(err, vm, info) {
      this.hasError = true;
      this.error = err;
      return false; // 阻止错误继续传播
    },
    render() {
      if (this.hasError) {
        return <div>出错啦: {this.error.message}</div>;
      }
      return this.$slots.default[0];
    },
  };

6. 错误上报

捕获错误后，可以将错误信息上报到服务器，便于分析和修复。

示例

Vue.config.errorHandler = (err, vm, info) => {
  console.error('全局错误:', err);
  // 上报错误
  axios.post('/api/log-error', {
    error: err.toString(),
    component: vm ? vm.$options.name : 'Unknown',
    info,
  });
};

7. 开发环境 vs 生产环境

开发环境：
- Vue 会提供详细的错误信息和堆栈跟踪。
- 建议在开发环境中启用严格模式，尽早发现潜在问题。
生产环境：
- 隐藏详细的错误信息，避免暴露敏感数据。
- 使用全局错误捕获和错误上报机制。

总结

方法	适用场景	说明
`Vue.config.errorHandler`	全局错误捕获	捕获所有未处理的错误
`errorCaptured`	组件内错误捕获	捕获子组件的错误
`try-catch` / `Promise.catch`	异步错误捕获	捕获异步代码中的错误
`router.onError`	路由错误捕获	捕获路由导航错误
错误边界	捕获子组件错误	Vue 3 中类似 React 错误边界的概念
错误上报	生产环境错误监控	将错误信息上报到服务器

通过以上方法，可以全面捕获和处理 Vue 项目中的错误，提升应用的稳定性和用户体验。

THE END

Vue 进阶面试题