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

简述理解:
errorCaptured 是组件内部钩子，当捕获一个来自子孙组件的错误时被调用，接收 error、 vm、info 三个参数，return false 后可以阻止错误继续向上抛出
【怎样捕获Vue 组件的错误信息 ?】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()}\ninfo: ${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