cwj_monitoring 0.0.24 → 0.0.26

package/README.md

@@ -91,22 +91,20 @@ interface TransportConfig {
 - **FP (First Paint)**: 首次绘制时间
 - **FCP (First Contentful Paint)**: 首次内容绘制时间
 - **LCP (Largest Contentful Paint)**: 最大内容绘制时间
-- **INP (Interaction to Next Paint)**: 交互到下一次绘制的延迟（关注交互响应性）
-- **Long Task**: 超过阈值的长任务（关注主线程阻塞）
+- **LoAF (Long Animation Frame)**: 现代化的长任务监控，提供详尽的脚本级归因（Chrome 123+）
 - **Resource**: 仅监听 `fetch` 与 `xmlhttprequest` 的网络请求耗时
 
 **配置项：**
 
-- `longTaskThreshold`: 长任务阈值 (ms)，默认 `100`
+- `loafThreshold`: LoAF 阈值 (ms)，默认 `50`
 - `resourceThreshold`: 资源加载阈值 (ms)，默认 `1000`
-- `inpThreshold`: INP 阈值 (ms)，默认 `200`
 - `filter`: 过滤函数，支持按类型过滤指标
 
 示例：
 
 ```typescript
 PerformancePlugin({
-  longTaskThreshold: 200, // 仅记录超过 200ms 的长任务
+  loafThreshold: 150, // 仅记录超过 150ms 的 LoAF
   resourceThreshold: 2000, // 仅记录超过 2s 的请求
 });
 ```

package/dist/index.cjs

@@ -105,13 +105,19 @@ function throttle(fn, delay) {
     }
   };
 }
+const isIgnoredScriptSource = (sourceURL) => {
+  if (!sourceURL || typeof sourceURL !== "string")
+    return false;
+  if (/node_modules/.test(sourceURL))
+    return true;
+  return false;
+};
 
 const MAX_CACHE_LEN = 5;
 const MAX_WAITING_TIME = 3e4;
 const UUID = "track_uuid";
-const DEFAULT_LONG_TASK_THRESHOLD = 100;
 const DEFAULT_RESOURCE_THRESHOLD = 1e3;
-const DEFAULT_INP_THRESHOLD = 200;
+const DEFAULT_LOAF_THRESHOLD = 50;
 
 var __defProp$3 = Object.defineProperty;
 var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
@@ -317,6 +323,7 @@ var EMIT_TYPE = /* @__PURE__ */ ((EMIT_TYPE2) => {
   EMIT_TYPE2["PERFORMANCE_INP"] = "performance_inp";
   EMIT_TYPE2["PERFORMANCE_LONGTASK"] = "performance_longtask";
   EMIT_TYPE2["PERFORMANCE_RESOURCE"] = "performance_resource";
+  EMIT_TYPE2["PERFORMANCE_LOAF"] = "performance_loaf";
   EMIT_TYPE2["XHR"] = "xhr";
   EMIT_TYPE2["FETCH"] = "fetch";
   EMIT_TYPE2["CUSTOM"] = "custom";
@@ -610,10 +617,8 @@ const PerformancePlugin = (options = {}) => {
   let context;
   let paintObserver = null;
   let lcpObserver = null;
-  let inpObserver = null;
-  let longTaskObserver = null;
   let resourceObserver = null;
-  const interactionMap = /* @__PURE__ */ new Map();
+  let loafObserver = null;
   const monitorPaintMetrics = () => {
     const entryHandler = (list) => {
       for (const entry of list.getEntries()) {
@@ -657,63 +662,56 @@ const PerformancePlugin = (options = {}) => {
       console.warn("[CWJ Monitor] LCP observation not supported:", e);
     }
   };
-  const monitorINP = () => {
+  const monitorLoAF = () => {
     const entryHandler = (list) => {
       for (const entry of list.getEntries()) {
-        if (!entry.interactionId)
+        if (options.filter && !options.filter(EMIT_TYPE.PERFORMANCE_LOAF, entry)) {
           continue;
-        const existing = interactionMap.get(entry.interactionId);
-        if (existing) {
-          clearTimeout(existing.timeoutId);
         }
-        const maxEntry = existing && existing.entry.duration > entry.duration ? existing.entry : entry;
-        const timeoutId = setTimeout(() => {
-          interactionMap.delete(maxEntry.interactionId);
-          if (options.filter && !options.filter(EMIT_TYPE.PERFORMANCE_INP, maxEntry)) {
-            return;
+        const threshold = options.loafThreshold ?? DEFAULT_LOAF_THRESHOLD;
+        if (entry.duration > threshold) {
+          const scripts = Array.isArray(entry.scripts) ? entry.scripts : [];
+          let isUserTriggered = false;
+          let allIgnored = true;
+          for (let i = 0; i < scripts.length; i++) {
+            const s = scripts[i];
+            if (!s)
+              continue;
+            if (!isUserTriggered && s.invokerType === "user-callback")
+              isUserTriggered = true;
+            if (allIgnored && !isIgnoredScriptSource(s.sourceURL)) {
+              allIgnored = false;
+            }
+            if (isUserTriggered && !allIgnored)
+              break;
           }
-          const threshold = options.inpThreshold ?? DEFAULT_INP_THRESHOLD;
-          if (maxEntry.duration > threshold) {
-            context?.emit(EMIT_TYPE.PERFORMANCE_INP, {
-              value: maxEntry.duration,
-              startTime: maxEntry.startTime,
-              name: maxEntry.name,
-              interactionId: maxEntry.interactionId
+          if (isUserTriggered && !allIgnored) {
+            context?.emit(EMIT_TYPE.PERFORMANCE_LOAF, {
+              duration: entry.duration,
+              startTime: entry.startTime,
+              renderStart: entry.renderStart,
+              styleAndLayoutStart: entry.styleAndLayoutStart,
+              hadRecentInput: entry.hadRecentInput,
+              scripts: entry.scripts.map((s) => ({
+                duration: s.duration,
+                invoker: s.invoker,
+                invokerType: s.invokerType,
+                sourceURL: s.sourceURL,
+                functionName: s.functionName,
+                sourceFunctionName: s.sourceFunctionName,
+                sourceCharPosition: s.sourceCharPosition,
+                startTime: s.startTime
+              }))
             });
           }
-        }, 200);
-        interactionMap.set(entry.interactionId, { entry: maxEntry, timeoutId });
-      }
-    };
-    try {
-      inpObserver = new PerformanceObserver(entryHandler);
-      inpObserver.observe({ type: "event", buffered: true });
-    } catch (e) {
-      console.warn("[CWJ Monitor] INP observation not supported:", e);
-    }
-  };
-  const monitorLongTask = () => {
-    const entryHandler = (list) => {
-      for (const entry of list.getEntries()) {
-        if (options.filter && !options.filter(EMIT_TYPE.PERFORMANCE_LONGTASK, entry)) {
-          continue;
-        }
-        const threshold = options.longTaskThreshold ?? DEFAULT_LONG_TASK_THRESHOLD;
-        if (entry.duration > threshold) {
-          context?.emit(EMIT_TYPE.PERFORMANCE_LONGTASK, {
-            startTime: entry.startTime,
-            duration: entry.duration,
-            name: entry.name,
-            attribution: entry.attribution
-          });
         }
       }
     };
     try {
-      longTaskObserver = new PerformanceObserver(entryHandler);
-      longTaskObserver.observe({ type: "longtask", buffered: true });
+      loafObserver = new PerformanceObserver(entryHandler);
+      loafObserver.observe({ type: "long-animation-frame", buffered: true });
     } catch (e) {
-      console.warn("[CWJ Monitor] Long Task observation not supported:", e);
+      console.warn("[CWJ Monitor] LoAF observation not supported:", e);
     }
   };
   const monitorResource = () => {
@@ -753,18 +751,14 @@ const PerformancePlugin = (options = {}) => {
       context = ctx;
       monitorPaintMetrics();
       monitorLCP();
-      monitorINP();
-      monitorLongTask();
       monitorResource();
+      monitorLoAF();
     },
     uninstall: () => {
       paintObserver?.disconnect();
       lcpObserver?.disconnect();
-      inpObserver?.disconnect();
-      longTaskObserver?.disconnect();
       resourceObserver?.disconnect();
-      interactionMap.forEach((value) => clearTimeout(value.timeoutId));
-      interactionMap.clear();
+      loafObserver?.disconnect();
     }
   };
 };