feat: 增加图片上报功能

Author: free100year

packages/browser/src/browser-option.ts

@@ -26,6 +26,7 @@ export class BrowserOptions extends BaseOptions<BrowserOptionsType> {
     disabledXhr: boolean;
     disabledFetch: boolean;
     disabledFirstMeaningPaint: boolean;
+    useImgUpload: boolean;
     configReportXhr: (xhr: XMLHttpRequest, reportData: any)=> void = null;
     constructor(options: BrowserOptionsType) {
         super();
@@ -57,6 +58,7 @@ export class BrowserOptions extends BaseOptions<BrowserOptionsType> {
             disabledXhr,
             disabledFetch,
             disabledFirstMeaningPaint,
+            useImgUpload,
             configReportXhr
         } = options;
         this.disabledXhr = disabledXhr || false;
@@ -73,6 +75,7 @@ export class BrowserOptions extends BaseOptions<BrowserOptionsType> {
         this.disabledCumulativeLayoutShift = disabledCumulativeLayoutShift || false;
         this.disabledNavigation = disabledNavigation || false;
         this.disabledResource = disabledResource || false;
+        this.useImgUpload = useImgUpload || false;
         if (configReportXhr && isFunction(configReportXhr)) {
             this.configReportXhr = configReportXhr;
         }

packages/browser/src/browser-report.ts

@@ -7,6 +7,7 @@ import { get_network_info, is_support_send_beacon } from './utils';
 export class BrowserReport extends BaseReport<BrowserOptionsType> {
     configReportXhr: unknown = null;
     timer = null;
+    useImgUpload = false;
     constructor(options:BrowserOptionsType) {
         super();
         super.bindOptions(options);
@@ -23,12 +24,23 @@ export class BrowserReport extends BaseReport<BrowserOptionsType> {
         }
         xhr.send(safe_stringify(data));
     }
+    imgRequest(data: ReportBaseInfo | ReportBaseInfo[], url: string): void {
+        let _img = new Image();
+        const _spliceStr = url.indexOf('?') === -1 ? '?' : '&';
+        _img.src = `${url}${_spliceStr}data=${encodeURIComponent(safe_stringify(data))}`;
+        _img = null;
+    }
     // beacon上报
     beaconPost(data: ReportBaseInfo | ReportBaseInfo[], url: string): void {
         _global.navigator.sendBeacon.call(window.navigator, url, safe_stringify(data));
     }
     report(data: ReportBaseInfo | ReportBaseInfo[], url: string) {
-        const _fn = is_support_send_beacon() ? this.beaconPost : this.post;
+        let _fn = null;
+        if (this.useImgUpload) {
+            _fn = this.imgRequest;
+        } else {
+            _fn = is_support_send_beacon() ? this.beaconPost : this.post;
+        }
         if (_global.requestIdleCallback) { // 不阻止进程
             _global.requestIdleCallback(async() => {
                 await _fn(data, url);

packages/browser/src/types.ts

@@ -39,6 +39,7 @@ export interface BrowserDisabledOptionsType {
     disabledFetch?: boolean; // 是否禁止监控 api
     disabledXhr?: boolean; // 是否禁止监控 api
     disabledFirstMeaningPaint? : boolean; // 是否禁止监控 首次有效绘制
+    useImgUpload?:boolean // 是否使用图片上报
 }
 
 export type BrowserOptionsType = BaseOptionsType & BrowserOptionsHooksType & BrowserDisabledOptionsType