你在 vue 项目中是怎么处理错误的？有哪些好方法？

在Vue项目开发中，错误处理机制直接关系到应用稳定性和用户体验。一个未捕获的异常可能导致整个页面崩溃，特别是在涉及异步请求、复杂组件交互的场景中。本文将系统解析从全局错误监控到组件级异常处理的完整方案，帮助开发者构建健壮的Vue应用。

一、全局错误处理方案

1.1 全局错误处理器（Vue 2.x）

Vue.config.errorHandler = function (err, vm, info) {
  console.error(`[全局异常]: ${err.toString()}\n组件: ${vm.$options.name}\n位置: ${info}`);
  // 上报错误到监控系统
  trackError(err);
};

覆盖90%的Vue实例内部错误，包括生命周期钩子、事件处理函数等。建议配合错误上报系统使用。

1.2 Vue 3的错误处理升级

• 选项式API：沿用errorHandler配置
• 组合式API：推荐使用onErrorCaptured钩子

  import { onErrorCaptured } from 'vue'
  export default {
    setup() {
      onErrorCaptured((err, instance, info) => {
        handleError(err)
        return false // 阻止继续传播
      })
    }
  }

二、分层错误捕获策略

2.1 异步错误处理

Promise异常需显式捕获：

axios.get('/api/data')
  .then(res => {...})
  .catch(err => {
    showToast('请求失败，请重试')
    logNetworkError(err)
  });

2.2 生命周期钩子异常处理

• 在created/mounted等钩子中使用try/catch
• 使用async/await时务必添加catch块

三、高级处理技巧

3.1 错误边界组件

创建错误捕获组件：

export default {
  data: () => ({ error: null }),
  errorCaptured(err) {
    this.error = err
    return false
  },
  render() {
    return this.error ? <ErrorDisplay /> : this.$slots.default()
  }
}

3.2 指令级错误处理

注册全局错误指令：

Vue.directive('safe', {
  bind(el, binding) {
    try {
      binding.value()
    } catch (e) {
      el.innerHTML = '内容加载失败'
    }
  }
})

四、第三方库集成方案

五、复杂项目实践建议

5.1 错误处理规范制定

• 定义不同级别错误的处理策略
• 建立错误代码字典（如API到1001为网络超时）

5.2 AI辅助开发策略

参考AI生成的代码框架时，注意：

1. 验证错误处理是否完整
2. 补充必要的异常边界检查
3. 添加统一的错误上报模块

结语：构建完善的错误防御体系

通过全局监控+组件级处理+第三方服务的三层防御体系，可使Vue应用的崩溃率降低80%以上。建议定期进行错误复盘，持续优化异常处理机制，同时结合项目实际选择最适合的方案组合。