monitor-track 1.13.0 → 1.14.0

package/README.md

@@ -43,9 +43,12 @@ track.init({
 | hash                  | boolean       | 否   | false  | 路由是否为 hash 模式                               |
 | enableBehavior        | boolean       | 否   | true   | 启用用户行为上报                                   |
 | enableError           | boolean       | 否   | true   | 启用异常信息上报                                   |
+| enableErrorScreenshot | boolean       | 否   | false  | 启用异常时的截图上报                                   |
+| enableErrorEvent      | boolean       | 否   | false  | 启用异常时的录像上报                                   |
 | enableVisualTrack     | boolean       | 否   | false  | 启用可视化埋点上报                                 |
 | enableLagTrack        | boolean       | 否   | false  | 启用页面卡顿信息上报                                   |
 | lagTimeout            | number        | 否   | 400    | 页面卡顿上报的阈值时间（毫秒）                             |
+| enableRecord          | boolean       | 否   | false  | 启用页面录制                                       |
 | ignore                | 见下方 ignore  | 否   | false  | 忽略上报的信息                                     |
 | customPayload         | string        | 否   | false  | 自定义 payload                                     |
 | enable                | boolean       | 否   | false  | 是否开启日志收集，默认关闭                         |

package/cjs/handlers/error.d.ts

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

package/cjs/index.js

@@ -44,8 +44,11 @@ const Config = {
     hash: false,
     enableBehavior: true,
     enableError: true,
+    enableErrorScreenshot: false,
+    enableErrorEvent: false,
     enableVisualTrack: false,
-    enableLagTrack: false,
+    enableLagTrack: true,
+    enableRecord: false,
     ignore: {
         urls: [],
         errors: [],
@@ -57,27 +60,39 @@ 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);
+            }
+        });
+    }
 }
 
-var version = "1.13.0";
+var version = "1.14.0";
 
 const eventsMatrix = [[]];
-rrweb__namespace.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__namespace.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 错误事件触发后的操作
  */
@@ -903,7 +918,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);
@@ -914,17 +929,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
@@ -1398,8 +1415,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);
                     }
                 });
             });
@@ -1436,6 +1455,7 @@ class Track {
         Config.enableError && this.addListenJSUncaught();
         Config.enableVisualTrack && this.visualTrack();
         Config.enableLagTrack && this.listenPageLag();
+        Config.enableRecord && enableRecordFunc();
         this.addListenUnload();
         initWindowObjectFunction();
     }

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,10 @@ export interface IConfig {
     enableVisualTrack?: boolean;
     /** 启用页面卡顿上报 */
     enableLagTrack?: boolean;
-    /** 上报 页面卡顿的超时时间 */
+    /** 上报页面卡顿的超时时间 */
     lagTimeout?: number;
+    /** 是否启用页面录制 */
+    enableRecord: boolean;
 }
 type IParams = {
     name: string;

package/esm/config/index.js

@@ -10,8 +10,11 @@ const Config = {
     hash: false,
     enableBehavior: true,
     enableError: true,
+    enableErrorScreenshot: false,
+    enableErrorEvent: false,
     enableVisualTrack: false,
-    enableLagTrack: false,
+    enableLagTrack: true,
+    enableRecord: false,
     ignore: {
         urls: [],
         errors: [],
@@ -23,7 +26,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/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/index.js

@@ -2,7 +2,7 @@ import { Config, setConfig } from './config/index.js';
 import { initReport, recordXMLHttpRequestLog, hackFetch } from './config/global.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 { initWindowObjectFunction, on, off, visualTrackFunc, handleLocationChange } from './utils/index.js';
 
@@ -18,8 +18,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);
                     }
                 });
             });
@@ -56,6 +58,7 @@ class Track {
         Config.enableError && this.addListenJSUncaught();
         Config.enableVisualTrack && this.visualTrack();
         Config.enableLagTrack && this.listenPageLag();
+        Config.enableRecord && enableRecordFunc();
         this.addListenUnload();
         initWindowObjectFunction();
     }

package/esm/package.json.js

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

package/esm/reporter.js

@@ -256,7 +256,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 +267,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

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,10 @@ export interface IConfig {
     enableVisualTrack?: boolean;
     /** 启用页面卡顿上报 */
     enableLagTrack?: boolean;
-    /** 上报 页面卡顿的超时时间 */
+    /** 上报页面卡顿的超时时间 */
     lagTimeout?: number;
+    /** 是否启用页面录制 */
+    enableRecord: boolean;
 }
 type IParams = {
     name: string;

package/index.js

@@ -38,8 +38,11 @@ var MonitorTrack = (function (uuid, ErrorStackParser, html2canvas, rrweb, axios,
         hash: false,
         enableBehavior: true,
         enableError: true,
+        enableErrorScreenshot: false,
+        enableErrorEvent: false,
         enableVisualTrack: false,
-        enableLagTrack: false,
+        enableLagTrack: true,
+        enableRecord: false,
         ignore: {
             urls: [],
             errors: [],
@@ -51,7 +54,17 @@ var MonitorTrack = (function (uuid, ErrorStackParser, html2canvas, rrweb, axios,
      * @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(function (item) {
+                if (!Config.ignore.errors.includes(item)) {
+                    Config.ignore.errors.push(item);
+                }
+            });
+        }
     }
 
     /******************************************************************************
@@ -123,24 +136,26 @@ var MonitorTrack = (function (uuid, ErrorStackParser, html2canvas, rrweb, axios,
         return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
     };
 
-    var version = "1.13.0";
+    var version = "1.14.0";
 
     var eventsMatrix = [[]];
-    rrweb__namespace.record({
-        emit: function (event, isCheckout) {
-            // isCheckout 是一个标识，告诉你重新制作了快照
-            if (isCheckout) {
-                eventsMatrix.push([]);
-            }
-            if (eventsMatrix.length > 2) {
-                eventsMatrix.shift();
-            }
-            var lastEvents = eventsMatrix[eventsMatrix.length - 1];
-            lastEvents.push(event);
-        },
-        // 每30秒重新制作快照
-        checkoutEveryNms: 30 * 1000
-    });
+    function enableRecordFunc() {
+        rrweb__namespace.record({
+            emit: function (event, isCheckout) {
+                // isCheckout 是一个标识，告诉你重新制作了快照
+                if (isCheckout) {
+                    eventsMatrix.push([]);
+                }
+                if (eventsMatrix.length > 2) {
+                    eventsMatrix.shift();
+                }
+                var lastEvents = eventsMatrix[eventsMatrix.length - 1];
+                lastEvents.push(event);
+            },
+            // 每30秒重新制作快照
+            checkoutEveryNms: 30 * 1000
+        });
+    }
     /**
      * @description 错误事件触发后的操作
      */
@@ -949,7 +964,7 @@ var MonitorTrack = (function (uuid, ErrorStackParser, html2canvas, rrweb, axios,
                     delete ERROR_MESSAGE_MAP[message_1];
                 }, 3000);
                 var p_1 = payload.p, pid_1 = payload.pid, host_1 = payload.host, bN_1 = payload.bN, pt_1 = payload.pt;
-                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;
                     var errorEvent_1 = data.error.events;
                     var delayTime = Math.ceil(Math.random() * 10000);
@@ -960,16 +975,18 @@ var MonitorTrack = (function (uuid, ErrorStackParser, html2canvas, rrweb, axios,
                         });
                     }, delayTime < 3500 ? 3500 : delayTime);
                 }
-                picturePromise = getFullScreenShoot(filename)
-                    .then(function (file) {
-                    return new Promise(function (res) {
-                        xhrFunc(file.name, data.uuid, filename, file, res, function (result) {
-                            payload.error.pic = result;
-                        }, { p: p_1, pid: pid_1, host: host_1, bN: bN_1, pt: pt_1 });
+                if (Config.enableErrorScreenshot) {
+                    picturePromise = getFullScreenShoot(filename)
+                        .then(function (file) {
+                        return new Promise(function (res) {
+                            xhrFunc(file.name, data.uuid, filename, file, res, function (result) {
+                                payload.error.pic = result;
+                            }, { p: p_1, pid: pid_1, host: host_1, bN: bN_1, pt: pt_1 });
+                        });
+                    })["catch"](function (err) {
+                        payload.error.picError = (err === null || err === void 0 ? void 0 : err.stack) || (err === null || err === void 0 ? void 0 : err.toString());
                     });
-                })["catch"](function (err) {
-                    payload.error.picError = (err === null || err === void 0 ? void 0 : err.stack) || (err === null || err === void 0 ? void 0 : err.toString());
-                });
+                }
             }
         }
         return picturePromise
@@ -1450,8 +1467,10 @@ var MonitorTrack = (function (uuid, ErrorStackParser, html2canvas, rrweb, axios,
             this.listenPageLag = function () {
                 _this.observer = new PerformanceObserver(function (list) {
                     list.getEntries().forEach(function (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);
                         }
                     });
                 });
@@ -1488,6 +1507,7 @@ var MonitorTrack = (function (uuid, ErrorStackParser, html2canvas, rrweb, axios,
             Config.enableError && this.addListenJSUncaught();
             Config.enableVisualTrack && this.visualTrack();
             Config.enableLagTrack && this.listenPageLag();
+            Config.enableRecord && enableRecordFunc();
             this.addListenUnload();
             initWindowObjectFunction();
         };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "monitor-track",
-  "version": "1.13.0",
+  "version": "1.14.0",
   "description": "前端监控及埋点SDK工具javascript版本",
   "main": "cjs/index.js",
   "module": "esm/index.js",