【Vue】浅出Vue 错误处理机制errorCaptured、errorHandler

引子

JavaScript本身是一个弱类型语言，项目中容易发生错误，做好网页错误监控，能帮助开发者迅速定位问题，保证线上稳定。

介绍 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

1.errorHandler

vue 项目错误正常展示

示例代码如下：

export default {
    created() {
        let a = null;
        if(a.length > 1) {
            // ...
        }
    }
};

正常情况下，上述代码会报错：

 vue 项目错误捕获以及当中的缺陷

继上面后，我们尝试通过 Vue.config.errorHander 捕获：

Vue.config.errorHandler = (err, vm, info) => {
    console.log('进来啦~');
}

export default {
    created() {
        let a = null;
        if(a.length > 1) {
            // ...
        }
    }
};

然后控制台就不会对外抛错:

 那么在错误监控系统中，理论上我们只去捕获报错而不去拦截报错，那么要怎么做才能把错误外抛到控制台呢？

简单点，就加个console.error(err)：

Vue.config.errorHandler = (err, vm, info) => {
    console.log('进来啦~');
    console.error(err);~~~~
}

export default {
    created() {
        let a = null;
        if(a.length > 1) {
            // ...
        }
    }
};

控制台将会得到下面截图：

 那么这样就可以了，错误的上报我们可以再Vue.config.errorHandler 中去做，完了再去把 Vue 中的这个“短板”补上，让错误继续正常抛出来。那么此时错误上报的函数（比如这函数是是captureError()）应该这么去调用：

Vue.config.errorHandler = (err, vm, info) => {
    console.log('进来啦~');
    // 错误上报到收集报错的平台
    captureError(err);
}

export default {
    created() {
        let a = null;
        if(a.length > 1) {
            // ...
        }
    }
};

2.errorCaptured (err, vm, info) => ?Boolean 类似于React 错误处理边界

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

Vue.component('ErrorBoundary', {
  data: () => ({ error: null }),
  errorCaptured (err, vm, info) {
    this.error = `${err.stack}

found 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]
  }
})

参考https://segmentfault.com/a/1190000018606181、https://segmentfault.com/a/1190000021706923?utm_source=tag-newest