关于vue.js:怎样捕获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:`
        <div>
          <h1>Cat: </h1>
          <slot></slot>
        </div>`,
    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:'<div><h1>Kitten: {{ dontexist() }}</h1></div>',
    props:{
        name:{
            required:true,
            type:String
        }
    }
});

页面中应用组件

<div id="app" v-cloak>
    <cat name="my cat">
        <kitten></kitten>
    </cat>
</div>

在父组件的 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