Vue3 app.config.errorHandler 属性（长文解析）

Vue3 app.config.errorHandler 属性

Vue3 中的 app.config.errorHandler 属性是全局错误处理的重要机制之一。通过该属性，开发者可以自定义应用中所有组件和生命周期钩子中抛出的错误的处理方式，从而提升调试效率和用户体验。

核心概念

app.config.errorHandler 是 Vue3 应用实例配置中的一个选项，用于注册全局的错误处理函数。当应用中的组件、模板、生命周期钩子或渲染函数中发生错误时，该错误会首先被这个处理函数捕获，除非错误被 try/catch 明确捕获。

其本质类似于 JavaScript 的 window.onerror，但它是 Vue3 专用的错误处理机制，能更精确地捕获 Vue 相关错误。

基础语法

使用 app.config.errorHandler 非常简单，只需在创建 Vue 应用时设置该属性即可。以下是基本语法：

const app = createApp(App)
app.config.errorHandler = (err, instance, info) => {
  // 处理错误的逻辑
}
app.mount('#app')

err：捕获到的错误对象
instance：发生错误的 Vue 实例
info：错误发生的上下文信息（如生命周期钩子名、事件名等）

示例代码

const app = createApp(App)
app.config.errorHandler = (err, instance, info) => {
  console.error('Vue 应用错误：', err)
  console.log('发生错误的组件实例：', instance)
  console.log('错误上下文信息：', info)
}
app.mount('#app')

通过这个处理函数，你可以将错误记录到日志、发送给监控系统，或在控制台中进行格式化输出。

进阶特性

errorHandler 的真正价值在于其灵活性，可以根据不同的错误类型进行分类处理。例如，你可以区分运行时错误、渲染错误，或自定义错误类型，并采取不同的响应措施。

错误类型判断

app.config.errorHandler = (err, instance, info) => {
  if (err instanceof TypeError) {
    console.warn('类型错误：', err.message)
  } else if (err instanceof RangeError) {
    console.error('范围错误：', err.message)
  } else {
    console.error('其他错误：', err)
  }
}

与 Vue DevTools 配合使用

errorHandler 不会干扰 Vue DevTools 的错误收集功能，反而可以作为补充日志，帮助你在生产环境中捕捉错误。

与 Sentry 等错误监控工具集成

import * as Sentry from '@sentry/vue'

const app = createApp(App)
app.config.errorHandler = (err, instance, info) => {
  Sentry.captureException(err, {
    extra: {
      component: instance?.$options?.name,
      errorInfo: info
    }
  })
}
app.mount('#app')

实战应用

在实际开发中，全局错误处理能帮助我们统一管理异常，避免未处理错误导致应用崩溃。以下是一个真实项目中的使用场景。

场景一：统一日志记录

app.config.errorHandler = (err, instance, info) => {
  const errorLog = {
    message: err.message,
    stack: err.stack,
    component: instance?.$options?.name,
    info
  }
  // 发送日志到服务器
  fetch('/api/log-error', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(errorLog)
  })
}

场景二：错误提示弹窗

app.config.errorHandler = (err, instance, info) => {
  // 在 UI 中显示错误提示
  if (instance && instance.$el) {
    const errorElement = document.createElement('div')
    errorElement.textContent = `错误：${err.message}`
    instance.$el.appendChild(errorElement)
  }
}

这个用法适用于非关键错误，可以让用户知道问题存在，但不至于中断整个应用的运行。

常见问题

Q1：errorHandler 会覆盖浏览器默认的错误处理吗？

A1：不会。errorHandler 是 Vue 专用的错误捕获机制，浏览器全局的 window.onerror 仍然有效，两者可以共存。
Q2：errorHandler 能处理异步错误吗？

A2：不能直接处理异步错误（如 Promise 抛出的异常）。你应在 async/await 中使用 try/catch，或使用 window.onerror 和 window.onunhandledrejection 来捕获异步错误。
Q3：如何关闭 errorHandler？

A3：直接将其设为 null 或 undefined 即可关闭。
```
app.config.errorHandler = null
```

总结

通过 Vue3 app.config.errorHandler 属性，你可以统一管理 Vue 应用中发生的错误，实现更优雅的错误提示和更完善的日志记录。