在 Vue 项目中处理错误（包括运行时错误、接口错误、组件错误等）是保障用户体验和系统稳定性的重要部分。以下是我通常在 Vue（特别是 Vue 3）项目中处理错误的几种方式，涵盖全局错误处理、组件内错误处理、接口异常处理和开发调试策略。

1.全局错误处理（Vue 3 推荐）

Vue 3 提供了 app.config.errorHandler 来统一捕获组件内部的运行时错误：

const app = createApp(App)

app.config.errorHandler = (err, instance, info) => {
  console.error('全局错误捕获：', err)
  // 可上报到监控平台，如 Sentry、Fundebug
}

也可以结合 window.onerror 捕获 JS 全局错误：

window.onerror = function (msg, url, line, col, error) {
  console.error('全局 JS 错误:', msg, url, line, col, error)
}

2.组件内错误捕获（try...catch 或 errorCaptured）

方式一：对可能报错的逻辑加 try...catch

try {
  const result = await someApiCall()
} catch (error) {
  console.error('接口异常：', error)
  this.$message.error('操作失败，请稍后重试')
}

方式二：使用 errorCaptured 钩子（局部错误边界）

export default {
  errorCaptured(err, instance, info) {
    console.warn('局部错误捕获：', err, info)
    return false // 返回 false 表示继续冒泡到全局 errorHandler
  }
}

3.接口错误处理（axios 拦截器）

统一封装接口错误，比如登录失效、服务器异常、权限不足等：

axios.interceptors.response.use(
  res => res,
  err => {
    const status = err.response?.status
    if (status === 401) {
      // 登录失效处理
      router.push('/login')
    } else {
      ElMessage.error(err.response?.data?.message || '网络错误')
    }
    return Promise.reject(err)
  }
)

4.开发调试策略

• 配置 vue.config.js 开启详细错误堆栈或 sourcemap
• 使用 Vite + TS 开发时可以静态捕获大部分错误
• 结合 eslint、TypeScript 做预防性错误检查
• 引入错误上报服务（如 Sentry），方便线上 bug 定位

5.典型错误处理实践总结