vue 错误上报
2023-07-23 16:54:25
Vue.js 的错误上报可通过以下三类场景实现，结合生命周期钩子、路由拦截和请求封装等技术，配合第三方工具（如 Sentry）完成错误捕获与上报：
一、组件错误上报
Vue.js 组件错误可通过 errorCaptured 生命周期钩子或全局配置 Vue.config.errorHandler 捕获。errorCaptured 接收三个参数：错误对象（error）、组件实例（instance）和错误位置信息（info），返回 false 可阻止错误继续向上传播。示例中通过 Vue.mixin 全局混入 errorCaptured，结合 Sentry 的 captureException 方法将错误上报至后端。同时，Vue.config.errorHandler 可作为全局兜底方案，捕获未被组件内处理的错误。
二、路由错误上报
路由错误需通过路由实例的拦截器实现。首先，在 router.beforeEach 中定义错误逻辑（如 404 页面），通过 next(error) 抛出错误对象；随后，在 router.onError 回调中调用 Sentry 上报错误。此方法可统一处理路由跳转失败、权限不足等场景，确保错误信息包含目标路径（to.fullPath）和状态码（如 404），便于定位问题。
三、异步请求错误上报
针对 axios 等 HTTP 库，可通过封装响应拦截器实现错误上报。在拦截器中，检查响应数据的状态码（如 res.code !== 0），若不符合预期则构造错误对象并抛出；在拦截器的 error 回调中，调用 Sentry 上报请求失败信息（如超时、网络错误）。此方法可覆盖请求超时、服务器异常等场景，错误对象通常包含状态码（error.statusCode）和错误描述。
关键点总结
- 工具选择：Sentry 等第三方库可简化错误上报流程，支持错误分组、用户行为追踪等功能。
- 错误分类：需区分组件渲染错误、路由导航错误和异步请求错误，针对性设计上报逻辑。
- 上下文补充：上报时附加用户信息、设备环境、请求参数等上下文，提升问题排查效率。
- 降级处理：上报失败时需有本地存储或重试机制，避免阻塞主流程。
通过上述方法，可构建覆盖 Vue.js 全场景的错误监控体系，显著提升应用稳定性。
热门标签
