monitor-track 1.13.0 → 1.15.0

package/esm/handlers/websocket.js

@@ -0,0 +1,277 @@
+import { __awaiter } from '../_virtual/_tslib.js';
+import { Config } from '../config/index.js';
+import { getReport } from '../config/global.js';
+import { getUid } from '../utils/index.js';
+
+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);
+        };
+    });
+};
+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 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);
+        };
+        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(),
+                };
+                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 {
+                    resetConsole();
+                }
+                break;
+            }
+            case WEBSOCKET_TYPE.REPlY_MESSAGE: {
+                // eslint-disable-next-line no-console
+                console.info('incomingMessage REPlY_MESSAGE, data: ', data.data);
+                break;
+            }
+            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 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);
+};
+
+export { WEBSOCKET_TYPE, closeWebsocket, enableOnlinePersonsFunc, uploadRequest };

package/esm/index.d.ts

@@ -22,11 +22,6 @@ export default class Track {
      * @description 页面将要关闭
      */
     addListenUnload(): void;
-    /**
-     * 忽略的url
-     * @param urls
-     */
-    ignoreUrl(urls: string[]): boolean;
     /**
      * @description 销毁监听器
      */

package/esm/index.js

@@ -1,9 +1,11 @@
 import { Config, setConfig } from './config/index.js';
-import { initReport, recordXMLHttpRequestLog, hackFetch } from './config/global.js';
+import { initReport } from './config/global.js';
+import { recordXMLHttpRequest, recordFetch } from './config/request.js';
 import { monitorTrackSessionId } from './constant.js';
 import { handlePageLag, _history, handleHistoryChange } from './handlers/pv.js';
-import { handleError } from './handlers/error.js';
+import { enableRecordFunc, handleError } from './handlers/error.js';
 import { handleClick, handleBlur, handleScroll } from './handlers/user-activity.js';
+import { enableOnlinePersonsFunc, closeWebsocket } from './handlers/websocket.js';
 import { initWindowObjectFunction, on, off, visualTrackFunc, handleLocationChange } from './utils/index.js';
 
 class Track {
@@ -18,8 +20,10 @@ class Track {
         this.listenPageLag = () => {
             this.observer = new PerformanceObserver((list) => {
                 list.getEntries().forEach((entry) => {
-                    if (entry.duration > (Config.lagTimeout || 400)) {
+                    if (entry.duration > (Config.lagTimeout || 800)) {
                         handlePageLag(entry.duration);
+                        // eslint-disable-next-line no-console
+                        console.log('监测到页面卡顿：', entry.duration, entry, location.href);
                     }
                 });
             });
@@ -27,7 +31,6 @@ class Track {
         };
     }
     init(config) {
-        var _a;
         // 是否开启日志收集
         if (!config || !config.enable) {
             return;
@@ -44,18 +47,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();
     }
@@ -95,14 +97,6 @@ class Track {
             this.destroy();
         });
     }
-    /**
-     * 忽略的url
-     * @param urls
-     */
-    ignoreUrl(urls) {
-        const someUrl = urls.some((url) => location.href.includes(url));
-        return someUrl;
-    }
     /**
      * @description 销毁监听器
      */
@@ -125,6 +119,7 @@ class Track {
         this.lagTimer && clearInterval(this.lagTimer);
         (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
         sessionStorage.removeItem(monitorTrackSessionId);
+        closeWebsocket('destroy');
     }
 }
 

package/esm/package.json.js

@@ -1,3 +1,3 @@
-var version = "1.13.0";
+var version = "1.15.0";
 
 export { version };

package/esm/reporter.d.ts

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

package/esm/reporter.js

@@ -188,6 +188,8 @@ const reportMap = {
         detail: 'de',
         /** 上报时带上的请求参数 */
         requestData: 'rD',
+        /** 上报时带上的响应结果 */
+        responseBody: 'rB',
         /** 上报时带上的请求方法 */
         method: 'rM',
     },
@@ -256,7 +258,7 @@ function reportFunc(data) {
                 delete ERROR_MESSAGE_MAP[message];
             }, 3000);
             const { p, pid, host, bN, pt } = payload;
-            if ((_c = data.error) === null || _c === void 0 ? void 0 : _c.events) {
+            if (((_c = data.error) === null || _c === void 0 ? void 0 : _c.events) && Config.enableErrorEvent) {
                 hasErrorEvent = true;
                 const errorEvent = data.error.events;
                 const delayTime = Math.ceil(Math.random() * 10000);
@@ -267,17 +269,19 @@ function reportFunc(data) {
                     });
                 }, delayTime < 3500 ? 3500 : delayTime);
             }
-            picturePromise = getFullScreenShoot(filename)
-                .then((file) => {
-                return new Promise((res) => {
-                    xhrFunc(file.name, data.uuid, filename, file, res, (result) => {
-                        payload.error.pic = result;
-                    }, { p, pid, host, bN, pt });
+            if (Config.enableErrorScreenshot) {
+                picturePromise = getFullScreenShoot(filename)
+                    .then((file) => {
+                    return new Promise((res) => {
+                        xhrFunc(file.name, data.uuid, filename, file, res, (result) => {
+                            payload.error.pic = result;
+                        }, { p, pid, host, bN, pt });
+                    });
+                })
+                    .catch((err) => {
+                    payload.error.picError = (err === null || err === void 0 ? void 0 : err.stack) || (err === null || err === void 0 ? void 0 : err.toString());
                 });
-            })
-                .catch((err) => {
-                payload.error.picError = (err === null || err === void 0 ? void 0 : err.stack) || (err === null || err === void 0 ? void 0 : err.toString());
-            });
+            }
         }
     }
     return picturePromise
@@ -314,6 +318,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') {

package/esm/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/esm/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?: {