前端/移动开发面试题更新 2026-08-05

在 Vue 项目中,可以采取哪些策略来捕获和处理运行时错误?

前端/移动开发技术原理问题排查Vue

考察说明

考察对 Vue 错误处理机制的理解,以及在实际项目中如何系统性地捕获和上报错误。

回答思路

  1. 【回答框架 1】Vue 提供全局错误处理钩子 config.errorHandler,用于捕获组件渲染、watcher 以及生命周期钩子中未处理的错误。在 Vue 2 中可通过 Vue.config.errorHandler 设置,Vue 3 中则使用 app.config.errorHandler。
  2. 【回答框架 2】对于异步操作(如 Promise 中的错误),可使用 window.addEventListener('unhandledrejection') 捕获未处理的 Promise 拒绝。同时,在 async/await 中使用 try/catch 捕获同步错误,并考虑使用统一错误处理模块。
  3. 【回答框架 3】针对组件渲染错误,可配合 errorCapture 生命周期钩子(Vue 2)或 onErrorCaptured(Vue 3)在组件级别拦截错误,用于局部处理或传递。
  4. 【关键点 1】全局错误处理通过 config.errorHandler 捕获组件内部未捕获错误。
  5. 【关键点 2】异步错误需额外监听 unhandledrejection 事件。
  6. 【关键点 3】组件级错误捕获可通过 errorCaptured 钩子实现。
  7. 【易错点 1】不能只依赖全局钩子,需结合 try/catch 捕获同步异常。
  8. 【易错点 2】避免在 errorHandler 中再次抛出错误导致死循环。
  9. 【易错点 3】错误处理不应仅记录,还应考虑用户提示与上报。