• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

前端监控之接口统计

开发技术 开发技术 7天前 6次浏览

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

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

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


程序员灯塔
转载请注明原文链接:前端监控之接口统计
喜欢 (0)