Vue 组件的错误信息捕获

3,722 阅读1分钟
  1. 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