一、意义：
接口的成功率直接影响用户的转化率，像用户注册、支付、提交信息等接口如果异常的话，后果是很严重的。线上会因为各种情况，是在开发和测试阶段是不能解决的，所以监控线上接口状态是很必要的。
二、捕获方法：
接口响应捕获有两种方法：
第一种是通过在业务中获取接口响应，比如在axios的结果获取接口响应信息，这种缺点是如果有多个项目，需要在每个项目进行侵入代码，工作量大并且容易出错。
第二种是重写XMLHttpRequest和fetch，这样不需要侵入业务，监听请求响应结果。具体代码如下
1、重写XMLHttpRequest
const realXMLHttpRequest = window.XMLHttpRequest;
if (realXMLHttpRequest) {
window.XMLHttpRequest = function() {
const xhr = new realXMLHttpRequest();
try {
if (xhr.addEventListener) {
const xhrStartTime = +new Date();
xhr.addEventListener('loadend', () => {
try {
const {
responseText,
status,
statusText,
responseURL,
} = xhr;
const xhrEndTime = +new Date();
const obj: ReportApiInterface = {
url: responseURL,
type: status === 200 ? 1 : 2,
status,
msg: statusText,
delay: xhrEndTime - xhrStartTime,
res: status === 200 ? '' : responseText
};
reportApi(obj)
} catch (err) {
}
});
}
} catch (err) {
}
return xhr;
};
}
只做了监听响应结果，这样对原生方法完全没有任何改变。axios是基于XMLHttpRequest进行封装，也不会影响到请求插件。
2、重写fetch
const realFetch = window.fetch;
if (typeof realFetch === 'function') {
window.fetch = function (input: RequestInfo, init?: RequestInit) {
const fetchStartTime = +new Date();
return realFetch(input, init).then((res: Response) => {
try {
const {
status,
statusText,
url,
ok
} = res;
const fetchEndTime = +new Date();
const obj: ReportApiInterface = {
url,
type: ok ? 1 : 2,
status,
msg: statusText,
delay: fetchEndTime - fetchStartTime,
res: ''
};
const resClone = res.clone();
resClone.text().then((str: string) => {
obj.res = ok ? '' : str;
reportApi(obj);
});
} catch (err) {
}
return res;
});
};
}
fetch返回的是promise，对响应promise拷贝一份单独处理。
三、上报参数：
捕获页面所有请求，监控接口响应结果。上报以下信息：
1、url: string // 接口地址
2、type: 1|2; // 1: 请求成功；2: 失败
3、status: number; // 状态码
4、msg: string // 错误消息
5、delay: number // 接口响应时间
6、res: string // status不等于200的响应文本
得到响应结果后，会根据采样率进行上报，采样率即上报的概率。采样率：type等于1（请求成功）10%的采样率，type等于2（请求失败）100%的采样率。
更快捷更准确接入前端监控
