monitor-track 1.14.0 → 1.15.0

package/cjs/index.js

@@ -40,8 +40,8 @@ const Config = {
     reportUrl: '',
     projectID: '',
     maxLength: 1000,
-    spa: false,
-    hash: false,
+    spa: true,
+    hash: true,
     enableBehavior: true,
     enableError: true,
     enableErrorScreenshot: false,
@@ -49,6 +49,7 @@ const Config = {
     enableVisualTrack: false,
     enableLagTrack: true,
     enableRecord: false,
+    enableOnlinePersons: true,
     ignore: {
         urls: [],
         errors: [],
@@ -73,7 +74,7 @@ function setConfig(config) {
     }
 }
 
-var version = "1.14.0";
+var version = "1.15.0";
 
 const eventsMatrix = [[]];
 function enableRecordFunc() {
@@ -850,6 +851,8 @@ const reportMap = {
         detail: 'de',
         /** 上报时带上的请求参数 */
         requestData: 'rD',
+        /** 上报时带上的响应结果 */
+        responseBody: 'rB',
         /** 上报时带上的请求方法 */
         method: 'rM',
     },
@@ -978,6 +981,10 @@ function reportFunc(data) {
 // 上报
 function report(data) {
     return new Promise((res) => {
+        var _a;
+        if ((((_a = Config.ignore) === null || _a === void 0 ? void 0 : _a.urls) || []).some((url) => location.href.includes(url))) {
+            return;
+        }
         //在帧的空闲时间上报
         const dataCopy = JSON.parse(JSON.stringify(data));
         if (typeof window.requestIdleCallback === 'function') {
@@ -1236,171 +1243,429 @@ function getReport() {
         customPayload: Config.customPayload,
         dpr: window.devicePixelRatio,
     });
-}
-function ajaxEventTrigger(event) {
-    const ajaxEvent = new CustomEvent(event, {
-        detail: this,
+}
+
+let reconnectAndSendTimeout, websocketHeartBeatInterval, ws, userId = '';
+let remoteDebugEnable = false;
+let targetPlatform = '';
+let targetUserId = '';
+const originConsole = Object.assign({}, console);
+const formatConsole = () => {
+    if (remoteDebugEnable)
+        return;
+    remoteDebugEnable = true;
+    window.console = Object.assign({}, originConsole);
+    const arr = ['debug', 'log', 'info', 'warn', 'error'];
+    arr.forEach((item) => {
+        //@ts-ignore
+        window.console[item] = function (...args) {
+            //@ts-ignore
+            originConsole[item](...args);
+            const data = {
+                origin: 'console',
+                level: item,
+                userId,
+                time: new Date().toLocaleString(),
+                page: location.href,
+                content: '',
+                targetPlatform,
+                targetUserId,
+            };
+            try {
+                const content = JSON.stringify(args);
+                data.content = content;
+            }
+            catch (err) {
+                data.content = 'console内容解析错误： ' + err.stack || err.message || err.toString();
+            }
+            const msg = {
+                type: WEBSOCKET_TYPE.DEBUG_INFO_UPLOAD,
+                userId,
+                platform: 'monitor-track-sdk',
+                data,
+            };
+            wsSendFunc(msg);
+        };
     });
-    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 resetConsole = () => {
+    window.console = originConsole;
+    remoteDebugEnable = false;
+};
+const uploadRequest = (requestInfo) => {
+    // console.log('monitor-track-sdk: uploadRequest remoteDebugEnable', remoteDebugEnable);
+    if (remoteDebugEnable) {
+        const data = {
+            origin: 'request',
+            userId,
+            time: new Date().toLocaleString(),
+            page: location.href,
+            content: requestInfo,
+            targetPlatform,
+            targetUserId,
+        };
+        const msg = {
+            type: WEBSOCKET_TYPE.DEBUG_INFO_UPLOAD,
+            userId,
+            platform: 'monitor-track-sdk',
+            data,
+        };
+        // console.log('monitor-track-sdk: request-upload sent');
+        wsSendFunc(msg);
+    }
+};
+function enableOnlinePersonsFunc() {
+    initWebsocket();
 }
-/**
- * 页面接口请求监控
- */
-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,
+const WEBSOCKET_TYPE = {
+    TRY_CONNECT: 'try-connect',
+    CHECK_CONNECT: 'check-connect',
+    PING: 'ping',
+    PONG: 'pong',
+    REPLY_SERVER_HEART_BEAT: 'reply-server-heart-beat',
+    SOCKET_HEART_BEAT: 'socket-heart-beat',
+    RESPONSE_DATE: 'response-date',
+    REMOTE_DEBUG_ENABLE: 'remote-debug-enable',
+    DEBUG_INFO_UPLOAD: 'debug-info-upload',
+    REPlY_MESSAGE: 'reply-message',
+};
+let mounted = false;
+const initWebsocket = () => {
+    if (window.WebSocket) {
+        userId = localStorage.getItem('username') || getUid();
+        closeWebsocket('');
+        websocketHeartBeatInterval = setInterval(reconnectAndSend, 30000);
+        const isLocal = Config.reportUrl.includes('http://');
+        ws = new WebSocket(`ws${isLocal ? '' : 's'}://${Config.reportUrl.replace(isLocal ? 'http://' : 'https://', '').replace('/s/r', '')}?type=monitor-dsk`);
+        ws.onopen = () => openWS();
+        ws.onmessage = (data) => incomingMessage(data);
+        ws.onerror = () => {
+            ws.close(1000);
+            if (websocketHeartBeatInterval)
+                clearInterval(websocketHeartBeatInterval);
+            websocketHeartBeatInterval = setInterval(reconnectAndSend, 10000);
         };
-        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: '',
+        ws.onclose = () => {
+            ws.close(1000);
+            if (websocketHeartBeatInterval)
+                clearInterval(websocketHeartBeatInterval);
+            websocketHeartBeatInterval = setInterval(reconnectAndSend, 10000);
+        };
+        if (!mounted) {
+            reconnectNetwork();
+            mounted = true;
+        }
+    }
+};
+const openWS = () => {
+    const data = getReport();
+    const { page, projectID, host, pageTitle } = data;
+    const msg = {
+        type: WEBSOCKET_TYPE.TRY_CONNECT,
+        userId,
+        platform: 'monitor-track-sdk',
+        data: {
+            p: page,
+            pid: projectID,
+            host,
+            pt: pageTitle,
+            platform: 'web',
+        },
+    };
+    wsSendFunc(msg);
+};
+const reconnectAndSend = () => {
+    try {
+        if (ws.readyState !== 1) {
+            reconnectSocket();
+        }
+        else {
+            const msg = {
+                type: WEBSOCKET_TYPE.CHECK_CONNECT,
+                userId,
+                data: WEBSOCKET_TYPE.PING,
+                date: Date.now(),
+            };
+            wsSendFunc(msg, 'reconnectAndSend');
+            //  20秒超时，如果收不到服务端pong响应则表示服务端已主动断开连接，此时需客户端重新开启websocket连接
+            reconnectAndSendTimeout = setTimeout(() => {
+                reconnectSocket();
+            }, 20000);
+        }
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    }
+    catch (_err) {
+        // console.error('monitor-track-sdk: reconnectAndSend err', err);
+    }
+};
+const closeWebsocket = (info) => {
+    if (ws) {
+        ws.onopen = null;
+        ws.onmessage = null;
+        ws.onerror = null;
+        ws.onclose = null;
+        if (ws.readyState === WebSocket.OPEN || ws.readyState === WebSocket.CONNECTING) {
+            ws.close(1000, info);
+        }
+        //@ts-ignore
+        ws = null; // 释放引用
+    }
+    if (websocketHeartBeatInterval)
+        clearInterval(websocketHeartBeatInterval);
+};
+const reconnectSocket = () => {
+    // console.warn('monitor-track-sdk: 正在重新建立websocket连接...');
+    initWebsocket();
+};
+const incomingMessage = (e) => __awaiter(void 0, void 0, void 0, function* () {
+    let data = {};
+    try {
+        data = JSON.parse(e.data);
+        // console.info('incomingMessage data', data);
+        switch (data.type) {
+            case WEBSOCKET_TYPE.PONG:
+                // console.info('monitor-track-sdk: incomingMessage 响应客户端的心跳: ping => pong');
+                clearTimeout(reconnectAndSendTimeout);
+                break;
+            case WEBSOCKET_TYPE.SOCKET_HEART_BEAT: {
+                // console.info('monitor-track-sdk: incomingMessage 响应服务端的心跳: heart beat => ', new Date().toLocaleString());
+                const msg = {
+                    type: WEBSOCKET_TYPE.CHECK_CONNECT,
+                    userId,
+                    data: WEBSOCKET_TYPE.REPLY_SERVER_HEART_BEAT,
+                    date: Date.now(),
                 };
-                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}`;
+                wsSendFunc(msg, 'socket-heart-beat reply-server-heart-beat');
+                break;
+            }
+            case WEBSOCKET_TYPE.RESPONSE_DATE:
+                // console.info(`monitor-track-sdk: incomingMessage WS connected, Roundtrip time: ${Date.now() - data.data} ms`);
+                break;
+            case WEBSOCKET_TYPE.REMOTE_DEBUG_ENABLE: {
+                // console.log('monitor-track-sdk REMOTE_DEBUG_ENABLE data.data', data.data);
+                const { enable, platform, userId } = data.data;
+                if (enable && platform && userId) {
+                    targetPlatform = platform;
+                    targetUserId = userId;
+                    formatConsole();
                 }
-                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,
-                        }));
-                    }
+                else {
+                    resetConsole();
                 }
+                break;
+            }
+            case WEBSOCKET_TYPE.REPlY_MESSAGE: {
+                // eslint-disable-next-line no-console
+                console.info('incomingMessage REPlY_MESSAGE, data: ', data.data);
+                break;
             }
-            // 当前请求成功后就在数组中移除掉
-            timeRecordArray.splice(i, 1);
+            default:
+                // console.error('incomingMessage default error', data);
+                break;
         }
-    });
+    }
+    catch (err) {
+        // eslint-disable-next-line no-console
+        console.error('monitor-track-sdk incomingMessage JSON.parse', err);
+    }
+});
+const wsSendFunc = (msg, _info) => {
+    if (ws.readyState === 1) {
+        msg.platform = 'monitor-track-sdk';
+        const message = JSON.stringify(msg);
+        ws.send(message);
+    }
+    else {
+        // console.warn('monitor-track-sdk: window.ws.readyState === 1 info', info);
+        reconnectSocket();
+    }
 };
-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 reconnectNetwork = () => {
+    let networkFlag = false;
+    let debounceTimeout = null;
+    document.addEventListener('offline', function () {
+        // 断开网络
+        try {
+            // console.info('monitor-track-sdk: 客户端网络已断开,正在关闭websocket');
+            ws.close(1000);
+            networkFlag = true;
+            debounceTimeout = setTimeout(() => {
+                // console.warn('monitor-track-sdk: reconnectNetwork  offline 无法访问网络');
+                // message.error('无法访问网络');
+            }, 5000);
+        }
+        catch (err) {
+            // console.error('monitor-track-sdk: addEventListener offline after setTimeout', err);
+        }
+    }, false);
+    document.addEventListener('online', function () {
+        // 连接到网络
+        try {
+            if (networkFlag === true) {
+                clearTimeout(debounceTimeout);
+                // console.info('monitor-track-sdk: addEventListener reconnectNetwork  online');
+                // message.success('网络已恢复');
+                networkFlag = false;
+                // console.warn('monitor-track-sdk: addEventListener online websocket 正在重新建立连接...');
+                initWebsocket();
+            }
+        }
+        catch (err) {
+            // console.error('monitor-track-sdk: document.addEventListener online', err);
+        }
+    }, false);
+};
+
+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}`;
                 }
-                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) => {
+                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.log('hackFetch err', err);
-            });
-        };
+                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;
 };
 
 class Track {
@@ -1426,7 +1691,6 @@ class Track {
         };
     }
     init(config) {
-        var _a;
         // 是否开启日志收集
         if (!config || !config.enable) {
             return;
@@ -1443,19 +1707,17 @@ class Track {
             console.warn('缺少上报地址!');
             return;
         }
-        if (this.ignoreUrl(((_a = config === null || config === void 0 ? void 0 : config.ignore) === null || _a === void 0 ? void 0 : _a.urls) || [])) {
-            return;
-        }
         setConfig(config);
         initReport();
-        recordXMLHttpRequestLog(config.XMLHttpRequestTimeout);
-        hackFetch(config.XMLHttpRequestTimeout);
+        recordXMLHttpRequest(config.XMLHttpRequestTimeout || 2500);
+        recordFetch(config.XMLHttpRequestTimeout || 2500);
         Config.spa && this.addListenRouterChange();
         Config.enableBehavior && this.addListenUserActivity();
         Config.enableError && this.addListenJSUncaught();
         Config.enableVisualTrack && this.visualTrack();
         Config.enableLagTrack && this.listenPageLag();
         Config.enableRecord && enableRecordFunc();
+        Config.enableOnlinePersons && enableOnlinePersonsFunc();
         this.addListenUnload();
         initWindowObjectFunction();
     }
@@ -1495,14 +1757,6 @@ class Track {
             this.destroy();
         });
     }
-    /**
-     * 忽略的url
-     * @param urls
-     */
-    ignoreUrl(urls) {
-        const someUrl = urls.some((url) => location.href.includes(url));
-        return someUrl;
-    }
     /**
      * @description 销毁监听器
      */
@@ -1525,6 +1779,7 @@ class Track {
         this.lagTimer && clearInterval(this.lagTimer);
         (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
         sessionStorage.removeItem(monitorTrackSessionId);
+        closeWebsocket('destroy');
     }
 }