Vue 项目中的错误如何处理的?

1、 组件中的处理:使用 errorCaptured 钩子

作用:可以捕获来自后代组件的错误

父组件(errorCaptured) -> 子组件 (errorCaptured) -> 当孙子组件出错时,错误会一直向上抛,也就是先触发子组件的 errorCaptured,然后触发父组件的 errorCaptured。如果 errorCaptured 中返回 false 则会阻断传播。

原理:Vue底层源码会在很多地方都做了错误处理,例如在渲染的时候出错或者数据初始化的时候出错都会触发handleError方法,传入错误信息和实例等;再判断父组件上是否有 errorCaptured 属性,有的话拿到这个钩子便执行;判断当前钩子的返回值是否为false,为false的话就终止向上传播;

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

2、全局处理:设置错误处理 errorHandler

如果在组件渲染时出现运行错误,错误将会被传递至全局 Vue.config.errorHandler 配置函数。

javascript 复制代码
Vue.config.errorHandler = (err, vm, info) => {
    console.log(err, vm, info);
}

底层原理:每次捕获到错误之后,除了调用上级组件的 errorCaptured 之外呢,还会命中 globalHandleError方法,这个就是全局错误处理方法。将错误传到全局错误处理这里。

如果子组件返回了false,这里的全局设置也会捕获不到错误。

3、接口异常处理:响应拦截

在拦截器中对状态码进行拦截;

javascript 复制代码
instance.interceptors.response.use(
    (res) => {
        return res.data;
    },
    (err) => {
        let res = err.response;
        if (res.status >= 400) {
            handleError(response); // 统一处理接口异常
        }
        return Promise.reject(error);
    }
);

收集到错误后,提交到前端监控系统中,这样我们可以分析前端代码的异常信息啦~~

相关推荐
忧郁的蛋~9 分钟前
HTML表格导出为Excel文件的实现方案
前端·html·excel
小彭努力中9 分钟前
141.在 Vue 3 中使用 OpenLayers Link 交互:把地图中心点 / 缩放级别 / 旋转角度实时写进 URL,并同步解析显示
前端·javascript·vue.js·交互
然我29 分钟前
别再只用 base64!HTML5 的 Blob 才是二进制处理的王者,面试常考
前端·面试·html
NanLing32 分钟前
【纯前端推理】纯端侧 AI 对象检测:用浏览器就能跑的深度学习模型
前端
呆呆的心33 分钟前
前端必学:从盒模型到定位,一篇搞定页面布局核心 🧩
前端·css
小飞悟34 分钟前
前端高手才知道的秘密:Blob 居然这么强大!
前端·javascript·html
小old弟34 分钟前
用Sass循环实现炫彩文字跑马灯效果
前端
code_YuJun34 分钟前
Promise 基础使用
前端·javascript·promise
Codebee35 分钟前
OneCode自主UI设计体系:架构解析与核心实现
前端·javascript·前端框架
GIS之路38 分钟前
GIS 空间关系:九交模型
前端