引子
JavaScript本身是一个弱类型语言,项目中容易发生错误,做好网页错误监控,能帮助开发者迅速定位问题,保证线上稳定。
vue项目需接入公司内部监控平台,本人之前vue errorHooks不甚了解, 决定探一探?
介绍 errorHandler、errorCaptured
文档传送门: errorHandler、errorCaptured
errorHandler
指定组件的渲染和观察期间未捕获错误的处理函数。这个处理函数被调用时,可获取错误信息和 Vue 实例
Vue.config.errorHandler = function (err, vm, info) {
#处理错误信息, 进行错误上报
#err错误对象
#vm Vue实例
#`info` 是 Vue 特定的错误信息,比如错误所在的生命周期钩子
#只在 2.2.0+ 可用
}
复制代码
版本分割点
- 2.2.0 起,捕获组件生命周期钩子里的错误。同样的,当这个钩子是 undefined 时,被捕获的错误会通过 console.error 输出而避免应用崩溃
- 2.4.0 起,也会捕获 Vue 自定义事件处理函数内部的错误
- 2.6.0 起,也会捕获 v-on DOM 监听器内部抛出的错误。另外,如果任何被覆盖的钩子或处理函数返回一个 Promise 链 (例如 async 函数),则来自其 Promise 链的错误也会被处理
errorCaptured
当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数:错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播
错误传播规则
- 默认情况下,如果全局的 config.errorHandler定义,所有的错误仍会发送它,因此这些错误仍然会向单一的分析服务的地方进行汇报
- 如果一个组件的继承或父级从属链路中存在多个 errorCaptured 钩子,则它们将会被相同的错误逐个唤起。
- 如果此 errorCaptured 钩子自身抛出了一个错误,则这个新错误和原本被捕获的错误都会发送给全局的 config.errorHandler,不能捕获异步promise内部抛出的错误和自身的错误
- 一个 errorCaptured 钩子能够返回 false 以阻止错误继续向上传播。本质上是说“这个错误已经被搞定了且应该被忽略”。它会阻止其它任何会被这个错误唤起的 errorCaptured 钩子和全局的 config.errorHandler
错误信息示例 errorHandler、errorCaptured
光说不练,说了白干,呈上结果供各位看官老爷查看
mounted hook 写入未定义的变量,例如:a
mounted() { a }
- Vue.config.errorHandler err、vm、info
- Vue.config.errorHandler 抛出同样的错误 throw err
globalHandleError函数有 e !== err 判断防止log两次错误