监控平台之批量上报

上报方式：

// 发送图片数据

// 普通ajax发送请求数据

// sendBeacon，如果不兼容，再使用图片上传

批量上报方法：

1.写cache.js，通过深拷贝（deepcopy函数）进行深度便利，保存数据

2.写批量上传函数lazyReportBatch

export function deepcopy(target){if(typeof target === 'object'){const result = Array.isArray(target)?[]: {};for(const key in target){if(typeof target[key]== 'object'){result[key]= deepcopy(target[key]);} else {result[key]= target[key];}}return result;}return target
}

科普小知识：

一般token生成，hash生成的格式，是36进制，也就是0至9和A至Z

Math.random().toString(36).substring(2, 9)
// '0bz4xls' 'o0hcuwy'

import config from './config'
import { addCache, clearCache, getCache } from './catch'
// 一般token生成，hash生成的格式，是36进制
// 0至9和A至Z
// Math.random().toString(36).substring(2, 9)export const originalProto = XMLHttpRequest.prototype;
export const originalSend = originalProto.send;
export const originalOpen = originalProto.open;export default function generateUniqueId() {return 'id-' + Date.now() + '-' + Math.random().toString(36).substring(2, 9)
}export function report(data) {if (!config.report) {console.error('请设置上传 url 地址');}const reportData = JSON.stringify({id: generateUniqueId(),data});// TODO 发送数据 优先使用 secdBeacon，如果不兼容，再使用图片上传4lazyReportBatch(reportData) const value = beaconRequest(config.url, reporData)if (!value) {// 上报数据，使用图片的方式config.isImageUpload ? imgRequest(reporData) : xhrRequest(config.url, reporData); }
}// 批量上传
export function lazyReportBatch(data) {// 缓存方法addCache(data);const data = getCache(data);if (data?.length > config.batchSize) {report(data);clearCache();}
}/*** 三种上报方式* 发送图片数据 * sendBeacon，如果不兼容，再使用图片上传* 普通ajax发送请求数据*/export function imgRequest(data) {const img = new Image();img.src =  `${config.url}?data=${encodeURIComponent(JSON.stringify(data))}`;
}// 普通ajax发送请求数据
export function xhrRequest(url, data) {if(window.requestIdleCallback){return flag = window.requestIdleCallback(()=>{const xhr = new XMLHttpRequest();originalOpen.call(xhr, 'POST', data.url, true);originalSend.call(xhr, JSON.stringify(data));},{ timeout: 3000 });} else {setTimeout(()=>{const xhr = new XMLHttpRequest();originalOpen.call(xhr, 'POST', data.url, true);originalSend.call(xhr, JSON.stringify(data));});}const xhr = new XMLHttpRequest();originalOpen.call(xhr, 'POST', data.url, true);originalSend.call(xhr, JSON.stringify(data));
}// sendBeacon
export function isSupportSendBeacon(){return 'sendBeacon' in navigator;
}
const sendBeacon = isSupportSendBeacon()? navigator.sendBeacon: xhrRequest
// beacon发送请求数据(存在兼容性)
export function beaconRequest(data){let flag = trueif(window.requestIdleCallback){window.requestIdleCallback(()=>{return flag = sendBeacon(config.url ,data);},{ timeout: 3000 });} else {setTimeout(()=>{return flag = sendBeacon(config.url, data)});}}