@be-link/cls-logger 1.0.1-beta.24 → 1.0.1-beta.26

package/dist/web.js

@@ -3,7 +3,6 @@
 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);
@@ -1488,10 +1487,14 @@ function getPagePath() {
         return '';
     }
 }
-/**
- * 安装浏览器性能监控
- * 使用 Google web-vitals 库实现 Core Web Vitals 指标采集
- */
+function reportMetric(report, reportType, metric, value, extra = {}) {
+    report(reportType, {
+        pagePath: getPagePath(),
+        metric,
+        value,
+        ...extra,
+    });
+}
 function installBrowserPerformanceMonitor(report, options) {
     if (typeof window === 'undefined')
         return;
@@ -1500,100 +1503,145 @@ function installBrowserPerformanceMonitor(report, options) {
         return;
     w.__beLinkClsLoggerPerfInstalled__ = true;
     const ignoreUrls = [...DEFAULT_IGNORE, ...(options.ignoreUrls ?? [])];
-    // Web Vitals: 使用 Google web-vitals 库
-    // 这个库会自动处理：
-    // - LCP 在用户交互后停止观察
-    // - firstHiddenTime 过滤（页面隐藏后的数据不计入）
-    // - CLS 5秒会话窗口算法
-    // - BFCache 恢复时自动重置指标
-    if (options.webVitals) {
-        // FCP
+    // Navigation timing: TTFB 等
+    if (options.navigationTiming) {
         try {
-            webVitals.onFCP((metric) => {
-                report(options.reportType, {
-                    pagePath: getPagePath(),
-                    metric: 'FCP',
-                    value: metric.value,
-                    unit: 'ms',
-                    rating: metric.rating,
-                    id: metric.id,
-                    navigationType: metric.navigationType,
-                });
-            });
+            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' });
+            }
         }
         catch {
             // ignore
         }
-        // LCP（自动处理用户交互后停止）
+    }
+    // Web Vitals: FCP/LCP/CLS/FID
+    if (options.webVitals && typeof globalThis.PerformanceObserver === 'function') {
+        // FCP
         try {
-            webVitals.onLCP((metric) => {
-                report(options.reportType, {
-                    pagePath: getPagePath(),
-                    metric: 'LCP',
-                    value: metric.value,
-                    unit: 'ms',
-                    rating: metric.rating,
-                    id: metric.id,
-                    navigationType: metric.navigationType,
-                });
+            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
+                }
             });
+            po.observe({ type: 'paint', buffered: true });
         }
         catch {
             // ignore
         }
-        // CLS（自动处理会话窗口）
+        // LCP（最后一次为准）
+        let lastLcp = null;
         try {
-            webVitals.onCLS((metric) => {
-                report(options.reportType, {
-                    pagePath: getPagePath(),
-                    metric: 'CLS',
-                    value: metric.value,
-                    unit: 'score',
-                    rating: metric.rating,
-                    id: metric.id,
-                    navigationType: metric.navigationType,
-                });
+            const po = new PerformanceObserver((list) => {
+                try {
+                    const entries = list.getEntries();
+                    if (entries && entries.length)
+                        lastLcp = entries[entries.length - 1];
+                }
+                catch {
+                    // ignore
+                }
             });
+            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
         }
-        // INP（替代 FID，2024年3月起成为核心指标）
+        // CLS
         try {
-            webVitals.onINP((metric) => {
-                report(options.reportType, {
-                    pagePath: getPagePath(),
-                    metric: 'INP',
-                    value: metric.value,
-                    unit: 'ms',
-                    rating: metric.rating,
-                    id: metric.id,
-                    navigationType: metric.navigationType,
-                });
+            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
+                }
             });
+            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
         }
-        // TTFB
+        // FID
         try {
-            webVitals.onTTFB((metric) => {
-                report(options.reportType, {
-                    pagePath: getPagePath(),
-                    metric: 'TTFB',
-                    value: metric.value,
-                    unit: 'ms',
-                    rating: metric.rating,
-                    id: metric.id,
-                    navigationType: metric.navigationType,
-                });
+            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
+                }
             });
+            po.observe({ type: 'first-input', buffered: true });
         }
         catch {
             // ignore
         }
     }
-    // Resource timing：资源加载耗时（web-vitals 不包含此功能，保留原有实现）
+    // Resource timing：资源加载耗时
     if (options.resourceTiming && typeof globalThis.PerformanceObserver === 'function') {
         try {
             const po = new PerformanceObserver((list) => {
@@ -1678,6 +1726,7 @@ 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.24",
+  "version": "1.0.1-beta.26",
   "description": "@be-link cls-logger - 腾讯云 CLS 日志上报封装",
   "homepage": "https://github.com/snowmountain-top/be-link",
   "author": "zhuiyi",
@@ -45,8 +45,7 @@
   ],
   "dependencies": {
     "tencentcloud-cls-sdk-js-web": "^1.0.11",
-    "tencentcloud-cls-sdk-js-mini": "^1.0.3",
-    "web-vitals": "^5.1.0"
+    "tencentcloud-cls-sdk-js-mini": "^1.0.3"
   },
   "devDependencies": {
     "rimraf": "^5.0.0",