前端监控之接口统计

一、意义：
  接口的成功率直接影响用户的转化率，像用户注册、支付、提交信息等接口如果异常的话，后果是很严重的。线上会因为各种情况，是在开发和测试阶段是不能解决的，所以监控线上接口状态是很必要的。

二、捕获方法：
接口响应捕获有两种方法：
  第一种是通过在业务中获取接口响应，比如在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%的采样率。

更快捷更准确接入前端监控