Vue 组件的错误信息捕获

您所在的位置:网站首页 c2449错误 Vue 组件的错误信息捕获

Vue 组件的错误信息捕获

2023-04-03 12:37| 来源: 网络整理| 查看: 265

errorCaptured 钩子可以捕获组件内部错误 errorCaptured 是组件内部钩子,当捕获一个来自子孙组件的错误时被调用,接收 error、 vm、info 三个参数,return false 后可以阻止错误继续向上抛出 export default{ data(){}, methods:{}, created(){}, mounted(){}, /** * 收到三个参数: * 错误对象、发生错误的组件实例 * 以及一个包含错误来源信息的字符串。 * 此钩子可以返回 false 以阻止该错误继续向上传播。 */ errorCaptured(err, vm, info){ console.log(err) // -> 错误返回 console.log(vm) // -> vue实例 console.log(info) // -> 在哪个钩子发生错误 return false } } 复制代码

2.errorHandler 全局错误捕获

errorHandler 为全局钩子,使用 Vue.config.errorHandler 配置,接收参数与 errorCaptured 一 致,2.6 后可捕捉 v-on 与 promise 链的错误,可用于统一错误处理与错误兜底

/** * 收到三个参数: * 错误对象、发生错误的组件实例 * 以及一个包含错误来源信息的字符串。 */ Vue.config.errorHandler = function (err, vm, info) { } 复制代码

官网,错误传播规则如下:

1. 默认情况下,如果全局的 config.errorHandler 被定义,所有的错误仍会发送它,因此这些错误仍然会向单一的分析服务的地方进行汇报

2. 如果一个组件的继承或父级从属链路中存在多个 errorCaptured 钩子,则它们将会被相同的错误逐个唤起。

3. 如果此 errorCaptured 钩子自身抛出了一个错误,则这个新错误和原本被捕获的错误都会发送给全局的 config.errorHandler

4. 一个 errorCaptured 钩子能够返回 false 以阻止错误继续向上传播。本质上是说“这个错误已经被搞定了且应该被忽略”。它会阻止其它任何会被这个错误唤起的 errorCaptured 钩子和全局的 config.errorHandler



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3