// 响应拦截器instance.interceptors.response.use((response) => {return response.data;},(error) => {// 发生异常会走到这里if (error.response) {let response = error.response;if (response.status >= 400) {handleError(response);}} else {handleError(null);}return Promise.reject(error);},);
响应拦截器的第二个参数是在发生错误时执行的函数,参数就是异常 。我们首先要判断是否存在 error.,存在就说明接口有响应,也就是接口通了,但是返回错误;不存在则说明接口没通,请求一直挂起,多数是接口崩溃了 。
如果有响应,首先获取状态码,根据状态码来判断什么时候需要收集异常 。上面的判断方式简单粗暴,只要状态码大于 400 就视为一个异常,拿到响应数据,并执行上报逻辑 。
如果没有响应,可以看作是接口超时异常,调用异常处理函数时传一个 null 即可 。
前端异常
上面我们介绍了在 axios 拦截器中如何捕获接口异常,这部分我们再介绍如何捕获前端异常 。
前端代码捕获异常,最常用的方式就是用 try..catch.. 了,任意同步代码块都可以放到 try 块中,只要发生异常就会执行 catch:
try {// 任意同步代码} catch (err) {console.log(err);}
上面说“任意同步代码”而不是“任意代码”,主要是普通的写法 try..catch.. 是捕获不到的,只能用 .catch() 捕获,如:
try {Promise.reject(new Error('出错了')).catch((err) => console.log('1:', err));} catch (err) {console.log('2:', err);}
把这段代码丢进浏览器,打印结果是:
1: Error: 出错了
很明显只是 .catch 捕获到了异常 。不过与上面接口异常的逻辑一样,这种方式处理当前页面异常没什么问题,但从整个应用来看,这样捕获异常侵入性强,接入成本高,所以我们的思路依然是全局捕获 。
全局捕获 js 的异常也比较简单,用 .('error') 即可:
// js 错误捕获window.addEventListener('error', (error) => {// error 就是js的异常});
为啥不用 . ?
这里很多小伙伴有疑问,为什么不用 . 全局监听呢?.('error') 和 . 有什么区别呢?
首先这两个函数功能基本一致,都可以全局捕获 js 异常 。但是有一类异常叫做 资源加载异常,就是在代码中引用了不存在的图片,js,css 等静态资源导致的异常,比如:
const loadCss = ()=> {let link = document.createElement('link')link.type = 'text/css'link.rel = 'stylesheet'link.href = http://www.kingceram.com/post/'https://baidu.com/15.css'document.getElementsByTagName('head')[10].append(link)}render() {return
上述代码中的 /15.css 和 bbb.png 是不存在的,JS 执行到这里肯定会报一个资源找不到的错误 。但是默认情况下,上面两种对象上的全局监听函数都监听不到这类异常 。
因为资源加载的异常只会在当前元素触发,异常不会冒泡到 ,因此监听上的异常是捕捉不到的 。那怎么办呢?
如果你熟悉 DOM 事件你就会明白,既然冒泡阶段监听不到,那么在捕获阶段一定能监听到 。
方法就是给 . 函数指定第三个参数,很简单就是 true,表示该监听函数会在捕获阶段执行,这样就能监听到资源加载异常了 。
// 捕获阶段全局监听window.addEventListene('error',(error) => {if (error.target != window) {console.log(error.target.tagName, error.target.src);}handleError(error);},true,);
- 监控系统服务器的维修维护,监控系统维护
- 电子监控摄像机看不清人,男子遭“粪弹”袭击
- 平安城市-数字高清网络视频监控系统解决方案
- 虚拟机磁盘阵列 RAID0 RAID1 RAID5 RAID10 搭建演示使用R
- springboot2.x中的服务监控之邮件预警
- debug musl
- prometheus+grafana+alertmanager服务器运维监控并实
- 五 kubernetes搭建prometheusAlertmanager告警
- 简单linux shell脚本监控磁盘使用情况,发送邮件告警
- 火花监控:如何每天处理10B请求