@react-perfscope/core 0.7.0 → 1.0.0

package/dist/index.cjs

@@ -129,8 +129,14 @@ var import_trace_mapping = require("@jridgewell/trace-mapping");
 
 // src/self-requests.ts
 var selfRequests = /* @__PURE__ */ new Set();
+var MAX_SELF_REQUESTS = 2e3;
 function markSelfRequest(url) {
+  selfRequests.delete(url);
   selfRequests.add(url);
+  if (selfRequests.size > MAX_SELF_REQUESTS) {
+    const oldest = selfRequests.values().next().value;
+    if (oldest !== void 0) selfRequests.delete(oldest);
+  }
 }
 function isSelfRequest(url) {
   return selfRequests.has(url);
@@ -139,23 +145,25 @@ function isSelfRequest(url) {
 // src/sourcemap.ts
 var CHROME_FRAME = /^\s*at\s+(?:(.+?)\s+\()?(.+?):(\d+):(\d+)\)?$/;
 var FIREFOX_FRAME = /^(.*?)@(.+?):(\d+):(\d+)$/;
+function lookupFrame(tracer, frame) {
+  const pos = (0, import_trace_mapping.originalPositionFor)(tracer, { line: frame.line, column: frame.col - 1 });
+  if (pos.source == null || pos.line == null || pos.column == null) {
+    return frame;
+  }
+  const resolved = {
+    file: pos.source,
+    line: pos.line,
+    col: pos.column + 1
+  };
+  if (pos.name) resolved.fnName = pos.name;
+  else if (frame.fnName) resolved.fnName = frame.fnName;
+  return resolved;
+}
 async function resolveFrame(frame, fetchMap) {
   try {
     const map = await fetchMap(frame.file);
     if (!map) return frame;
-    const tracer = new import_trace_mapping.TraceMap(map);
-    const pos = (0, import_trace_mapping.originalPositionFor)(tracer, { line: frame.line, column: frame.col });
-    if (pos.source == null || pos.line == null || pos.column == null) {
-      return frame;
-    }
-    const resolved = {
-      file: pos.source,
-      line: pos.line,
-      col: pos.column
-    };
-    if (pos.name) resolved.fnName = pos.name;
-    else if (frame.fnName) resolved.fnName = frame.fnName;
-    return resolved;
+    return lookupFrame(new import_trace_mapping.TraceMap(map), frame);
   } catch (err) {
     console.warn("[react-perfscope] resolveFrame failed:", err);
     return frame;
@@ -175,13 +183,25 @@ function attachLazyStack(target, raw, skipTopFrames = 0) {
     }
   });
 }
+var MAX_CACHED_MAPS = 50;
+function sourceCacheKey(url) {
+  const q = url.indexOf("?");
+  const h = url.indexOf("#");
+  const end = Math.min(q === -1 ? url.length : q, h === -1 ? url.length : h);
+  return url.slice(0, end);
+}
 function createSourceMapResolver(opts = {}) {
   const f = opts.fetch ?? (typeof fetch !== "undefined" ? fetch.bind(globalThis) : null);
   const cache = /* @__PURE__ */ new Map();
-  function fetchMapFor(sourceUrl) {
+  function fetchTracerFor(sourceUrl) {
     if (!f) return Promise.resolve(null);
-    const existing = cache.get(sourceUrl);
-    if (existing) return existing;
+    const key = sourceCacheKey(sourceUrl);
+    const existing = cache.get(key);
+    if (existing) {
+      cache.delete(key);
+      cache.set(key, existing);
+      return existing;
+    }
     const promise = (async () => {
       try {
         markSelfRequest(sourceUrl);
@@ -197,24 +217,31 @@ function createSourceMapResolver(opts = {}) {
           const header = ref.slice(0, commaIdx);
           const payload = ref.slice(commaIdx + 1);
           const decoded = header.includes("base64") ? typeof atob === "function" ? atob(payload) : globalThis.Buffer.from(payload, "base64").toString("utf8") : decodeURIComponent(payload);
-          return JSON.parse(decoded);
+          return new import_trace_mapping.TraceMap(JSON.parse(decoded));
         }
         const mapUrl = new URL(ref, sourceUrl).href;
         markSelfRequest(mapUrl);
         const mapRes = await f(mapUrl);
         if (!mapRes || !mapRes.ok) return null;
-        return await mapRes.json();
+        return new import_trace_mapping.TraceMap(await mapRes.json());
       } catch {
+        cache.delete(key);
         return null;
       }
     })();
-    cache.set(sourceUrl, promise);
+    cache.set(key, promise);
+    if (cache.size > MAX_CACHED_MAPS) {
+      const oldest = cache.keys().next().value;
+      if (oldest !== void 0) cache.delete(oldest);
+    }
     return promise;
   }
   return {
     async resolve(frame) {
       try {
-        return await resolveFrame(frame, fetchMapFor);
+        const tracer = await fetchTracerFor(frame.file);
+        if (!tracer) return frame;
+        return lookupFrame(tracer, frame);
       } catch {
         return frame;
       }
@@ -405,6 +432,7 @@ function createLongTasksCollector() {
   return {
     kind: "long-task",
     activate(emit) {
+      if (active) return;
       if (typeof PerformanceObserver === "undefined") {
         console.warn("[react-perfscope] PerformanceObserver not supported; long-tasks disabled");
         return;
@@ -456,6 +484,20 @@ function createLongTasksCollector() {
   };
 }
 
+// src/self-measurement.ts
+var depth = 0;
+function withSelfMeasurement(fn) {
+  depth++;
+  try {
+    return fn();
+  } finally {
+    depth--;
+  }
+}
+function inSelfMeasurement() {
+  return depth > 0;
+}
+
 // src/collectors/forced-reflow.ts
 var LAYOUT_GETTERS = [
   "offsetWidth",
@@ -518,7 +560,7 @@ function createForcedReflowCollector() {
     Object.defineProperty(proto, key, {
       configurable: true,
       get() {
-        if (active) {
+        if (active && !inSelfMeasurement()) {
           if (!consumePendingMutations()) {
             return originalGet.call(this);
           }
@@ -543,7 +585,7 @@ function createForcedReflowCollector() {
       configurable: true,
       writable: true,
       value: function patchedLayoutMethod(...args) {
-        if (active) {
+        if (active && !inSelfMeasurement()) {
           if (!consumePendingMutations()) {
             return original.apply(this, args);
           }
@@ -633,7 +675,7 @@ function collectPerfscopeRects() {
 function entryIsOnlyFromPerfscope(sources) {
   if (sources.length === 0) return false;
   if (typeof document === "undefined") return false;
-  const hostRects = collectPerfscopeRects();
+  const hostRects = withSelfMeasurement(collectPerfscopeRects);
   if (hostRects.length === 0) return false;
   for (const src of sources) {
     let matched = false;
@@ -670,6 +712,7 @@ function createLayoutShiftCollector() {
   return {
     kind: "layout-shift",
     activate(emit) {
+      if (active) return;
       if (typeof PerformanceObserver === "undefined") {
         console.warn("[react-perfscope] PerformanceObserver not supported; layout-shift disabled");
         return;
@@ -728,6 +771,7 @@ function createNetworkCollector() {
   return {
     kind: "network",
     activate(emit) {
+      if (active) return;
       if (typeof PerformanceObserver === "undefined") {
         console.warn("[react-perfscope] PerformanceObserver not supported; network disabled");
         return;
@@ -771,37 +815,40 @@ function createNetworkCollector() {
 
 // src/collectors/web-vitals.ts
 var import_web_vitals = require("web-vitals");
+var subscribed = false;
+var sinks = /* @__PURE__ */ new Set();
+function ensureSubscribed() {
+  if (subscribed) return true;
+  try {
+    const fan = (name) => (metric) => {
+      for (const sink of sinks) sink(name, metric.value);
+    };
+    (0, import_web_vitals.onLCP)(fan("LCP"));
+    (0, import_web_vitals.onINP)(fan("INP"));
+    (0, import_web_vitals.onCLS)(fan("CLS"));
+    (0, import_web_vitals.onFCP)(fan("FCP"));
+    (0, import_web_vitals.onTTFB)(fan("TTFB"));
+    subscribed = true;
+  } catch (err) {
+    console.warn("[react-perfscope] web-vitals collector failed to subscribe:", err);
+  }
+  return subscribed;
+}
 function createWebVitalsCollector() {
-  let active = false;
-  let subscribed = false;
   let emit = () => {
   };
-  function makeHandler(name) {
-    return (metric) => {
-      if (!active) return;
-      emit({ kind: "web-vital", name, value: metric.value });
-    };
-  }
+  const sink = (name, value) => {
+    emit({ kind: "web-vital", name, value });
+  };
   return {
     kind: "web-vital",
     activate(emitFn) {
+      if (!ensureSubscribed()) return;
       emit = emitFn;
-      active = true;
-      if (subscribed) return;
-      try {
-        (0, import_web_vitals.onLCP)(makeHandler("LCP"));
-        (0, import_web_vitals.onINP)(makeHandler("INP"));
-        (0, import_web_vitals.onCLS)(makeHandler("CLS"));
-        (0, import_web_vitals.onFCP)(makeHandler("FCP"));
-        (0, import_web_vitals.onTTFB)(makeHandler("TTFB"));
-        subscribed = true;
-      } catch (err) {
-        console.warn("[react-perfscope] web-vitals collector failed to subscribe:", err);
-        active = false;
-      }
+      sinks.add(sink);
     },
     deactivate() {
-      active = false;
+      sinks.delete(sink);
     }
   };
 }
@@ -874,6 +921,7 @@ function createHeapCollector() {
   return {
     kind: "heap",
     activate() {
+      if (timer != null) return;
       samples = [];
       if (!readMemory()) return;
       sample();
@@ -894,6 +942,7 @@ function createHeapCollector() {
 
 // src/collectors/interaction.ts
 var DURATION_THRESHOLD = 40;
+var MAX_ENTRIES = 5e3;
 function selectorFor(target) {
   const el = target;
   if (!el || typeof el.tagName !== "string") return void 0;
@@ -916,13 +965,17 @@ function createInteractionCollector() {
   return {
     kind: "interaction",
     activate() {
+      if (active) return;
       if (typeof PerformanceObserver === "undefined" || !supportsEventTiming()) return;
       active = true;
       entries = [];
       try {
         observer = new PerformanceObserver((list) => {
           if (!active) return;
-          for (const e of list.getEntries()) entries.push(e);
+          for (const e of list.getEntries()) {
+            if (entries.length >= MAX_ENTRIES) break;
+            entries.push(e);
+          }
         });
         observer.observe({ type: "event", buffered: false, durationThreshold: DURATION_THRESHOLD });
         try {
@@ -946,8 +999,10 @@ function createInteractionCollector() {
       }
     },
     finalize(result) {
+      const buffered = entries;
+      entries = [];
       const byId = /* @__PURE__ */ new Map();
-      for (const e of entries) {
+      for (const e of buffered) {
         const id = e.interactionId;
         if (!id) continue;
         const group = byId.get(id);
@@ -1146,6 +1201,7 @@ function createSelfProfilingCollector() {
   return {
     kind: "long-task",
     activate() {
+      if (profiler) return;
       tracePromise = null;
       const Ctor = globalThis.Profiler;
       if (typeof Ctor !== "function") return;
@@ -1163,6 +1219,8 @@ function createSelfProfilingCollector() {
       if (!profiler) return;
       try {
         tracePromise = profiler.stop();
+        tracePromise.catch(() => {
+        });
       } catch (err) {
         console.warn("[react-perfscope] self-profiling stop failed:", err);
         tracePromise = null;