monitor-track 1.13.0 → 1.15.0

package/cjs/reporter.d.ts

@@ -184,6 +184,8 @@ export declare const reportMap: {
         detail: string;
         /** 上报时带上的请求参数 */
         requestData: string;
+        /** 上报时带上的响应结果 */
+        responseBody: string;
         /** 上报时带上的请求方法 */
         method: string;
     };

package/cjs/types/config.d.ts

@@ -16,6 +16,10 @@ export interface IConfig {
     enableBehavior?: boolean;
     /** 启用异常信息上报 */
     enableError?: boolean;
+    /** 启用异常截图上报 */
+    enableErrorScreenshot?: boolean;
+    /** 启用异常录像上报 */
+    enableErrorEvent?: boolean;
     maxLength?: number;
     /** 忽略上报的信息 */
     ignore?: {
@@ -37,8 +41,12 @@ export interface IConfig {
     enableVisualTrack?: boolean;
     /** 启用页面卡顿上报 */
     enableLagTrack?: boolean;
-    /** 上报 页面卡顿的超时时间 */
+    /** 上报页面卡顿的超时时间 */
     lagTimeout?: number;
+    /** 是否启用页面录制 */
+    enableRecord: boolean;
+    /** 启用在线人数上报 */
+    enableOnlinePersons?: boolean;
 }
 type IParams = {
     name: string;

package/cjs/types/global.d.ts

@@ -48,7 +48,8 @@ export interface IReport extends INavigator {
         statusText: string;
         reason: 'slow' | 'failed' | string;
         detail: string;
-        requestData: string;
+        requestData: string | null;
+        responseBody: string | null;
         method: string;
     } | null;
     vD?: {

package/esm/config/global.d.ts

@@ -13,5 +13,3 @@ export declare function setReportValue<T extends IReport, K extends keyof T>(key
  * @description 获取上报数据
  */
 export declare function getReport(): IReport;
-export declare const recordXMLHttpRequestLog: (XMLHttpRequestTimeout?: number) => void;
-export declare const hackFetch: (XMLHttpRequestTimeout?: number) => void;

package/esm/config/global.js

@@ -107,171 +107,6 @@ function getReport() {
         customPayload: Config.customPayload,
         dpr: window.devicePixelRatio,
     });
-}
-function ajaxEventTrigger(event) {
-    const ajaxEvent = new CustomEvent(event, {
-        detail: this,
-    });
-    window.dispatchEvent(ajaxEvent);
-}
-const OldXHR = window.XMLHttpRequest;
-function newXHR() {
-    const realXHR = new OldXHR();
-    realXHR.addEventListener('loadstart', function () {
-        ajaxEventTrigger.call(this, 'ajaxLoadStart');
-    }, false);
-    realXHR.addEventListener('loadend', function () {
-        ajaxEventTrigger.call(this, 'ajaxLoadEnd');
-    }, false);
-    // 此处的捕获的异常会连日志接口也一起捕获，如果日志上报接口异常了，就会导致死循环了。
-    realXHR.onerror = function (e) {
-        // eslint-disable-next-line no-console
-        console.warn('realXHR.onerror, e', e);
-    };
-    return realXHR;
-}
-/**
- * 页面接口请求监控
- */
-const tempUrlInfo = {};
-const recordXMLHttpRequestLog = (XMLHttpRequestTimeout) => {
-    XMLHttpRequestTimeout = typeof XMLHttpRequestTimeout === 'number' ? XMLHttpRequestTimeout : 1000;
-    const timeRecordArray = [];
-    //@ts-ignore
-    window.__XMLHttpRequest__ = window.XMLHttpRequest;
-    //@ts-ignore
-    window.XMLHttpRequest = newXHR;
-    window.addEventListener('ajaxLoadStart', function (e) {
-        const tempObj = {
-            timeStamp: new Date().getTime(),
-            event: e,
-        };
-        timeRecordArray.push(tempObj);
-    });
-    window.addEventListener('ajaxLoadEnd', function () {
-        const timeRecordArrayCopy = [].concat(timeRecordArray);
-        for (let i = 0; i < timeRecordArrayCopy.length; i++) {
-            if (timeRecordArrayCopy[i].event.detail && timeRecordArrayCopy[i].event.detail.status > 0) {
-                const currentTime = new Date().getTime();
-                const { responseURL, status, statusText, timeStamp } = timeRecordArrayCopy[i].event.detail;
-                const previousTime = timeStamp || timeRecordArrayCopy[i].timeStamp;
-                const loadTime = currentTime - previousTime;
-                const request = {
-                    requestType: 'xhr',
-                    responseURL,
-                    status,
-                    loadTime,
-                    statusText,
-                    reason: '',
-                    detail: '',
-                    requestData: '',
-                    method: '',
-                };
-                if (loadTime && loadTime > XMLHttpRequestTimeout) {
-                    request.reason = 'slow';
-                    request.detail = `request is too slow, XMLHttpRequestTimeout: ${loadTime}`;
-                }
-                else if (status && status >= 300 && statusText && statusText.toLowerCase() !== 'ok') {
-                    request.reason = 'failed';
-                    request.detail = `request is failed, status: ${status}, statusText: ${statusText}`;
-                }
-                else ;
-                if (request.reason) {
-                    if (!tempUrlInfo[responseURL]) {
-                        tempUrlInfo[responseURL] = true;
-                        setTimeout(() => {
-                            delete tempUrlInfo[responseURL];
-                        }, 10);
-                        setReportValue('error', null);
-                        report(Object.assign(Object.assign({}, getReport()), {
-                            page: location.href,
-                            originPage: location.href,
-                            type: 'request',
-                            req: request,
-                        }));
-                    }
-                }
-            }
-            // 当前请求成功后就在数组中移除掉
-            timeRecordArray.splice(i, 1);
-        }
-    });
-};
-const hackFetch = (XMLHttpRequestTimeout) => {
-    XMLHttpRequestTimeout = typeof XMLHttpRequestTimeout === 'number' ? XMLHttpRequestTimeout : 1000;
-    if (typeof window.fetch === 'function') {
-        const __fetch__ = window.fetch;
-        window.__fetch__ = __fetch__;
-        //@ts-ignore
-        window.fetch = function (t, ...args) {
-            const begin = Date.now();
-            //禁用数组的扩展运算符,否则portal的生产环境会报Uncaught TypeError: Object(...) is not a function,
-            //编译后的__spreadArray函数有问题,而这个函数来自于tslib.具体报错原因不知.
-            //其他平台使用数组的扩展运算符没有问题,比如前端监控平台的管理界面
-            const params = [].concat(t).concat(args);
-            return __fetch__
-                .apply(window, params)
-                .then(function (res) {
-                const response = res.clone();
-                const headers = response.headers;
-                if (headers && typeof headers.get === 'function') {
-                    const ct = headers.get('content-type');
-                    if (ct && !/(text)|(json)/.test(ct)) {
-                        return res;
-                    }
-                }
-                const loadTime = Date.now() - begin;
-                response
-                    .text()
-                    .then(function (result) {
-                    const { url, status, statusText, ok } = response;
-                    const request = {
-                        requestType: 'fetch',
-                        responseURL: url,
-                        status,
-                        loadTime,
-                        statusText,
-                        reason: '',
-                        detail: '',
-                        requestData: '',
-                        method: '',
-                    };
-                    if (!ok || status >= 300) {
-                        request.reason = 'failed';
-                        request.detail = `request is failed, status: ${status}, statusText: ${statusText}`;
-                    }
-                    else if (loadTime > XMLHttpRequestTimeout) {
-                        request.reason = 'slow';
-                        request.detail = `request is too slow, XMLHttpRequestTimeout: ${loadTime}, result: ${result === null || result === void 0 ? void 0 : result.slice(0, 500)}`;
-                    }
-                    if (request.reason) {
-                        if (!tempUrlInfo[url]) {
-                            tempUrlInfo[url] = true;
-                            setTimeout(() => {
-                                delete tempUrlInfo[url];
-                            }, 10);
-                            setReportValue('error', null);
-                            report(Object.assign(Object.assign({}, getReport()), {
-                                page: location.href,
-                                originPage: location.href,
-                                type: 'request',
-                                req: request,
-                            }));
-                        }
-                    }
-                })
-                    .catch((err) => {
-                    // eslint-disable-next-line no-console
-                    console.log('hackFetch response.text() err', err);
-                });
-                return res;
-            })
-                .catch((err) => {
-                // eslint-disable-next-line no-console
-                console.log('hackFetch err', err);
-            });
-        };
-    }
-};
+}
 
-export { getReport, hackFetch, initReport, recordXMLHttpRequestLog, setReportValue };
+export { getReport, initReport, setReportValue };

package/esm/config/index.js

@@ -6,12 +6,16 @@ const Config = {
     reportUrl: '',
     projectID: '',
     maxLength: 1000,
-    spa: false,
-    hash: false,
+    spa: true,
+    hash: true,
     enableBehavior: true,
     enableError: true,
+    enableErrorScreenshot: false,
+    enableErrorEvent: false,
     enableVisualTrack: false,
-    enableLagTrack: false,
+    enableLagTrack: true,
+    enableRecord: false,
+    enableOnlinePersons: true,
     ignore: {
         urls: [],
         errors: [],
@@ -23,7 +27,17 @@ const Config = {
  * @param config 配置项
  */
 function setConfig(config) {
+    var _a;
     Object.assign(Config, config);
+    if (!Config.ignore)
+        Config.ignore = {};
+    if (Array.isArray((_a = Config.ignore) === null || _a === void 0 ? void 0 : _a.errors)) {
+        ['ResizeObserver loop limit exceeded', 'ResizeObserver loop completed with undelivered notifications.', 'Cancel'].forEach((item) => {
+            if (!Config.ignore.errors.includes(item)) {
+                Config.ignore.errors.push(item);
+            }
+        });
+    }
 }
 
 export { Config, setConfig };

package/esm/config/request.d.ts

@@ -0,0 +1,15 @@
+export interface IRequestInfo {
+    requestType: 'xhr' | 'fetch';
+    method: string;
+    responseURL: string;
+    requestData: string | null;
+    responseBody: string | null;
+    status: number;
+    startTime: number;
+    loadTime: number;
+    statusText: string;
+    reason: string;
+    detail: string;
+}
+export declare const recordXMLHttpRequest: (XMLHttpRequestTimeout: number) => void;
+export declare const recordFetch: (XMLHttpRequestTimeout: number) => void;

package/esm/config/request.js

@@ -0,0 +1,158 @@
+import { __awaiter } from '../_virtual/_tslib.js';
+import { uploadRequest } from '../handlers/websocket.js';
+import { report } from '../reporter.js';
+import { setReportValue, getReport } from './global.js';
+
+let xhrTimeout = 2500;
+let fetchTimeout = 2500;
+const maxContentLength = 1000;
+// 保存原始 XMLHttpRequest
+const OriginalXHR = window.XMLHttpRequest;
+// 创建增强版的 XMLHttpRequest 类
+class InterceptedXHR extends OriginalXHR {
+    constructor() {
+        super();
+        this.requestInfo = {
+            requestType: 'xhr',
+            method: '',
+            responseURL: '',
+            requestData: null,
+            responseBody: null,
+            status: 0,
+            startTime: Date.now(),
+            loadTime: 0,
+            statusText: '',
+            reason: '',
+            detail: '',
+        };
+        this.setupInterceptors();
+    }
+    open(method, url, async = true, username, password) {
+        super.open(method, url, async, username, password);
+        this.requestInfo.method = method;
+        this.requestInfo.responseURL = url;
+    }
+    // eslint-disable-next-line no-undef
+    send(body) {
+        super.send(body);
+        try {
+            this.requestInfo.requestData =
+                typeof body === 'object' && body
+                    ? JSON.stringify(body).slice(0, maxContentLength)
+                    : typeof body === 'string'
+                        ? body.slice(0, maxContentLength)
+                        : body || '';
+        }
+        catch (err) {
+            // eslint-disable-next-line no-console
+            console.error('xhr send err: ', err, 'body', body);
+        }
+        this.requestInfo.startTime = Date.now();
+    }
+    setupInterceptors() {
+        this.addEventListener('load', () => {
+            try {
+                this.requestInfo.status = this.status;
+                this.requestInfo.responseBody = this.responseText.slice(0, maxContentLength);
+                this.requestInfo.loadTime = Date.now() - this.requestInfo.startTime;
+                this.requestInfo.statusText = this.statusText;
+                if (this.requestInfo.loadTime > xhrTimeout) {
+                    this.requestInfo.reason = 'slow';
+                    this.requestInfo.detail = `request is too slow, XMLHttpRequestTimeout: ${this.requestInfo.loadTime}`;
+                }
+                if (this.status >= 400) {
+                    this.requestInfo.reason = 'failed';
+                    this.requestInfo.detail = `request is failed, status: ${this.status}, statusText: ${this.statusText}`;
+                }
+                if (this.requestInfo.reason) {
+                    setReportValue('error', null);
+                    report(Object.assign(Object.assign({}, getReport()), {
+                        page: location.href,
+                        originPage: location.href,
+                        type: 'request',
+                        req: this.requestInfo,
+                    }));
+                }
+                uploadRequest(this.requestInfo);
+            }
+            catch (err) {
+                // eslint-disable-next-line no-console
+                console.error('xhr load err: ', err, 'this.requestInfo', this.requestInfo);
+            }
+        });
+        this.addEventListener('error', () => {
+            // console.error('❌ 请求失败:', this.requestInfo);
+        });
+    }
+}
+const recordXMLHttpRequest = (XMLHttpRequestTimeout) => {
+    xhrTimeout = XMLHttpRequestTimeout;
+    // 重写全局 XMLHttpRequest
+    window.XMLHttpRequest = InterceptedXHR;
+};
+const originalFetch = window.fetch;
+// eslint-disable-next-line no-undef
+const fetchFUnc = function (input, init) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const url = typeof input === 'string' ? input : input.toString();
+        const options = init || {};
+        const requestInfo = {
+            requestType: 'fetch',
+            method: options.method || 'GET',
+            responseURL: url,
+            requestData: typeof options.body === 'object' && options.body ? JSON.stringify(options.body).slice(0, maxContentLength) : options.body || '',
+            responseBody: '',
+            status: 0,
+            startTime: Date.now(),
+            loadTime: 0,
+            statusText: '',
+            reason: '',
+            detail: '',
+        };
+        const response = yield originalFetch(input, init);
+        try {
+            const clonedResponse = response.clone();
+            requestInfo.status = response.status;
+            requestInfo.loadTime = Date.now() - requestInfo.startTime;
+            requestInfo.statusText = response.statusText;
+            if (!response.ok) {
+                requestInfo.reason = 'failed';
+                requestInfo.detail = `request is failed, status: ${response.status}, statusText: ${response.statusText}`;
+            }
+            else {
+                if (requestInfo.loadTime > fetchTimeout) {
+                    requestInfo.reason = 'slow';
+                    requestInfo.detail = `request is too slow, XMLHttpRequestTimeout: ${requestInfo.loadTime}`;
+                }
+            }
+            try {
+                const responseBody = yield clonedResponse.text();
+                requestInfo.responseBody = responseBody.slice(0, maxContentLength);
+            }
+            catch (e) {
+                requestInfo.responseBody = (e === null || e === void 0 ? void 0 : e.message) || (e === null || e === void 0 ? void 0 : e.stack) || (e === null || e === void 0 ? void 0 : e.toString());
+            }
+            if (requestInfo.reason) {
+                setReportValue('error', null);
+                report(Object.assign(Object.assign({}, getReport()), {
+                    page: location.href,
+                    originPage: location.href,
+                    type: 'request',
+                    req: requestInfo,
+                }));
+            }
+            uploadRequest(requestInfo);
+        }
+        catch (err) {
+            // eslint-disable-next-line no-console
+            console.error('❌ 获取响应数据失败, requestInfo: ', requestInfo, 'err: ', err);
+        }
+        return response;
+    });
+};
+const recordFetch = (XMLHttpRequestTimeout) => {
+    fetchTimeout = XMLHttpRequestTimeout;
+    window.fetch = fetchFUnc;
+};
+
+export { recordFetch, recordXMLHttpRequest };

package/esm/handlers/error.d.ts

@@ -1,3 +1,4 @@
+export declare function enableRecordFunc(): void;
 /**
  * @description 错误事件触发后的操作
  */

package/esm/handlers/error.js

@@ -7,21 +7,23 @@ import { setReportValue, getReport } from '../config/global.js';
 import { report } from '../reporter.js';
 
 const eventsMatrix = [[]];
-rrweb.record({
-    emit(event, isCheckout) {
-        // isCheckout 是一个标识，告诉你重新制作了快照
-        if (isCheckout) {
-            eventsMatrix.push([]);
-        }
-        if (eventsMatrix.length > 2) {
-            eventsMatrix.shift();
-        }
-        const lastEvents = eventsMatrix[eventsMatrix.length - 1];
-        lastEvents.push(event);
-    },
-    // 每30秒重新制作快照
-    checkoutEveryNms: 30 * 1000,
-});
+function enableRecordFunc() {
+    rrweb.record({
+        emit(event, isCheckout) {
+            // isCheckout 是一个标识，告诉你重新制作了快照
+            if (isCheckout) {
+                eventsMatrix.push([]);
+            }
+            if (eventsMatrix.length > 2) {
+                eventsMatrix.shift();
+            }
+            const lastEvents = eventsMatrix[eventsMatrix.length - 1];
+            lastEvents.push(event);
+        },
+        // 每30秒重新制作快照
+        checkoutEveryNms: 30 * 1000,
+    });
+}
 /**
  * @description 错误事件触发后的操作
  */
@@ -173,4 +175,4 @@ function getFullScreenShoot(filename) {
     });
 }
 
-export { getFullScreenShoot, getUserEvents, handleError, ignoreError, setCaughtError, setPromiseError, setResourceError };
+export { enableRecordFunc, getFullScreenShoot, getUserEvents, handleError, ignoreError, setCaughtError, setPromiseError, setResourceError };

package/esm/handlers/websocket.d.ts

@@ -0,0 +1,16 @@
+import { IRequestInfo } from '../config/request';
+export declare const uploadRequest: (requestInfo: IRequestInfo) => void;
+export declare function enableOnlinePersonsFunc(): void;
+export declare const WEBSOCKET_TYPE: {
+    TRY_CONNECT: string;
+    CHECK_CONNECT: string;
+    PING: string;
+    PONG: string;
+    REPLY_SERVER_HEART_BEAT: string;
+    SOCKET_HEART_BEAT: string;
+    RESPONSE_DATE: string;
+    REMOTE_DEBUG_ENABLE: string;
+    DEBUG_INFO_UPLOAD: string;
+    REPlY_MESSAGE: string;
+};
+export declare const closeWebsocket: (info: string) => void;