Vue 错误处理机制errorCaptured、errorHandler

引子

昨天看面试实录的时候突然听到一个陌生的生命周期(errorCaptured)，因此在这里记录一下学习过程。

介绍

在日常开发的时候，通常某个地方报错之后，控制台就会输出满屏的红色，给我们造成强烈的视觉冲击，而利用errorCaptured可以让我们在报错的时候很快的找到报错的组件位置和发生报错的生命周期钩子。
errorCaptured： 在捕获一个来自后代组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。官方文档
errorHandler： 指定一个处理函数，来处理组件渲染函数和侦听器执行期间抛出的未捕获错误。这个处理函数被调用时，可获取错误信息和相应的应用实例。官方文档

示例

1. errorCaptured

<error-boundary>
  <another-component/>
</error-boundary>

Vue.component('ErrorBoundary', {
  data: () => ({ error: null }),
  errorCaptured (err, vm, info) {
    this.error = `${err.stack}\n\nfound in ${info} of component`
    return false
  },
  render (h) {
    if (this.error) {
      return h('pre', { style: { color: 'red' }}, this.error)
    }
    // ignoring edge cases for the sake of demonstration
    return this.$slots.default[0]
  }
})

2. errorHandler

Vue.config.errorHandler = function (err, vm, info) {
      // #处理错误信息, 进行错误上报
      // #err 错误对象
      // #vm Vue实例
      // #info 是 Vue 特定的错误信息，比如错误所在的生命周期钩子
    console.log("%c%s","color:red","#err错误对象:",err)
    console.log("%c%s","color:blue","#vm Vue实例:",vm)
    console.log("%c%s","color:green","#`info` 是 Vue 特定的错误信息，比如错误所在的生命周期钩子:",info)
}