@be-link/cls-logger 1.0.1-beta.20 → 1.0.1-beta.22

package/dist/web.esm.js

@@ -1,4 +1,5 @@
 import * as tencentcloudClsSdkJsWeb from 'tencentcloud-cls-sdk-js-web';
+import { onFCP, onLCP, onCLS, onINP, onTTFB } from 'web-vitals';
 
 function isPlainObject(value) {
     return Object.prototype.toString.call(value) === '[object Object]';
@@ -1433,14 +1434,10 @@ function getPagePath() {
         return '';
     }
 }
-function reportMetric(report, reportType, metric, value, extra = {}) {
-    report(reportType, {
-        pagePath: getPagePath(),
-        metric,
-        value,
-        ...extra,
-    });
-}
+/**
+ * 安装浏览器性能监控
+ * 使用 Google web-vitals 库实现 Core Web Vitals 指标采集
+ */
 function installBrowserPerformanceMonitor(report, options) {
     if (typeof window === 'undefined')
         return;
@@ -1449,145 +1446,100 @@ function installBrowserPerformanceMonitor(report, options) {
         return;
     w.__beLinkClsLoggerPerfInstalled__ = true;
     const ignoreUrls = [...DEFAULT_IGNORE, ...(options.ignoreUrls ?? [])];
-    // Navigation timing: TTFB 等
-    if (options.navigationTiming) {
+    // Web Vitals: 使用 Google web-vitals 库
+    // 这个库会自动处理：
+    // - LCP 在用户交互后停止观察
+    // - firstHiddenTime 过滤（页面隐藏后的数据不计入）
+    // - CLS 5秒会话窗口算法
+    // - BFCache 恢复时自动重置指标
+    if (options.webVitals) {
+        // FCP
         try {
-            const navEntries = performance.getEntriesByType?.('navigation');
-            const nav = Array.isArray(navEntries) ? navEntries[0] : undefined;
-            if (nav && typeof nav === 'object') {
-                const ttfb = typeof nav.responseStart === 'number' && typeof nav.requestStart === 'number'
-                    ? nav.responseStart - nav.requestStart
-                    : -1;
-                if (ttfb >= 0 && sampleHit(options.sampleRate))
-                    reportMetric(report, options.reportType, 'TTFB', ttfb, { unit: 'ms' });
-            }
+            onFCP((metric) => {
+                report(options.reportType, {
+                    pagePath: getPagePath(),
+                    metric: 'FCP',
+                    value: metric.value,
+                    unit: 'ms',
+                    rating: metric.rating,
+                    id: metric.id,
+                    navigationType: metric.navigationType,
+                });
+            });
         }
         catch {
             // ignore
         }
-    }
-    // Web Vitals: FCP/LCP/CLS/FID
-    if (options.webVitals && typeof globalThis.PerformanceObserver === 'function') {
-        // FCP
+        // LCP（自动处理用户交互后停止）
         try {
-            const po = new PerformanceObserver((list) => {
-                try {
-                    if (!sampleHit(options.sampleRate))
-                        return;
-                    for (const entry of list.getEntries()) {
-                        if (entry?.name === 'first-contentful-paint' && typeof entry.startTime === 'number') {
-                            reportMetric(report, options.reportType, 'FCP', entry.startTime, { unit: 'ms' });
-                        }
-                    }
-                }
-                catch {
-                    // ignore
-                }
+            onLCP((metric) => {
+                report(options.reportType, {
+                    pagePath: getPagePath(),
+                    metric: 'LCP',
+                    value: metric.value,
+                    unit: 'ms',
+                    rating: metric.rating,
+                    id: metric.id,
+                    navigationType: metric.navigationType,
+                });
             });
-            po.observe({ type: 'paint', buffered: true });
         }
         catch {
             // ignore
         }
-        // LCP（最后一次为准）
-        let lastLcp = null;
+        // CLS（自动处理会话窗口）
         try {
-            const po = new PerformanceObserver((list) => {
-                try {
-                    const entries = list.getEntries();
-                    if (entries && entries.length)
-                        lastLcp = entries[entries.length - 1];
-                }
-                catch {
-                    // ignore
-                }
+            onCLS((metric) => {
+                report(options.reportType, {
+                    pagePath: getPagePath(),
+                    metric: 'CLS',
+                    value: metric.value,
+                    unit: 'score',
+                    rating: metric.rating,
+                    id: metric.id,
+                    navigationType: metric.navigationType,
+                });
             });
-            po.observe({ type: 'largest-contentful-paint', buffered: true });
-            const flushLcp = () => {
-                try {
-                    if (!lastLcp)
-                        return;
-                    if (!sampleHit(options.sampleRate))
-                        return;
-                    if (typeof lastLcp.startTime === 'number')
-                        reportMetric(report, options.reportType, 'LCP', lastLcp.startTime, { unit: 'ms' });
-                    lastLcp = null;
-                }
-                catch {
-                    // ignore
-                }
-            };
-            window.addEventListener('pagehide', flushLcp, { once: true });
-            document.addEventListener('visibilitychange', () => {
-                if (document.visibilityState === 'hidden')
-                    flushLcp();
-            }, { once: true });
         }
         catch {
             // ignore
         }
-        // CLS
+        // INP（替代 FID，2024年3月起成为核心指标）
         try {
-            let clsValue = 0;
-            const po = new PerformanceObserver((list) => {
-                try {
-                    for (const entry of list.getEntries()) {
-                        if (entry && entry.hadRecentInput)
-                            continue;
-                        if (typeof entry.value === 'number')
-                            clsValue += entry.value;
-                    }
-                }
-                catch {
-                    // ignore
-                }
+            onINP((metric) => {
+                report(options.reportType, {
+                    pagePath: getPagePath(),
+                    metric: 'INP',
+                    value: metric.value,
+                    unit: 'ms',
+                    rating: metric.rating,
+                    id: metric.id,
+                    navigationType: metric.navigationType,
+                });
             });
-            po.observe({ type: 'layout-shift', buffered: true });
-            const flushCls = () => {
-                try {
-                    if (!sampleHit(options.sampleRate))
-                        return;
-                    reportMetric(report, options.reportType, 'CLS', clsValue, { unit: 'score' });
-                }
-                catch {
-                    // ignore
-                }
-            };
-            window.addEventListener('pagehide', flushCls, { once: true });
-            document.addEventListener('visibilitychange', () => {
-                if (document.visibilityState === 'hidden')
-                    flushCls();
-            }, { once: true });
         }
         catch {
             // ignore
         }
-        // FID
+        // TTFB
         try {
-            const po = new PerformanceObserver((list) => {
-                try {
-                    if (!sampleHit(options.sampleRate))
-                        return;
-                    for (const entry of list.getEntries()) {
-                        const startTime = typeof entry.startTime === 'number' ? entry.startTime : -1;
-                        const processingStart = typeof entry.processingStart === 'number' ? entry.processingStart : -1;
-                        if (startTime >= 0 && processingStart >= 0) {
-                            reportMetric(report, options.reportType, 'FID', processingStart - startTime, { unit: 'ms' });
-                            break;
-                        }
-                    }
-                }
-                catch {
-                    // ignore
-                }
+            onTTFB((metric) => {
+                report(options.reportType, {
+                    pagePath: getPagePath(),
+                    metric: 'TTFB',
+                    value: metric.value,
+                    unit: 'ms',
+                    rating: metric.rating,
+                    id: metric.id,
+                    navigationType: metric.navigationType,
+                });
             });
-            po.observe({ type: 'first-input', buffered: true });
         }
         catch {
             // ignore
         }
     }
-    // Resource timing：资源加载耗时
+    // Resource timing：资源加载耗时（web-vitals 不包含此功能，保留原有实现）
     if (options.resourceTiming && typeof globalThis.PerformanceObserver === 'function') {
         try {
             const po = new PerformanceObserver((list) => {
@@ -1599,9 +1551,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',
@@ -1609,16 +1577,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);
@@ -1646,7 +1624,6 @@ function installWebPerformanceMonitor(report, opts = {}) {
         sampleRate: raw.sampleRate ?? 1,
         ignoreUrls: raw.ignoreUrls ?? [],
         webVitals: raw.webVitals ?? true,
-        navigationTiming: raw.navigationTiming ?? true,
         resourceTiming: raw.resourceTiming ?? true,
         maxTextLength: raw.maxTextLength ?? 2000,
     };

package/dist/web.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var tencentcloudClsSdkJsWeb = require('tencentcloud-cls-sdk-js-web');
+var webVitals = require('web-vitals');
 
 function _interopNamespaceDefault(e) {
     var n = Object.create(null);
@@ -1456,14 +1457,10 @@ function getPagePath() {
         return '';
     }
 }
-function reportMetric(report, reportType, metric, value, extra = {}) {
-    report(reportType, {
-        pagePath: getPagePath(),
-        metric,
-        value,
-        ...extra,
-    });
-}
+/**
+ * 安装浏览器性能监控
+ * 使用 Google web-vitals 库实现 Core Web Vitals 指标采集
+ */
 function installBrowserPerformanceMonitor(report, options) {
     if (typeof window === 'undefined')
         return;
@@ -1472,145 +1469,100 @@ function installBrowserPerformanceMonitor(report, options) {
         return;
     w.__beLinkClsLoggerPerfInstalled__ = true;
     const ignoreUrls = [...DEFAULT_IGNORE, ...(options.ignoreUrls ?? [])];
-    // Navigation timing: TTFB 等
-    if (options.navigationTiming) {
+    // Web Vitals: 使用 Google web-vitals 库
+    // 这个库会自动处理：
+    // - LCP 在用户交互后停止观察
+    // - firstHiddenTime 过滤（页面隐藏后的数据不计入）
+    // - CLS 5秒会话窗口算法
+    // - BFCache 恢复时自动重置指标
+    if (options.webVitals) {
+        // FCP
         try {
-            const navEntries = performance.getEntriesByType?.('navigation');
-            const nav = Array.isArray(navEntries) ? navEntries[0] : undefined;
-            if (nav && typeof nav === 'object') {
-                const ttfb = typeof nav.responseStart === 'number' && typeof nav.requestStart === 'number'
-                    ? nav.responseStart - nav.requestStart
-                    : -1;
-                if (ttfb >= 0 && sampleHit(options.sampleRate))
-                    reportMetric(report, options.reportType, 'TTFB', ttfb, { unit: 'ms' });
-            }
+            webVitals.onFCP((metric) => {
+                report(options.reportType, {
+                    pagePath: getPagePath(),
+                    metric: 'FCP',
+                    value: metric.value,
+                    unit: 'ms',
+                    rating: metric.rating,
+                    id: metric.id,
+                    navigationType: metric.navigationType,
+                });
+            });
         }
         catch {
             // ignore
         }
-    }
-    // Web Vitals: FCP/LCP/CLS/FID
-    if (options.webVitals && typeof globalThis.PerformanceObserver === 'function') {
-        // FCP
+        // LCP（自动处理用户交互后停止）
         try {
-            const po = new PerformanceObserver((list) => {
-                try {
-                    if (!sampleHit(options.sampleRate))
-                        return;
-                    for (const entry of list.getEntries()) {
-                        if (entry?.name === 'first-contentful-paint' && typeof entry.startTime === 'number') {
-                            reportMetric(report, options.reportType, 'FCP', entry.startTime, { unit: 'ms' });
-                        }
-                    }
-                }
-                catch {
-                    // ignore
-                }
+            webVitals.onLCP((metric) => {
+                report(options.reportType, {
+                    pagePath: getPagePath(),
+                    metric: 'LCP',
+                    value: metric.value,
+                    unit: 'ms',
+                    rating: metric.rating,
+                    id: metric.id,
+                    navigationType: metric.navigationType,
+                });
             });
-            po.observe({ type: 'paint', buffered: true });
         }
         catch {
             // ignore
         }
-        // LCP（最后一次为准）
-        let lastLcp = null;
+        // CLS（自动处理会话窗口）
         try {
-            const po = new PerformanceObserver((list) => {
-                try {
-                    const entries = list.getEntries();
-                    if (entries && entries.length)
-                        lastLcp = entries[entries.length - 1];
-                }
-                catch {
-                    // ignore
-                }
+            webVitals.onCLS((metric) => {
+                report(options.reportType, {
+                    pagePath: getPagePath(),
+                    metric: 'CLS',
+                    value: metric.value,
+                    unit: 'score',
+                    rating: metric.rating,
+                    id: metric.id,
+                    navigationType: metric.navigationType,
+                });
             });
-            po.observe({ type: 'largest-contentful-paint', buffered: true });
-            const flushLcp = () => {
-                try {
-                    if (!lastLcp)
-                        return;
-                    if (!sampleHit(options.sampleRate))
-                        return;
-                    if (typeof lastLcp.startTime === 'number')
-                        reportMetric(report, options.reportType, 'LCP', lastLcp.startTime, { unit: 'ms' });
-                    lastLcp = null;
-                }
-                catch {
-                    // ignore
-                }
-            };
-            window.addEventListener('pagehide', flushLcp, { once: true });
-            document.addEventListener('visibilitychange', () => {
-                if (document.visibilityState === 'hidden')
-                    flushLcp();
-            }, { once: true });
         }
         catch {
             // ignore
         }
-        // CLS
+        // INP（替代 FID，2024年3月起成为核心指标）
         try {
-            let clsValue = 0;
-            const po = new PerformanceObserver((list) => {
-                try {
-                    for (const entry of list.getEntries()) {
-                        if (entry && entry.hadRecentInput)
-                            continue;
-                        if (typeof entry.value === 'number')
-                            clsValue += entry.value;
-                    }
-                }
-                catch {
-                    // ignore
-                }
+            webVitals.onINP((metric) => {
+                report(options.reportType, {
+                    pagePath: getPagePath(),
+                    metric: 'INP',
+                    value: metric.value,
+                    unit: 'ms',
+                    rating: metric.rating,
+                    id: metric.id,
+                    navigationType: metric.navigationType,
+                });
             });
-            po.observe({ type: 'layout-shift', buffered: true });
-            const flushCls = () => {
-                try {
-                    if (!sampleHit(options.sampleRate))
-                        return;
-                    reportMetric(report, options.reportType, 'CLS', clsValue, { unit: 'score' });
-                }
-                catch {
-                    // ignore
-                }
-            };
-            window.addEventListener('pagehide', flushCls, { once: true });
-            document.addEventListener('visibilitychange', () => {
-                if (document.visibilityState === 'hidden')
-                    flushCls();
-            }, { once: true });
         }
         catch {
             // ignore
         }
-        // FID
+        // TTFB
         try {
-            const po = new PerformanceObserver((list) => {
-                try {
-                    if (!sampleHit(options.sampleRate))
-                        return;
-                    for (const entry of list.getEntries()) {
-                        const startTime = typeof entry.startTime === 'number' ? entry.startTime : -1;
-                        const processingStart = typeof entry.processingStart === 'number' ? entry.processingStart : -1;
-                        if (startTime >= 0 && processingStart >= 0) {
-                            reportMetric(report, options.reportType, 'FID', processingStart - startTime, { unit: 'ms' });
-                            break;
-                        }
-                    }
-                }
-                catch {
-                    // ignore
-                }
+            webVitals.onTTFB((metric) => {
+                report(options.reportType, {
+                    pagePath: getPagePath(),
+                    metric: 'TTFB',
+                    value: metric.value,
+                    unit: 'ms',
+                    rating: metric.rating,
+                    id: metric.id,
+                    navigationType: metric.navigationType,
+                });
             });
-            po.observe({ type: 'first-input', buffered: true });
         }
         catch {
             // ignore
         }
     }
-    // Resource timing：资源加载耗时
+    // Resource timing：资源加载耗时（web-vitals 不包含此功能，保留原有实现）
     if (options.resourceTiming && typeof globalThis.PerformanceObserver === 'function') {
         try {
             const po = new PerformanceObserver((list) => {
@@ -1622,9 +1574,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',
@@ -1632,16 +1600,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);
@@ -1669,7 +1647,6 @@ function installWebPerformanceMonitor(report, opts = {}) {
         sampleRate: raw.sampleRate ?? 1,
         ignoreUrls: raw.ignoreUrls ?? [],
         webVitals: raw.webVitals ?? true,
-        navigationTiming: raw.navigationTiming ?? true,
         resourceTiming: raw.resourceTiming ?? true,
         maxTextLength: raw.maxTextLength ?? 2000,
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@be-link/cls-logger",
-  "version": "1.0.1-beta.20",
+  "version": "1.0.1-beta.22",
   "description": "@be-link cls-logger - 腾讯云 CLS 日志上报封装",
   "homepage": "https://github.com/snowmountain-top/be-link",
   "author": "zhuiyi",
@@ -45,7 +45,8 @@
   ],
   "dependencies": {
     "tencentcloud-cls-sdk-js-web": "^1.0.11",
-    "tencentcloud-cls-sdk-js-mini": "^1.0.3"
+    "tencentcloud-cls-sdk-js-mini": "^1.0.3",
+    "web-vitals": "^5.1.0"
   },
   "devDependencies": {
     "rimraf": "^5.0.0",