监控数据上报异常排查

上报数据方式

1、利用图片不受跨域限制，使用图片的src赋值上报

2、使用ajax上报数据

3、使用sendBeacon上传数据

查阅优劣分析之后：https://blog.csdn.net/a460550542/article/details/127709806

团队采用sendBeacon上报

背景

活动模板每个商品的发出一次询价请求，在运维nginx的数据和前端上报的数据不一致，nginx出现多出一倍的数据，

现网表现为

 

数据量为 308k，远远超过了chrome限制的64k，

解决方式1

对大数据量做切割，每次切30k的数据，代码思路如下

const report = {
    ...
    spiltData(dataList, limit = 64) {
        const sizeArr = dataList.map(v => report.getStringSizeInKB(JSON.stringify(v)));
        let prevTotal = 0,
            sliceArr = [],
            currentArr = [];
        sizeArr.forEach((v, i) => {
            const currentTotal = prevTotal + v;
            const currentData = dataList[i];
            if (v > limit) {
                sliceArr.push(currentData)
                return
            }
            if (prevTotal < limit && currentTotal >= limit) {
                sliceArr.push(currentArr.splice(0))
                currentArr = [currentData]
                prevTotal = v
            } else {
                prevTotal = currentTotal;
                currentArr.push(currentData)
            }
        })
        sliceArr.push(currentArr.splice(0))
        return sliceArr
    },
    getStringSizeInKB(str) {
        var utf8Length = encodeURI(str).split(/%..|./).length - 1;
        var size = utf8Length / 1024;
        return parseFloat(size.toFixed(2));
    },
}

由于navigator.sendBeacon并没上报回调，因此采用setTimeout调度请求，每隔500ms发一次数据，代码实现思路如下

const report = {
    ...
    sendBeacon(url, data) {
        if (navigator.sendBeacon) {
            // 解决sendBeacon64k限制
            const dataList = this.spiltData(data.data, 20);
            this.excuteSend(url, dataList)
        } else {
            this.ajaxPost(url, data)
        }
    },
    peddingDataList: [],
    excuteSend(url, dataList) {
        let timeout = null,
            result = true,
            errorTimes = 0;
        report.peddingDataList = [
            ...report.peddingDataList,
            ...dataList
        ];

        function checkSend() {
            if (result || errorTimes > 2) {
                const dataList = report.peddingDataList.splice(0, 1)[0]
                result = navigator.sendBeacon(url, JSON.stringify({
                    data: [...dataList]
                }));
                errorTimes = 0;
            } else {
                errorTimes++
            }
            timeout = setTimeout(() => {
                if (report.peddingDataList.length > 0) {
                    checkSend();
                } else {
                    clearTimeout(report.timeout)
                }
            }, 1000)
        }
        checkSend();
    },
}

部署之后表现并不佳，发现数据依然有很多没完成上报

 

解决方式2

将较大数据量的上报数据使用ajax上报，小的数据则使用navigator.sendBeacon，

考虑到数据可能会太大，分析之后大数据量主要是页面ajax请求相关的数据，在ajax请求模块，在数据量超过60条之后则立刻执行上报，思路如下

function logEntries(entries = []) {
  const xhrEntries = entries.filter(i => i.initiatorType === 'xmlhttprequest');
  cgiList.forEach((item) => {
    if (!item.url) {
      return
    }
    const entry = xhrEntries.find(i => i.name.includes(item.url));
    if (!entry) return;
    item.runSide = 'client';
  });
  if (cgiList.length > 60) {
    reportCgi()
  } else {
    utils.throttle(reportCgi, this, 500);   
  }
}

根据数据分析，在20条数据时候，上报数据约为20K，在粗略分析之后，阈值设置为20条，当数据超过20条之后，则使用ajax上报，否则使用navigator.sendBeacon

实现思路如下

const report = {
    ...
    sendBeacon(url, data) {
        // 解决sendBeacon64k限制，
        // 数据量大约1个1K,大于20个则使用ajax，避免sendBeacon失败
        this.wafData(data)
        if (navigator.sendBeacon && data.data.length < 20) {
            navigator.sendBeacon(url, JSON.stringify(data));
        } else {
            this.ajaxPost(url, data)
        }
    },
    ajaxPost(url, data, cb) {
        const xhr = new XMLHttpRequest();
        const jsonData = JSON.stringify(data);
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4 && xhr.status === 200) {
                const res = JSON.parse(xhr.responseText)
                cb && cb(res)
            }
        }
        xhr.open('POST', url);
        xhr.setRequestHeader("Content-Type", "application/json");
        xhr.send(jsonData);
    },
}

部署之后表现如下

能够正常上报