久治县网站建设公司,电影宣传类网页界面设计,电子贺卡怎么制作,新手学做网站学要做哪些1、 组件中的处理#xff1a;使用 errorCaptured 钩子
作用#xff1a;可以捕获来自后代组件的错误
父组件(errorCaptured) - 子组件 (errorCaptured) - 当孙子组件出错时#xff0c;错误会一直向上抛#xff0c;也就是先触发子组件的 errorCaptured#xff0c;…1、 组件中的处理使用 errorCaptured 钩子
作用可以捕获来自后代组件的错误
父组件(errorCaptured) - 子组件 (errorCaptured) - 当孙子组件出错时错误会一直向上抛也就是先触发子组件的 errorCaptured然后触发父组件的 errorCaptured。如果 errorCaptured 中返回 false 则会阻断传播。 原理Vue底层源码会在很多地方都做了错误处理例如在渲染的时候出错或者数据初始化的时候出错都会触发handleError方法传入错误信息和实例等再判断父组件上是否有 errorCaptured 属性有的话拿到这个钩子便执行判断当前钩子的返回值是否为false为false的话就终止向上传播 如果全局的 config.errorHandler 被定义所有的错误仍会发送它因此这些错误仍然会向单一的分析服务的地方进行汇报。
2、全局处理设置错误处理 errorHandler
如果在组件渲染时出现运行错误错误将会被传递至全局 Vue.config.errorHandler 配置函数。
Vue.config.errorHandler (err, vm, info) {console.log(err, vm, info);
} 底层原理每次捕获到错误之后除了调用上级组件的 errorCaptured 之外呢还会命中 globalHandleError方法这个就是全局错误处理方法。将错误传到全局错误处理这里。 如果子组件返回了false这里的全局设置也会捕获不到错误。 3、接口异常处理响应拦截
在拦截器中对状态码进行拦截
instance.interceptors.response.use((res) {return res.data;},(err) {let res err.response;if (res.status 400) {handleError(response); // 统一处理接口异常}return Promise.reject(error);}
);
收集到错误后提交到前端监控系统中这样我们可以分析前端代码的异常信息啦~~
