@qiu_jun/monitors 0.0.6 → 0.0.8

package/README.md

@@ -2,8 +2,6 @@
 
 前端监控 SDK：采集异常 + 性能指标，上报至异常分析平台（main-server `/api/exception/report`）。
 
-内置 reporter（与 main-server `exception-sdk` 协议对齐），**无外部 SDK 依赖**，可独立打包发布 npm。
-
 ## 安装
 
 ```bash
@@ -49,12 +47,36 @@ const monitor = new Monitor({
 |---|---|---|
 | JS 错误 | `error` | 含选择器、白屏检测 |
 | Promise 未捕获 | `unhandledrejection` | |
-| 资源加载失败 | `resource` | img/script/css 等 |
 | XHR 失败/超时 | `request` | message 格式 `Request failed [500]: GET /api/...` |
 | FP/FCP/FMP/LCP | `paint` | 指标在 `device` |
 | DOMContentLoaded/load | `timing` | |
 | 长任务 | `longTask` | duration ≥ 100ms 时 level=WARN |
 
+## 错误回放（可选，Web/H5）
+
+基于 rrweb 环形录制用户操作，**出错时**上传最近 15~30 秒回放（独立接口），错误事件通过 `device.replayId` 关联，异常平台用 rrweb-player 播放。小程序无 DOM 不支持。
+
+```ts
+new Monitor({
+  // ...
+  replay: {
+    enabled: true,
+    sampleRate: 1,             // 会话采样 0-1，默认 1
+    bufferSeconds: 30,         // 环形缓冲长度，默认 30秒
+    maxUploadsPerSession: 10,  // 单会话上传上限，默认 10
+    minUploadIntervalMs: 30000,
+    captureRequest: false,     // 请求失败是否也触发，默认 false
+    maskTextClass: 'rr-mask',  // 文本脱敏类名
+    // replayEndpoint: '...',  // 默认由 endpoint 末尾 /report 换成 /replay
+  },
+})
+```
+
+- 仅 `error` / `unhandledrejection` 触发上传；回放走独立 `POST {endpoint 前缀}/replay`，失败静默不影响错误上报
+- 同类错误采集去重：顶层 `errorDedupeMs`（默认 `0` 不启用）与 `replay.minUploadIntervalMs` 设为同值（如 `30000`）后，同一错误窗口内 1 条事件必带 1 条回放（1:1），顺带减少上报量
+- 隐私默认：输入值全脱敏；敏感文本加 `.rr-mask`、敏感区域加 `.rr-block`
+- 回放上传需服务端支持（契约见 [backend-integration.md](./backend-integration.md) §2.3）；script 标签（UMD）接入需页面提供 rrweb / pako 的 import map，否则回放静默禁用
+
 ## 手动上报
 
 ```ts
@@ -68,11 +90,11 @@ monitor.capture({
 ## 构建发布
 
 ```bash
-pnpm build   # tsc → dist/*.js + *.d.ts，vite → dist/monitor.umd.js
+pnpm build   # tsc → dist/*.js + *.d.ts，strip-console 剥离 console.*，vite → dist/monitor.umd.js
 npm publish
 ```
 
-产物：
+产物均不含 `console.*`（调试 `console.log` 与降级 `console.warn` 一并剥离；UMD 由 vite terser `drop_console`，其余由 `scripts/strip-console.mjs`）：
 
 | 路径 | 说明 |
 |---|---|

package/dist/interface/index.d.ts

@@ -15,6 +15,31 @@ export interface IMonitorOptions {
     /** XHR 超时阈值 ms，默认 60000（1 分钟） */
     timeoutDuration?: number;
     maxQueueSize?: number;
+    /** 同类错误采集去重窗口（ms），默认 0 不启用；窗口内 errorType+message+filename 相同的错误只上报一条。建议与 replay.minUploadIntervalMs 同值（如 30000），错误事件与回放 1:1 */
+    errorDedupeMs?: number;
+    /** 错误回放（仅 Web/H5，小程序无 DOM 不支持），默认关闭 */
+    replay?: ReplayOptions;
+}
+/** 错误回放配置：环形录制最近操作，出错时上传最近 15~30 秒，经独立接口 + device.replayId 关联异常事件 */
+export interface ReplayOptions {
+    /** 开启回放，默认 false */
+    enabled?: boolean;
+    /** 会话采样率 0-1，默认 1（命中才录制） */
+    sampleRate?: number;
+    /** 环形缓冲长度（秒），默认 30（实际覆盖 bufferSeconds/2 ~ bufferSeconds） */
+    bufferSeconds?: number;
+    /** 单会话回放上传上限，默认 10 */
+    maxUploadsPerSession?: number;
+    /** 两次上传最小间隔（ms），默认 30000 */
+    minUploadIntervalMs?: number;
+    /** 单条回放解压前体积上限（字节），默认 2MB，超出只保留最新快照段 */
+    maxReplayBytes?: number;
+    /** 请求失败是否也触发回放上传，默认 false（仅 error/unhandledrejection 触发） */
+    captureRequest?: boolean;
+    /** 文本脱敏类名，默认 'rr-mask'；输入值默认全脱敏（maskAllInputs） */
+    maskTextClass?: string;
+    /** 回放上传地址；默认由 endpoint 末尾 /report 换成 /replay，推导不出时必须显式传 */
+    replayEndpoint?: string;
 }
 export interface BaseLog {
     title: string;
@@ -26,14 +51,13 @@ export interface BaseLog {
 }
 export interface ErrorLog {
     type: "error";
-    errorType: "jsError" | "promiseError" | "loadResourceError" | "xhrError";
+    errorType: "jsError" | "promiseError" | "xhrError";
     message: string;
     filename?: string;
     position?: string;
     stack?: string;
     selector?: string;
     isWhiteScreen?: boolean;
-    tagName?: string;
     xhrData?: {
         eventType: "load" | "error";
         url: string;

package/dist/modules/err.js

@@ -1,91 +1,45 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = onWindowErr;
+
+Object.defineProperty(exports, "__esModule", {
+  value: !0
+}), exports.default = onWindowErr;
+
 const utils_1 = require("../utils");
+
 function onWindowErr() {
-    window.addEventListener('error', event => {
-        console.log("error event: ", event);
-        // 监听 JS/CSS 资源文件加载错误
-        const target = event.target;
-        let filename;
-        if (target &&
-            (filename =
-                target.src || target.href)) {
-            // 1、数据建模存储
-            const log = {
-                type: "error",
-                errorType: "loadResourceError", // 错误类型 - JS/CSS 资源加载错误
-                message: `${filename} resource loading fail.`,
-                filename, // 报错的文件
-                tagName: target.tagName, // 资源标签名称
-                // body script
-                selector: (0, utils_1.getSelector)(event.target),
-            };
-            console.log("log: ", log);
-            // 2、上报数据
-            // @ts-ignore
-            this.send(log);
-        }
-        else {
-            // 监听 JS 代码执行出错
-            const lastEvent = (0, utils_1.getLastEvent)(); // 监听到错误后，获取到最后一个交互事件
-            const isWhiteScreen = (0, utils_1.checkWhiteScreen)(); // 检查是否白屏
-            // 1.1、数据建模存储
-            const errorLog = {
-                // kind: "stability", // 监控指标的大类
-                type: "error",
-                errorType: "jsError",
-                message: event.message,
-                filename: event.filename,
-                position: `${event.lineno}:${event.colno}`,
-                stack: (0, utils_1.formatStack)(event.error.stack),
-                selector: lastEvent ? (0, utils_1.getSelector)() : "",
-                isWhiteScreen,
-            };
-            console.log("js error log: ", errorLog);
-            // 1.2、上报数据
-            // @ts-ignore
-            this.send(errorLog);
-        }
-    }, true);
-    // promise
-    window.addEventListener('unhandledrejection', event => {
-        console.log("Promise error event: ", event);
-        const lastEvent = (0, utils_1.getLastEvent)(); // 监听到错误后，获取到最后一个交互事件
-        let message;
-        const reason = event.reason; // Promise 失败的原因
-        let filename;
-        let line = 0;
-        let column = 0;
-        let stack = "";
-        if (typeof event.reason === "string") {
-            // 情况 1、是 Promise reject 抛出的错误（没有办法获取 stack 等信息）
-            message = reason;
-        }
-        else if (typeof reason === "object") {
-            message = reason.message;
-            // 情况 2、是 Promise 中 JS 代码执行出错
-            if (reason.stack) {
-                const matchResult = reason.stack.match(/at\s+(.+):(\d+):(\d+)/);
-                filename = matchResult[1];
-                line = matchResult[2];
-                column = matchResult[3];
-                stack = (0, utils_1.formatStack)(reason.stack);
-            }
-        }
-        // 2.1、数据建模存储
-        const errorLog = {
-            type: "error",
-            errorType: "promiseError", // 错误类型 - Promise 代码错误
-            message,
-            filename,
-            position: `${line}:${column}`,
-            stack,
-            selector: lastEvent ? (0, utils_1.getSelector)() : "",
-        };
-        console.log("promise error log: ", errorLog);
-        // 2.2、上报数据
-        // @ts-ignore
-        this.send(errorLog);
-    }, true);
-}
+  window.addEventListener("error", e => {
+    const t = e.target;
+    if (t && (t.src || t.href)) return;
+    const s = (0, utils_1.getLastEvent)(), r = (0, utils_1.checkWhiteScreen)(), o = {
+      type: "error",
+      errorType: "jsError",
+      message: e.message,
+      filename: e.filename,
+      position: `${e.lineno}:${e.colno}`,
+      stack: (0, utils_1.formatStack)(e.error.stack),
+      selector: s ? (0, utils_1.getSelector)() : "",
+      isWhiteScreen: r
+    };
+    this.send(o);
+  }, !0), window.addEventListener("unhandledrejection", e => {
+    const t = (0, utils_1.getLastEvent)();
+    let s;
+    const r = e.reason;
+    let o, n = 0, i = 0, c = "";
+    if ("string" == typeof e.reason) s = r; else if ("object" == typeof r && (s = r.message, 
+    r.stack)) {
+      const e = r.stack.match(/at\s+(.+):(\d+):(\d+)/);
+      o = e[1], n = e[2], i = e[3], c = (0, utils_1.formatStack)(r.stack);
+    }
+    const a = {
+      type: "error",
+      errorType: "promiseError",
+      message: s,
+      filename: o,
+      position: `${n}:${i}`,
+      stack: c,
+      selector: t ? (0, utils_1.getSelector)() : ""
+    };
+    this.send(a);
+  }, !0);
+}

package/dist/modules/longTask.js

@@ -1,27 +1,28 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = onLongTask;
+
+Object.defineProperty(exports, "__esModule", {
+  value: !0
+}), exports.default = onLongTask;
+
 const utils_1 = require("../utils");
+
 function onLongTask() {
-    if (PerformanceObserver) {
-        const observerLongTask = new PerformanceObserver(list => {
-            list.getEntries().forEach(entry => {
-                // 执行时长大于 100 ms
-                if (entry.duration > 100) {
-                    const lastEvent = (0, utils_1.getLastEvent)();
-                    const log = {
-                        type: "longTask",
-                        startTime: entry.startTime, // 开始时间
-                        duration: entry.duration, // 持续时间
-                        selector: lastEvent ? (0, utils_1.getSelector)() : "",
-                        eventType: lastEvent === null || lastEvent === void 0 ? void 0 : lastEvent.type,
-                    };
-                    console.log("longTask log: ", log);
-                    // @ts-ignore
-                    this.send(log);
-                }
-            });
-        });
-        observerLongTask.observe({ entryTypes: ["longtask"] });
-    }
-}
+  if (PerformanceObserver) {
+    new PerformanceObserver(e => {
+      e.getEntries().forEach(e => {
+        if (e.duration > 100) {
+          const t = (0, utils_1.getLastEvent)(), r = {
+            type: "longTask",
+            startTime: e.startTime,
+            duration: e.duration,
+            selector: t ? (0, utils_1.getSelector)() : "",
+            eventType: null == t ? void 0 : t.type
+          };
+          this.send(r);
+        }
+      });
+    }).observe({
+      entryTypes: [ "longtask" ]
+    });
+  }
+}

package/dist/modules/paint.js

@@ -1,83 +1,45 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = onPaint;
-/** 带历史缓冲的 PerformanceObserver（兼容 SDK 晚于首次绘制才启动） */
-function observeBuffered(type, callback) {
-    if (typeof PerformanceObserver === 'undefined')
-        return null;
-    try {
-        const observer = new PerformanceObserver((list) => {
-            callback(list.getEntries());
-        });
-        // type + buffered 可拿到观察前已产生的条目
-        observer.observe({ type, buffered: true });
-        return observer;
-    }
-    catch (err) {
-        console.warn('[monitor] PerformanceObserver 不支持 type=', type, err);
-        return null;
-    }
+
+function observeBuffered(e, n) {
+  if ("undefined" == typeof PerformanceObserver) return null;
+  try {
+    const t = new PerformanceObserver(e => {
+      n(e.getEntries());
+    });
+    return t.observe({
+      type: e,
+      buffered: !0
+    }), t;
+  } catch (e) {
+    return null;
+  }
 }
-/**
- * 采集绘制指标 FP/FCP/FMP/LCP。
- * 若 SDK 在 window.load 之后初始化，仍会延迟上报（含 buffered 历史指标）。
- */
+
 function onPaint() {
-    if (typeof PerformanceObserver === 'undefined') {
-        console.warn('[monitor] 当前环境不支持 PerformanceObserver，跳过 paint 采集');
-        return;
-    }
-    let FP = null;
-    let FCP = null;
-    let FMP = null;
-    let LCP = null;
-    const observerFPAndFCP = observeBuffered('paint', (entries) => {
-        for (const entry of entries) {
-            if (entry.name === 'first-paint') {
-                FP = entry;
-                console.log('[monitor] FP', FP.startTime);
-            }
-            else if (entry.name === 'first-contentful-paint') {
-                FCP = entry;
-                console.log('[monitor] FCP', FCP.startTime);
-            }
-        }
-    });
-    const observerFMP = observeBuffered('element', (entries) => {
-        if (entries.length > 0) {
-            FMP = entries[0];
-            console.log('[monitor] FMP', FMP.startTime);
-            observerFMP === null || observerFMP === void 0 ? void 0 : observerFMP.disconnect();
-        }
-    });
-    // LCP 会多次更新，上报前再 disconnect
-    const observerLCP = observeBuffered('largest-contentful-paint', (entries) => {
-        if (entries.length > 0) {
-            LCP = entries[entries.length - 1];
-            console.log('[monitor] LCP', LCP.startTime);
-        }
-    });
-    /** load 后再等一段时间，尽量拿到稳定 LCP 再上报 */
-    const scheduleReport = () => {
-        setTimeout(() => {
-            observerLCP === null || observerLCP === void 0 ? void 0 : observerLCP.disconnect();
-            observerFPAndFCP === null || observerFPAndFCP === void 0 ? void 0 : observerFPAndFCP.disconnect();
-            observerFMP === null || observerFMP === void 0 ? void 0 : observerFMP.disconnect();
-            const log = {
-                type: 'paint',
-                FP: FP === null || FP === void 0 ? void 0 : FP.startTime,
-                FCP: FCP === null || FCP === void 0 ? void 0 : FCP.startTime,
-                FMP: FMP === null || FMP === void 0 ? void 0 : FMP.startTime,
-                LCP: LCP === null || LCP === void 0 ? void 0 : LCP.startTime,
-            };
-            console.log('[monitor] paint 上报', log);
-            this.send(log);
-        }, 3000);
-    };
-    if (document.readyState === 'complete') {
-        console.log('[monitor] 页面已 load 完成，延迟补报 paint');
-        scheduleReport();
-        return;
-    }
-    window.addEventListener('load', scheduleReport);
+  if ("undefined" == typeof PerformanceObserver) return;
+  let e = null, n = null, t = null, r = null;
+  const l = observeBuffered("paint", t => {
+    for (const r of t) "first-paint" === r.name ? e = r : "first-contentful-paint" === r.name && (n = r);
+  }), o = observeBuffered("element", e => {
+    e.length > 0 && (t = e[0], null == o || o.disconnect());
+  }), u = observeBuffered("largest-contentful-paint", e => {
+    e.length > 0 && (r = e[e.length - 1]);
+  }), i = () => {
+    setTimeout(() => {
+      null == u || u.disconnect(), null == l || l.disconnect(), null == o || o.disconnect();
+      const i = {
+        type: "paint",
+        FP: null == e ? void 0 : e.startTime,
+        FCP: null == n ? void 0 : n.startTime,
+        FMP: null == t ? void 0 : t.startTime,
+        LCP: null == r ? void 0 : r.startTime
+      };
+      this.send(i);
+    }, 3e3);
+  };
+  "complete" !== document.readyState ? window.addEventListener("load", i) : i();
 }
+
+Object.defineProperty(exports, "__esModule", {
+  value: !0
+}), exports.default = onPaint;

package/dist/modules/timing.js

@@ -1,43 +1,30 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = onTiming;
-/** 采集并上报页面加载时序（DOMContentLoaded / load） */
+
 function reportTiming() {
-    let DOMContentLoadedTime = 0;
-    let loadTime = 0;
-    // 新版：PerformanceNavigationTiming；旧版降级 performance.timing
-    if (performance.getEntriesByType) {
-        const perfEntries = performance.getEntriesByType('navigation');
-        if (perfEntries.length > 0) {
-            const navigationEntry = perfEntries[0];
-            const { domContentLoadedEventStart, loadEventStart, fetchStart } = navigationEntry;
-            DOMContentLoadedTime = domContentLoadedEventStart - fetchStart;
-            loadTime = loadEventStart - fetchStart;
-        }
+  let t = 0, e = 0;
+  if (performance.getEntriesByType) {
+    const n = performance.getEntriesByType("navigation");
+    if (n.length > 0) {
+      const o = n[0], {domContentLoadedEventStart: i, loadEventStart: r, fetchStart: a} = o;
+      t = i - a, e = r - a;
     }
-    else {
-        const { fetchStart, domContentLoadedEventStart, loadEventStart } = performance.timing;
-        DOMContentLoadedTime = domContentLoadedEventStart - fetchStart;
-        loadTime = loadEventStart - fetchStart;
-    }
-    const log = {
-        type: 'timing',
-        DOMContentLoadedTime,
-        loadTime,
-    };
-    console.log('[monitor] timing 上报', log);
-    this.send(log);
+  } else {
+    const {fetchStart: n, domContentLoadedEventStart: o, loadEventStart: i} = performance.timing;
+    t = o - n, e = i - n;
+  }
+  const n = {
+    type: "timing",
+    DOMContentLoadedTime: t,
+    loadTime: e
+  };
+  this.send(n);
 }
-/**
- * 监听页面加载时序。
- * 若 SDK 在 window.load 之后才初始化，直接补报，避免永远收不到 timing。
- */
+
 function onTiming() {
-    const run = () => reportTiming.call(this);
-    if (document.readyState === 'complete') {
-        console.log('[monitor] 页面已 load 完成，立即补报 timing');
-        run();
-        return;
-    }
-    window.addEventListener('load', run);
+  const t = () => reportTiming.call(this);
+  "complete" !== document.readyState ? window.addEventListener("load", t) : t();
 }
+
+Object.defineProperty(exports, "__esModule", {
+  value: !0
+}), exports.default = onTiming;

package/dist/monitor.d.ts

@@ -12,7 +12,10 @@ export default class Monitor {
     maxQueueSize: number;
     sendTimer: number | null;
     reporter: ExcReporter;
+    private replay;
     private readonly options;
+    /** errorDedupeMs 去重状态：errorType|message|filename → 上次放行时间 */
+    private errorSentAt;
     originalXHR: {
         new (): XMLHttpRequest;
         prototype: XMLHttpRequest;
@@ -29,7 +32,11 @@ export default class Monitor {
     originalOnerror: OnErrorEventHandler;
     constructor(options: IMonitorOptions);
     init(): void;
-    /** 统一上报：转异常平台格式 → reporter 批量 POST */
+    /** 回放初始化：显式开启 + 采样命中 + 回放地址可解析 */
+    private initReplay;
+    /** errorDedupeMs 窗口内同类错误（errorType+message+filename 相同）直接丢弃，连回放触发一并跳过；只在放行时刷新时间戳（非滑动窗口），与 minUploadIntervalMs 的节奏一致 */
+    private isDuplicateError;
+    /** 统一上报：转异常平台格式 → reporter 批量 POST；错误触发回放切片上传并回填 device.replayId */
     send(data: MonitorTypeLog): void;
     /** 手动上报自定义事件 */
     capture(event: ExcEventPayload): void;