当前位置: 首页 > Web前端 > vue.js

如何捕获Vue组件的错误信息?

时间:2023-03-31 14:24:22 vue.js

简单理解:errorCaptured是组件内部的一个hook。当捕获来自后代组件的错误时调用它。它接收三个参数:error、vm和info。返回false后,可以防止错误继续向上抛出errorHandler是一个全局hook,配置了Vue.config.errorHandler,接收参数与errorCaptured一致。2.6之后可以捕获v-on和promise链中的错误,可以用于统一的错误处理和错误覆盖。看一看:1.错误处理任何类型的框架都是必备的能力。在Vue中,为用户定义了一套相应的错误处理规则,并在源代码层面,做了一些必要的处理。一定的错误处理。主要错误来源包括:1.后端接口错误2.代码本身逻辑错误2.请求完成后后端接口错误捕获错误----------封装axios请求和通过catch捕获错误。axios({method:'get',url:'address',}).then(res=>{//成功处理}).catch(err=>{//catcherror})之后被拦截器捕获requestreturnsError----------通过axios的拦截器实现网络请求的响应先拦截一层//添加响应拦截器axios.interceptors.response.use(function(response){//响应数据Dosomethingreturnresponse;},function(error){//DosomethingabouttheresponseerrorreturnPromise.reject(error);});三、代码逻辑问题1、设置全局错误处理函数Vue.config.errorHandler=function(err,vm,info){//handleerror//`info`是Vue特有的错误信息,比如生命周期钩子错误所在的位置//仅在2.2.0+中可用}2.生命周期钩子errorCaptured是2.5.0当捕获到来自后代组件的错误时调用新的生命钩子函数。我们来看一个例子:定义一个父组件catVue.component('cat',{template:`

Cat:

`,props:{name:{required:true,type:String}},//错误捕获钩子errorCaptured(err,vm,info){console.log(`caterror:${err.toString()}\ninfo:${info}`);返回假;}});定义一个子组件kitten,这里没有定义dontexist(),会报错Vue.component('kitten',{template:'

Kitten:{{dontexist()}}

',props:{name:{required:true,type:String}}});页面中使用的组件
在父组件的errorCaptured中,信息caterror:TypeError:dontexistisnotafunctioninfo:rendercanbecaptured。错误传播规则如下:1.默认情况下,如果定义了全局的config.errorHandler,所有错误仍然会发送给它,所以这些错误仍然会被报告给单个分析服务。2.如果一个组件继承或者依赖parent的链接有很多一个errorCapturedhook,它们会被同一个error3一个一个地唤起。如果errorCapturedhook本身抛出错误,新的错误和原来捕获的错误会被发送到全局config.errorHandler4。errorCaptured挂钩可以返回false以防止错误进一步向上传播。本质上是说“这个错误已经被修复,应该被忽略”。它可以防止此错误调用任何其他errorCaptured挂钩和全局config.errorHandler