处理 vue 项目中的错误

处理 vue 项目中的错误

1. 错误类型

前端错误主要分为两类：

• 后端接口错误：HTTP 状态码非 2xx、后端业务 code 不为 0、网络异常等。
• 代码中本身逻辑错误：运行时异常、组件渲染错误、未捕获的 Promise 拒绝等。

2. 如何处理

后端接口错误

使用响应拦截器 axios.interceptor.response.use 进行拦截：

apiClient.interceptors.response.use(
  response => response,
  error => {
    if (error.response.status === 401) {
      router.push({ name: 'Login' })
    } else {
      message.error('出错了')
      return Promise.reject(error)
    }
  }
)

代码逻辑问题

1) 全局设置错误处理函数

Vue.config.errorHandler = function (err, vm, info) {
  // 处理错误
  // info 是 Vue 特定的错误信息，比如错误所在的生命周期钩子
}

errorHandler 指定组件的渲染和观察期间未捕获错误的处理函数。这个处理函数被调用时，可获取错误信息和 Vue 实例。

2) 生命周期钩子 errorCaptured

errorCaptured(err: Error, vm: Component, info: string): boolean => {}

此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。

错误传播规则：

• 默认情况下，错误会沿着组件树向上"冒泡"，依次触发父级组件的 errorCaptured。
• 如果任何 errorCaptured 返回 false，会阻止继续向上传播。
• 如果到达应用根级仍未被处理，会触发全局的 errorHandler（如果在 Vue 3 中，还会触发 app.config.errorHandler）。
• 如果 errorCaptured 自身抛出错误，这个新错误会继续向更上层传播。

来源整理自：vue3js.cn 面试官系列