@be-link/cls-logger 1.0.11 → 1.0.12

package/dist/web.js

@@ -201,6 +201,11 @@ class ClsLoggerCore {
         this.batchTimerDueAt = null;
         this.initTs = 0;
         this.startupDelayMs = 0;
+        this.startupMaxSize = 0; // 启动窗口内的 maxSize，0 表示使用默认计算值
+        this.useIdleCallback = false;
+        this.idleTimeout = 3000;
+        this.pendingIdleCallback = null; // requestIdleCallback 的 id
+        this.visibilityCleanup = null;
         // 参考文档：失败缓存 + 重试
         this.failedCacheKey = 'cls_failed_logs';
         this.failedCacheMax = 200;
@@ -224,7 +229,7 @@ class ClsLoggerCore {
         }
         return 'browser';
     }
-    init(options) {
+    async init(options) {
         this.initTs = Date.now();
         const topicId = options?.tencentCloud?.topicID ?? options?.topic_id ?? options?.topicID ?? this.topicId;
         const endpoint = options?.tencentCloud?.endpoint ?? options?.endpoint ?? this.endpoint;
@@ -233,7 +238,7 @@ class ClsLoggerCore {
         if (!topicId) {
             // eslint-disable-next-line no-console
             console.warn('ClsLogger.init 没有传 topicID/topic_id');
-            return;
+            return false;
         }
         const nextEnvType = options.envType ?? this.detectEnvType();
         // envType/endpoint/retryTimes 变化时：重置 client（以及可能的 sdk）
@@ -270,15 +275,21 @@ class ClsLoggerCore {
         this.batchMaxSize = options.batch?.maxSize ?? this.batchMaxSize;
         this.batchIntervalMs = options.batch?.intervalMs ?? this.batchIntervalMs;
         this.startupDelayMs = options.batch?.startupDelayMs ?? this.startupDelayMs;
+        this.useIdleCallback = options.batch?.useIdleCallback ?? this.useIdleCallback;
+        this.idleTimeout = options.batch?.idleTimeout ?? this.idleTimeout;
+        // startupMaxSize：启动窗口内的队列阈值，默认为 maxSize * 10（至少 200）
+        this.startupMaxSize = options.batch?.startupMaxSize ?? Math.max(this.batchMaxSize * 10, 200);
         this.failedCacheKey = options.failedCacheKey ?? this.failedCacheKey;
         this.failedCacheMax = options.failedCacheMax ?? this.failedCacheMax;
         // 预热（避免首条日志触发 import/初始化开销）
-        void this.getInstance().catch(() => {
-            // ignore
-        });
+        const sdkReadyPromise = this.getInstance()
+            .then(() => true)
+            .catch(() => false);
         if (this.enabled) {
             // 启动时尝试发送失败缓存
             this.flushFailed();
+            // 添加页面可见性监听（确保页面关闭时数据不丢失）
+            this.setupVisibilityListener();
             // 初始化后立即启动请求监听
             this.startRequestMonitor(options.requestMonitor);
             // 初始化后立即启动错误监控/性能监控
@@ -287,6 +298,7 @@ class ClsLoggerCore {
             // 初始化后立即启动行为埋点（PV/UV/点击）
             this.startBehaviorMonitor(options.behaviorMonitor);
         }
+        return sdkReadyPromise;
     }
     getBaseFields() {
         let auto = undefined;
@@ -315,6 +327,96 @@ class ClsLoggerCore {
             return auto;
         return undefined;
     }
+    /**
+     * 设置页面可见性监听
+     * - visibilitychange: 页面隐藏时使用 sendBeacon 发送队列
+     * - pagehide: 作为移动端 fallback
+     */
+    setupVisibilityListener() {
+        if (typeof document === 'undefined' || typeof window === 'undefined')
+            return;
+        // 避免重复监听
+        if (this.visibilityCleanup)
+            return;
+        const handleVisibilityChange = () => {
+            if (document.visibilityState === 'hidden') {
+                // 使用微任务延迟 flush，确保 web-vitals 等第三方库的 visibilitychange 回调先执行
+                // 这样 LCP/CLS/INP 等指标能先入队，再被 flush 发送
+                // 注意：queueMicrotask 比 setTimeout(0) 更可靠，不会被延迟太久
+                queueMicrotask(() => {
+                    this.flushBatchSync();
+                });
+            }
+        };
+        const handlePageHide = () => {
+            // pagehide 不能延迟，因为浏览器可能立即关闭页面
+            // 但 pagehide 通常在 visibilitychange 之后触发，此时队列应该已经包含 web-vitals 指标
+            this.flushBatchSync();
+        };
+        document.addEventListener('visibilitychange', handleVisibilityChange);
+        window.addEventListener('pagehide', handlePageHide);
+        this.visibilityCleanup = () => {
+            document.removeEventListener('visibilitychange', handleVisibilityChange);
+            window.removeEventListener('pagehide', handlePageHide);
+        };
+    }
+    /**
+     * 同步发送内存队列（使用 sendBeacon）
+     * - 用于页面关闭时确保数据发送
+     * - sendBeacon 不可用时降级为缓存到 localStorage
+     */
+    flushBatchSync() {
+        if (this.memoryQueue.length === 0)
+            return;
+        // 清除定时器
+        if (this.batchTimer) {
+            try {
+                if (this.useIdleCallback && typeof cancelIdleCallback !== 'undefined') {
+                    cancelIdleCallback(this.batchTimer);
+                }
+                else {
+                    clearTimeout(this.batchTimer);
+                }
+            }
+            catch {
+                // ignore
+            }
+            this.batchTimer = null;
+        }
+        this.batchTimerDueAt = null;
+        const logs = [...this.memoryQueue];
+        this.memoryQueue = [];
+        // 优先使用 sendBeacon（页面关闭时可靠发送）
+        if (typeof navigator !== 'undefined' && typeof navigator.sendBeacon === 'function') {
+            try {
+                const payload = this.buildSendBeaconPayload(logs);
+                const blob = new Blob([payload], { type: 'application/json' });
+                const url = `${this.endpoint}/structuredlog?topic_id=${this.topicId}`;
+                const success = navigator.sendBeacon(url, blob);
+                if (!success) {
+                    // sendBeacon 返回 false 时，降级缓存
+                    this.cacheFailedReportLogs(logs);
+                }
+            }
+            catch {
+                this.cacheFailedReportLogs(logs);
+            }
+        }
+        else {
+            // 不支持 sendBeacon，降级缓存到 localStorage
+            this.cacheFailedReportLogs(logs);
+        }
+    }
+    /**
+     * 构建 sendBeacon 的 payload
+     */
+    buildSendBeaconPayload(logs) {
+        const logList = logs.map((log) => this.buildReportFields(log));
+        return JSON.stringify({
+            source: this.source,
+            logs: logList,
+        });
+    }
     startRequestMonitor(requestMonitor) {
         if (this.requestMonitorStarted)
             return;
@@ -560,32 +662,75 @@ class ClsLoggerCore {
             return;
         }
         this.memoryQueue.push(log);
-        if (this.memoryQueue.length >= this.batchMaxSize) {
+        const now = Date.now();
+        // 判断是否在启动合并窗口内
+        const inStartupWindow = this.startupDelayMs > 0 && now - this.initTs < this.startupDelayMs;
+        // 启动窗口内使用 startupMaxSize，正常情况使用 batchMaxSize
+        const effectiveMaxSize = inStartupWindow ? this.startupMaxSize : this.batchMaxSize;
+        if (this.memoryQueue.length >= effectiveMaxSize) {
             void this.flushBatch();
             return;
         }
-        const now = Date.now();
         const desiredDueAt = this.getDesiredBatchFlushDueAt(now);
         const desiredDelay = Math.max(0, desiredDueAt - now);
         if (!this.batchTimer) {
             this.batchTimerDueAt = desiredDueAt;
+            this.scheduleFlush(desiredDelay);
+            return;
+        }
+        // 启动合并窗口内：如果当前 timer 会"更早"触发，则延后到窗口结束，尽量减少多次发送
+        if (this.batchTimerDueAt !== null && this.batchTimerDueAt < desiredDueAt) {
+            this.cancelScheduledFlush();
+            this.batchTimerDueAt = desiredDueAt;
+            this.scheduleFlush(desiredDelay);
+        }
+    }
+    /**
+     * 调度批量发送
+     * - 先使用 setTimeout 保证最小延迟（desiredDelay）
+     * - 若开启 useIdleCallback，在延迟结束后等待浏览器空闲再执行
+     */
+    scheduleFlush(desiredDelay) {
+        if (this.useIdleCallback && typeof requestIdleCallback !== 'undefined') {
+            // 先 setTimeout 保证最小延迟，再 requestIdleCallback 在空闲时执行
+            this.batchTimer = setTimeout(() => {
+                const idleId = requestIdleCallback(() => {
+                    this.pendingIdleCallback = null;
+                    void this.flushBatch();
+                }, { timeout: this.idleTimeout });
+                this.pendingIdleCallback = idleId;
+            }, desiredDelay);
+        }
+        else {
             this.batchTimer = setTimeout(() => {
                 void this.flushBatch();
             }, desiredDelay);
-            return;
         }
-        // 启动合并窗口内：如果当前 timer 会“更早”触发，则延后到窗口结束，尽量减少多次发送
-        if (this.batchTimerDueAt !== null && this.batchTimerDueAt < desiredDueAt) {
+    }
+    /**
+     * 取消已调度的批量发送
+     * - 同时清理 setTimeout 和可能的 requestIdleCallback
+     */
+    cancelScheduledFlush() {
+        // 清理 setTimeout
+        if (this.batchTimer) {
             try {
                 clearTimeout(this.batchTimer);
             }
             catch {
                 // ignore
             }
-            this.batchTimerDueAt = desiredDueAt;
-            this.batchTimer = setTimeout(() => {
-                void this.flushBatch();
-            }, desiredDelay);
+            this.batchTimer = null;
+        }
+        // 清理可能的 pendingIdleCallback
+        if (this.pendingIdleCallback !== null && typeof cancelIdleCallback !== 'undefined') {
+            try {
+                cancelIdleCallback(this.pendingIdleCallback);
+            }
+            catch {
+                // ignore
+            }
+            this.pendingIdleCallback = null;
         }
     }
     getDesiredBatchFlushDueAt(nowTs) {
@@ -598,7 +743,7 @@ class ClsLoggerCore {
         }
         return nowTs + this.batchIntervalMs;
     }
-    info(message, data = {}) {
+    info(message, data = {}, options) {
         let msg = '';
         let extra = {};
         if (message instanceof Error) {
@@ -614,9 +759,18 @@ class ClsLoggerCore {
             extra = data;
         }
         const payload = normalizeFlatFields({ message: msg, ...extra }, 'info');
-        this.report({ type: 'info', data: payload, timestamp: Date.now() });
+        const log = { type: 'info', data: payload, timestamp: Date.now() };
+        // info 默认走批量队列，支持 immediate 选项立即发送
+        if (options?.immediate) {
+            void this.sendReportLogs([log]).catch(() => {
+                this.cacheFailedReportLogs([log]);
+            });
+        }
+        else {
+            this.report(log);
+        }
     }
-    warn(message, data = {}) {
+    warn(message, data = {}, options) {
         let msg = '';
         let extra = {};
         if (message instanceof Error) {
@@ -632,9 +786,18 @@ class ClsLoggerCore {
             extra = data;
         }
         const payload = normalizeFlatFields({ message: msg, ...extra }, 'warn');
-        this.report({ type: 'warn', data: payload, timestamp: Date.now() });
+        const log = { type: 'warn', data: payload, timestamp: Date.now() };
+        // warn 默认走批量队列，支持 immediate 选项立即发送
+        if (options?.immediate) {
+            void this.sendReportLogs([log]).catch(() => {
+                this.cacheFailedReportLogs([log]);
+            });
+        }
+        else {
+            this.report(log);
+        }
     }
-    error(message, data = {}) {
+    error(message, data = {}, options) {
         let msg = '';
         let extra = {};
         if (message instanceof Error) {
@@ -650,7 +813,17 @@ class ClsLoggerCore {
             extra = data;
         }
         const payload = normalizeFlatFields({ message: msg, ...extra }, 'error');
-        this.report({ type: 'error', data: payload, timestamp: Date.now() });
+        const log = { type: 'error', data: payload, timestamp: Date.now() };
+        // error 默认即时上报，除非显式指定 immediate: false
+        const immediate = options?.immediate ?? true;
+        if (immediate) {
+            void this.sendReportLogs([log]).catch(() => {
+                this.cacheFailedReportLogs([log]);
+            });
+        }
+        else {
+            this.report(log);
+        }
     }
     track(trackType, data = {}) {
         if (!trackType)
@@ -665,10 +838,7 @@ class ClsLoggerCore {
      * 立即发送内存队列
      */
     async flushBatch() {
-        if (this.batchTimer) {
-            clearTimeout(this.batchTimer);
-            this.batchTimer = null;
-        }
+        this.cancelScheduledFlush();
         this.batchTimerDueAt = null;
         if (this.memoryQueue.length === 0)
             return;
@@ -774,7 +944,14 @@ class ClsLoggerCore {
         // 先清空，再尝试发送
         writeStringStorage(this.failedCacheKey, JSON.stringify([]));
         this.memoryQueue.unshift(...logs);
-        void this.flushBatch();
+        // 触发定时器而非直接 flush，以尊重 startupDelayMs 配置
+        if (!this.batchTimer) {
+            const now = Date.now();
+            const desiredDueAt = this.getDesiredBatchFlushDueAt(now);
+            const desiredDelay = Math.max(0, desiredDueAt - now);
+            this.batchTimerDueAt = desiredDueAt;
+            this.scheduleFlush(desiredDelay);
+        }
     }
     /**
      * 统计/计数类日志：按字段展开上报（若 data 为空默认 1）
@@ -1068,6 +1245,13 @@ function installWebRequestMonitor(report, opts = {}) {
 const DEFAULT_MAX_TEXT = 4000;
 const DEFAULT_DEDUPE_WINDOW_MS = 3000;
 const DEFAULT_DEDUPE_MAX_KEYS = 200;
+/** 默认忽略的无意义错误信息 */
+const DEFAULT_IGNORE_MESSAGES = [
+    'Script error.',
+    'Script error',
+    /^ResizeObserver loop/,
+    'Permission was denied',
+];
 function truncate$2(s, maxLen) {
     if (!s)
         return s;
@@ -1080,11 +1264,22 @@ function sampleHit$1(sampleRate) {
         return false;
     return Math.random() < sampleRate;
 }
+/** 检查消息是否应该被忽略 */
+function shouldIgnoreMessage(message, ignorePatterns) {
+    if (!message || ignorePatterns.length === 0)
+        return false;
+    return ignorePatterns.some((pattern) => {
+        if (typeof pattern === 'string') {
+            return message === pattern || message.includes(pattern);
+        }
+        return pattern.test(message);
+    });
+}
 function getPagePath$1() {
     try {
         if (typeof window === 'undefined')
             return '';
-        return window.location?.pathname ?? '';
+        return window.location?.href ?? '';
     }
     catch {
         return '';
@@ -1175,6 +1370,9 @@ function installBrowserErrorMonitor(report, options) {
             };
             if (event && typeof event === 'object' && 'message' in event) {
                 payload.message = truncate$2(String(event.message ?? ''), options.maxTextLength);
+                // 检查是否应该忽略此错误
+                if (shouldIgnoreMessage(String(event.message ?? ''), options.ignoreMessages))
+                    return;
                 payload.filename = truncate$2(String(event.filename ?? ''), 500);
                 payload.lineno = typeof event.lineno === 'number' ? event.lineno : undefined;
                 payload.colno = typeof event.colno === 'number' ? event.colno : undefined;
@@ -1213,6 +1411,9 @@ function installBrowserErrorMonitor(report, options) {
                 return;
             const reason = event?.reason;
             const e = normalizeErrorLike(reason, options.maxTextLength);
+            // 检查是否应该忽略此错误
+            if (shouldIgnoreMessage(e.message, options.ignoreMessages))
+                return;
             const payload = {
                 pagePath: getPagePath$1(),
                 source: 'unhandledrejection',
@@ -1242,6 +1443,7 @@ function installWebErrorMonitor(report, opts = {}) {
         maxTextLength: raw.maxTextLength ?? DEFAULT_MAX_TEXT,
         dedupeWindowMs: raw.dedupeWindowMs ?? DEFAULT_DEDUPE_WINDOW_MS,
         dedupeMaxKeys: raw.dedupeMaxKeys ?? DEFAULT_DEDUPE_MAX_KEYS,
+        ignoreMessages: raw.ignoreMessages ?? DEFAULT_IGNORE_MESSAGES,
     };
     installBrowserErrorMonitor(report, options);
 }
@@ -1280,7 +1482,7 @@ function getPagePath() {
     try {
         if (typeof window === 'undefined')
             return '';
-        return window.location?.pathname ?? '';
+        return window.location?.href ?? '';
     }
     catch {
         return '';
@@ -1452,9 +1654,25 @@ function installBrowserPerformanceMonitor(report, options) {
                         if (!name || shouldIgnoreUrl(name, ignoreUrls))
                             continue;
                         const initiatorType = String(entry?.initiatorType ?? '');
-                        // 对齐文档：关注 fetch/xhr/img/script（同时允许 css/other 但不强制）
+                        // 关注 fetch/xhr/img/script（同时允许 css/other 但不强制）
                         if (!['xmlhttprequest', 'fetch', 'img', 'script', 'css'].includes(initiatorType))
                             continue;
+                        // 时序分解（便于定位慢在哪个阶段）
+                        const domainLookupStart = entry.domainLookupStart ?? 0;
+                        const domainLookupEnd = entry.domainLookupEnd ?? 0;
+                        const connectStart = entry.connectStart ?? 0;
+                        const connectEnd = entry.connectEnd ?? 0;
+                        const requestStart = entry.requestStart ?? 0;
+                        const responseStart = entry.responseStart ?? 0;
+                        const responseEnd = entry.responseEnd ?? 0;
+                        const dns = domainLookupEnd - domainLookupStart;
+                        const tcp = connectEnd - connectStart;
+                        const ttfb = responseStart - requestStart;
+                        const download = responseEnd - responseStart;
+                        // 缓存检测：transferSize=0 且 decodedBodySize>0 表示缓存命中
+                        const transferSize = entry.transferSize ?? 0;
+                        const decodedBodySize = entry.decodedBodySize ?? 0;
+                        const cached = transferSize === 0 && decodedBodySize > 0;
                         const payload = {
                             pagePath: getPagePath(),
                             metric: 'resource',
@@ -1462,16 +1680,26 @@ function installBrowserPerformanceMonitor(report, options) {
                             url: truncate$1(name, options.maxTextLength),
                             startTime: typeof entry?.startTime === 'number' ? entry.startTime : undefined,
                             duration: typeof entry?.duration === 'number' ? entry.duration : undefined,
+                            // 时序分解（跨域资源可能为 0）
+                            dns: dns > 0 ? Math.round(dns) : undefined,
+                            tcp: tcp > 0 ? Math.round(tcp) : undefined,
+                            ttfb: ttfb > 0 ? Math.round(ttfb) : undefined,
+                            download: download > 0 ? Math.round(download) : undefined,
+                            // 缓存标记
+                            cached,
                         };
-                        // 兼容字段（部分浏览器支持）
-                        if (typeof entry?.transferSize === 'number')
-                            payload.transferSize = entry.transferSize;
-                        if (typeof entry?.encodedBodySize === 'number')
+                        // 尺寸字段（跨域资源可能为 0）
+                        if (transferSize > 0)
+                            payload.transferSize = transferSize;
+                        if (typeof entry?.encodedBodySize === 'number' && entry.encodedBodySize > 0) {
                             payload.encodedBodySize = entry.encodedBodySize;
-                        if (typeof entry?.decodedBodySize === 'number')
-                            payload.decodedBodySize = entry.decodedBodySize;
-                        if (typeof entry?.nextHopProtocol === 'string')
+                        }
+                        if (decodedBodySize > 0)
+                            payload.decodedBodySize = decodedBodySize;
+                        // 协议和状态
+                        if (typeof entry?.nextHopProtocol === 'string' && entry.nextHopProtocol) {
                             payload.nextHopProtocol = entry.nextHopProtocol;
+                        }
                         if (typeof entry?.responseStatus === 'number')
                             payload.status = entry.responseStatus;
                         report(options.reportType, payload);
@@ -1549,7 +1777,7 @@ function writeUvMeta(key, meta) {
 function getWebPagePath() {
     if (typeof window === 'undefined')
         return '';
-    return window.location?.pathname || '';
+    return window.location?.href || '';
 }
 function buildCommonUvFields(uvId, uvMeta, isFirstVisit) {
     return {
@@ -1860,7 +2088,7 @@ function getBrowserDeviceInfo(options) {
     if (options.includeNetwork) {
         try {
             const conn = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
-            if (conn && isPlainObject(conn)) {
+            if (conn && typeof conn === 'object') {
                 if (typeof conn.effectiveType === 'string')
                     out.netEffectiveType = conn.effectiveType;
                 if (typeof conn.downlink === 'number')
@@ -1875,6 +2103,43 @@ function getBrowserDeviceInfo(options) {
             // ignore
         }
     }
+    if (options.includeNetworkType) {
+        try {
+            const conn = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
+            if (conn && typeof conn === 'object') {
+                const type = conn.type;
+                const eff = conn.effectiveType;
+                let val = '';
+                if (type === 'wifi' || type === 'ethernet') {
+                    val = 'WIFI';
+                }
+                else if (type === 'cellular' || type === 'wimax') {
+                    if (eff === 'slow-2g' || eff === '2g')
+                        val = '2G';
+                    else if (eff === '3g')
+                        val = '3G';
+                    else if (eff === '4g')
+                        val = '4G';
+                    else
+                        val = '4G';
+                }
+                else {
+                    // type 未知或不支持，降级使用 effectiveType
+                    if (eff === 'slow-2g' || eff === '2g')
+                        val = '2G';
+                    else if (eff === '3g')
+                        val = '3G';
+                    else if (eff === '4g')
+                        val = '4G';
+                }
+                if (val)
+                    out.networkType = val;
+            }
+        }
+        catch {
+            // ignore
+        }
+    }
     return out;
 }
 function createWebDeviceInfoBaseFields(opts) {
@@ -1904,7 +2169,7 @@ function createWebDeviceInfoBaseFields(opts) {
         try {
             const g = globalThis;
             const extra = g[globalKey];
-            if (extra && isPlainObject(extra))
+            if (extra && typeof extra === 'object')
                 return { ...base, ...extra };
         }
         catch {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@be-link/cls-logger",
-  "version": "1.0.11",
+  "version": "1.0.12",
   "description": "@be-link cls-logger - 腾讯云 CLS 日志上报封装",
   "homepage": "https://github.com/snowmountain-top/be-link",
   "author": "zhuiyi",