怎样捕获Vue 组件的错误信息 ?

---

简述理解:

errorCaptured 是组件内部钩子，当捕获一个来自子孙组件的错误时被调用，接收 error、 vm、info 三个参数，return false 后可以阻止错误继续向上抛出

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

---

具体看看:

一、错误类型

任何一个框架，对于错误的处理都是一种必备的能力

在Vue 中，则是定义了一套对应的错误处理规则给到使用者，且在源代码级别，对部分必要的过程做了一定的错误处理。

主要的错误来源包括：

1.后端接口错误

2.代码中本身逻辑错误

二、后端接口错误

请求完成后捕获错误---------- 封装axios请求，通过catch捕获错误。

axios({
   method:'get',
   url:'地址',
}).then(res=>{
   //成功处理
}).catch(err=>{
   //捕获错误
})

请求返回后通过拦截器捕获错误-----------通过axios的interceptor实现网络请求的response先进行一层拦截

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });

三、代码逻辑问题

1、设置全局错误处理函数

Vue.config.errorHandler = function (err, vm, info) {
  // handle error
  // `info` 是 Vue 特定的错误信息，比如错误所在的生命周期钩子
  // 只在 2.2.0+ 可用
}

2、生命周期钩子

errorCaptured是 2.5.0 新增的一个生命钩子函数，当捕获到一个来自子孙组件的错误时被调用。

下面来看个例子：

定义一个父组件cat

Vue.component('cat', {
    template:`
        

          
Cat: 
          
        
`,
    props:{
        name:{
            required:true,
            type:String
        }
    },
    // 错误捕获钩子
    errorCaptured(err,vm,info) {
        console.log(`cat error: ${err.toString()}\n  info: ${info}`); 
        return false;
    }

});

定义一个子组件kitten，其中dontexist()并没有定义，存在错误

Vue.component('kitten', {
    template:'
Kitten: {{ dontexist() }}
',
    props:{
        name:{
            required:true,
            type:String
        }
    }
});

页面中使用组件

在父组件的errorCaptured则能够捕获到信息

cat error: TypeError: dontexist is not a function
info: render

官网，错误传播规则如下：

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

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

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

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