一、意義：
接口的成功率直接影響用戶的轉(zhuǎn)化率仲义，像用戶注冊婶熬、支付、提交信息等接口如果異常的話埃撵，后果是很嚴(yán)重的赵颅。線上會因為各種情況，是在開發(fā)和測試階段是不能解決的暂刘，所以監(jiān)控線上接口狀態(tài)是很必要的饺谬。
二、捕獲方法：
接口響應(yīng)捕獲有兩種方法：
??第一種是通過在業(yè)務(wù)中獲取接口響應(yīng)谣拣，比如在axios的結(jié)果獲取接口響應(yīng)信息募寨，這種缺點是如果有多個項目，需要在每個項目進(jìn)行侵入代碼森缠，工作量大并且容易出錯拔鹰。
??第二種是重寫XMLHttpRequest和fetch，這樣不需要侵入業(yè)務(wù)贵涵，監(jiān)聽請求響應(yīng)結(jié)果列肢。具體代碼如下
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;
};
}
只做了監(jiān)聽響應(yīng)結(jié)果宾茂，這樣對原生方法完全沒有任何改變瓷马。axios是基于XMLHttpRequest進(jìn)行封裝，也不會影響到請求插件跨晴。
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，對響應(yīng)promise拷貝一份單獨處理端盆。
三树瞭、上報參數(shù)：
捕獲頁面所有請求，監(jiān)控接口響應(yīng)結(jié)果爱谁。上報以下信息：
??1、url: string // 接口地址
??2孝偎、type: 1|2; // 1: 請求成功访敌；2: 失敗
??3、status: number; // 狀態(tài)碼
??4衣盾、msg: string // 錯誤消息
??5寺旺、delay: number // 接口響應(yīng)時間
??6爷抓、res: string // status不等于200的響應(yīng)文本
得到響應(yīng)結(jié)果后，會根據(jù)采樣率進(jìn)行上報阻塑，采樣率即上報的概率蓝撇。采樣率：type等于1（請求成功）10%的采樣率，type等于2（請求失敵旅А）100%的采樣率渤昌。
更快捷更準(zhǔn)確接入前端監(jiān)控
