@obtrace/browser 2.5.0 → 2.5.2

package/dist/browser/clicks.js

@@ -16,6 +16,13 @@ export function installClickTracking(tracer, sessionId) {
             return;
         const selector = getElementSelector(target);
         const now = Date.now();
+        addBreadcrumb({
+            timestamp: now,
+            category: "ui.click",
+            message: selector,
+            level: "info",
+            data: { x: ev.clientX, y: ev.clientY },
+        });
         recent.push({ selector, timestamp: now });
         while (recent.length > 0 && now - recent[0].timestamp > RAGE_WINDOW_MS) {
             recent.shift();

package/dist/browser/errors.js

@@ -24,7 +24,7 @@ export function installBrowserErrorHooks(tracer, logger, sessionId) {
                 "error.stack": stack.slice(0, 4096),
                 "error.type": errorType,
                 "breadcrumbs.count": breadcrumbs.length,
-                "breadcrumbs.json": JSON.stringify(breadcrumbs.slice(-20)),
+                "breadcrumbs.json": JSON.stringify(breadcrumbs.slice(-5)),
                 ...(sessionId ? { "session.id": sessionId } : {}),
             };
             logger.emit({
@@ -71,7 +71,7 @@ export function installBrowserErrorHooks(tracer, logger, sessionId) {
                 "error.stack": stack.slice(0, 4096),
                 "error.type": errorType,
                 "breadcrumbs.count": breadcrumbs.length,
-                "breadcrumbs.json": JSON.stringify(breadcrumbs.slice(-20)),
+                "breadcrumbs.json": JSON.stringify(breadcrumbs.slice(-5)),
                 ...(sessionId ? { "session.id": sessionId } : {}),
             };
             logger.emit({

package/dist/browser/index.js

@@ -6,7 +6,7 @@ import { setupOtelWeb } from "../core/otel-web-setup";
 import { installBrowserErrorHooks } from "./errors";
 import { BrowserReplayBuffer } from "./replay";
 import { installWebVitals } from "./vitals";
-import { addBreadcrumb as addCrumb, getBreadcrumbs, installClickBreadcrumbs } from "./breadcrumbs";
+import { addBreadcrumb as addCrumb, getBreadcrumbs } from "./breadcrumbs";
 import { installConsoleCapture } from "./console";
 import { installClickTracking } from "./clicks";
 import { installResourceTiming } from "./resources";
@@ -210,7 +210,6 @@ export function initBrowserSDK(config) {
     if (config.vitals?.enabled !== false)
         cleanups.push(installWebVitals(meter, !!config.vitals?.reportAllChanges));
     cleanups.push(installBrowserErrorHooks(tracer, logger, replay.sessionId));
-    cleanups.push(installClickBreadcrumbs());
     cleanups.push(installClickTracking(tracer, replay.sessionId));
     cleanups.push(installResourceTiming(meter));
     cleanups.push(installLongTaskDetection(tracer));
@@ -227,11 +226,16 @@ export function initBrowserSDK(config) {
         installSharedNavigationTracker();
     }
     let pendingBeaconBlob = null;
+    const scheduleIdle = typeof requestIdleCallback === "function"
+        ? (fn) => requestIdleCallback(fn, { timeout: 2000 })
+        : (fn) => setTimeout(fn, 0);
     client.replayTimer = setInterval(() => {
         const chunk = replay.flush();
         if (chunk) {
-            const json = JSON.stringify(chunk);
-            pendingBeaconBlob = new Blob([json], { type: "application/json" });
+            scheduleIdle(() => {
+                const json = JSON.stringify(chunk);
+                pendingBeaconBlob = new Blob([json], { type: "application/json" });
+            });
             client.replayChunk(chunk);
         }
         else {
@@ -303,8 +307,14 @@ export function initBrowserSDK(config) {
             span.end();
         }
     };
+    const gaugeCache = new Map();
     const metricFn = (name, value, unit, context) => {
-        const gauge = meter.createGauge(name, { unit: unit ?? "1" });
+        const key = `${name}\0${unit ?? "1"}`;
+        let gauge = gaugeCache.get(key);
+        if (!gauge) {
+            gauge = meter.createGauge(name, { unit: unit ?? "1" });
+            gaugeCache.set(key, gauge);
+        }
         gauge.record(value, { ...userAttrs(), ...context?.attrs });
     };
     const captureException = (error, context) => {

package/dist/browser/replay.js

@@ -1,8 +1,8 @@
 import { EventType } from "@rrweb/types";
 import { sanitizeHeaders, stripQuery, toBase64 } from "../shared/utils";
 const KEY_OVERHEAD = 6;
-function estimateObjectBytes(value) {
-    if (value === null || value === undefined)
+function estimateObjectBytes(value, depth = 0) {
+    if (depth > 8 || value === null || value === undefined)
         return 4;
     switch (typeof value) {
         case "string":
@@ -14,14 +14,14 @@ function estimateObjectBytes(value) {
             if (Array.isArray(value)) {
                 let sum = 2;
                 for (let i = 0; i < value.length; i++) {
-                    sum += estimateObjectBytes(value[i]) + 1;
+                    sum += estimateObjectBytes(value[i], depth + 1) + 1;
                 }
                 return sum;
             }
             let sum = 2;
             const keys = Object.keys(value);
             for (let i = 0; i < keys.length; i++) {
-                sum += keys[i].length + KEY_OVERHEAD + estimateObjectBytes(value[keys[i]]);
+                sum += keys[i].length + KEY_OVERHEAD + estimateObjectBytes(value[keys[i]], depth + 1);
             }
             return sum;
         }

package/dist/browser/resources.js

@@ -2,19 +2,32 @@ export function installResourceTiming(meter) {
     if (typeof window === "undefined" || typeof PerformanceObserver === "undefined")
         return () => { };
     const gauge = meter.createGauge("browser.resource.duration", { unit: "ms" });
+    let pendingEntries = [];
+    let flushTimer = null;
+    const flushEntries = () => {
+        flushTimer = null;
+        const batch = pendingEntries;
+        pendingEntries = [];
+        for (const res of batch) {
+            const name = typeof res.name === "string" ? res.name : "";
+            const shortName = name.split("?")[0].split("/").pop() || name.slice(0, 80) || "unknown";
+            gauge.record(res.duration, {
+                "resource.type": String(res.initiatorType || "other"),
+                "resource.name": String(shortName),
+                "resource.transfer_size": Number(res.transferSize) || 0,
+            });
+        }
+    };
     const observer = new PerformanceObserver((list) => {
         try {
             for (const entry of list.getEntries()) {
                 const res = entry;
                 if (res.duration < 100)
                     continue;
-                const name = typeof res.name === "string" ? res.name : "";
-                const shortName = name.split("?")[0].split("/").pop() || name.slice(0, 80) || "unknown";
-                gauge.record(res.duration, {
-                    "resource.type": String(res.initiatorType || "other"),
-                    "resource.name": String(shortName),
-                    "resource.transfer_size": Number(res.transferSize) || 0,
-                });
+                pendingEntries.push(res);
+            }
+            if (pendingEntries.length > 0 && !flushTimer) {
+                flushTimer = setTimeout(flushEntries, 1000);
             }
         }
         catch { }
@@ -25,5 +38,9 @@ export function installResourceTiming(meter) {
     catch {
         return () => { };
     }
-    return () => observer.disconnect();
+    return () => {
+        observer.disconnect();
+        if (flushTimer)
+            clearTimeout(flushTimer);
+    };
 }

package/dist/browser/vitals.js

@@ -59,7 +59,13 @@ export function installWebVitals(meter, reportAllChanges) {
         if (ev.duration > existing) {
             interactionDurations.set(ev.interactionId, ev.duration);
         }
-        if (interactionDurations.size > 50) {
+        if (interactionDurations.size > 100) {
+            const entries = [...interactionDurations.entries()].sort((a, b) => b[1] - a[1]);
+            interactionDurations.clear();
+            for (const [k, v] of entries.slice(0, 50))
+                interactionDurations.set(k, v);
+        }
+        if (interactionDurations.size > 10) {
             const sorted = [...interactionDurations.values()].sort((a, b) => b - a);
             const p98Index = Math.max(0, Math.ceil(sorted.length * 0.02) - 1);
             inpGauge.record(sorted[p98Index], { vital: "inp" });

package/dist/browser_entry.bundle.js

@@ -29733,14 +29733,14 @@ function setupOtelWeb(config) {
       const parsed = parseSupabaseURL(url, method);
       if (!parsed) return;
       const status = typeof result2?.status === "number" ? result2.status : 0;
-      const t = trace.getTracer("@obtrace/sdk-browser", "2.4.0");
+      const t = trace.getTracer("@obtrace/sdk-browser", "2.5.1");
       const synth = { "session.id": sessionId, "supabase.ref": parsed.ref, "span.synthetic": "true" };
-      const parentCtx = trace.setSpan(context.active(), parentSpan);
+      const parentCtx = trace.setSpan(ROOT_CONTEXT, parentSpan);
       context.with(parentCtx, () => {
         const gw = t.startSpan("supabase.gateway", {
           attributes: { ...synth, "http.method": method.toUpperCase(), "http.status_code": status, "peer.service": "supabase.kong" }
         });
-        const gwCtx = trace.setSpan(context.active(), gw);
+        const gwCtx = trace.setSpan(ROOT_CONTEXT, gw);
         context.with(gwCtx, () => {
           if (parsed.service === "postgrest") {
             const db2 = t.startSpan("supabase.db.query", {
@@ -29849,22 +29849,6 @@ function getElementSelector(el) {
   }
   return sel;
 }
-function installClickBreadcrumbs() {
-  if (typeof document === "undefined") return () => {
-  };
-  const handler = (ev) => {
-    const target = ev.target;
-    addBreadcrumb({
-      timestamp: Date.now(),
-      category: "ui.click",
-      message: getElementSelector(target),
-      level: "info",
-      data: { x: ev.clientX, y: ev.clientY }
-    });
-  };
-  document.addEventListener("click", handler, true);
-  return () => document.removeEventListener("click", handler, true);
-}
 
 // src/browser/errors.ts
 var processing = false;
@@ -29889,7 +29873,7 @@ function installBrowserErrorHooks(tracer, logger, sessionId) {
         "error.stack": stack.slice(0, 4096),
         "error.type": errorType,
         "breadcrumbs.count": breadcrumbs.length,
-        "breadcrumbs.json": JSON.stringify(breadcrumbs.slice(-20)),
+        "breadcrumbs.json": JSON.stringify(breadcrumbs.slice(-5)),
         ...sessionId ? { "session.id": sessionId } : {}
       };
       logger.emit({
@@ -29933,7 +29917,7 @@ function installBrowserErrorHooks(tracer, logger, sessionId) {
         "error.stack": stack.slice(0, 4096),
         "error.type": errorType,
         "breadcrumbs.count": breadcrumbs.length,
-        "breadcrumbs.json": JSON.stringify(breadcrumbs.slice(-20)),
+        "breadcrumbs.json": JSON.stringify(breadcrumbs.slice(-5)),
         ...sessionId ? { "session.id": sessionId } : {}
       };
       logger.emit({
@@ -30022,8 +30006,8 @@ function stripQuery(url) {
 
 // src/browser/replay.ts
 var KEY_OVERHEAD = 6;
-function estimateObjectBytes(value) {
-  if (value === null || value === void 0) return 4;
+function estimateObjectBytes(value, depth = 0) {
+  if (depth > 8 || value === null || value === void 0) return 4;
   switch (typeof value) {
     case "string":
       return value.length + 2;
@@ -30034,14 +30018,14 @@ function estimateObjectBytes(value) {
       if (Array.isArray(value)) {
         let sum2 = 2;
         for (let i = 0; i < value.length; i++) {
-          sum2 += estimateObjectBytes(value[i]) + 1;
+          sum2 += estimateObjectBytes(value[i], depth + 1) + 1;
         }
         return sum2;
       }
       let sum = 2;
       const keys = Object.keys(value);
       for (let i = 0; i < keys.length; i++) {
-        sum += keys[i].length + KEY_OVERHEAD + estimateObjectBytes(value[keys[i]]);
+        sum += keys[i].length + KEY_OVERHEAD + estimateObjectBytes(value[keys[i]], depth + 1);
       }
       return sum;
     }
@@ -30202,7 +30186,12 @@ function installWebVitals(meter, reportAllChanges) {
     if (ev.duration > existing) {
       interactionDurations.set(ev.interactionId, ev.duration);
     }
-    if (interactionDurations.size > 50) {
+    if (interactionDurations.size > 100) {
+      const entries = [...interactionDurations.entries()].sort((a, b) => b[1] - a[1]);
+      interactionDurations.clear();
+      for (const [k, v] of entries.slice(0, 50)) interactionDurations.set(k, v);
+    }
+    if (interactionDurations.size > 10) {
       const sorted = [...interactionDurations.values()].sort((a, b) => b - a);
       const p98Index = Math.max(0, Math.ceil(sorted.length * 0.02) - 1);
       inpGauge.record(sorted[p98Index], { vital: "inp" });
@@ -30355,6 +30344,13 @@ function installClickTracking(tracer, sessionId) {
     if (!target) return;
     const selector = getElementSelector(target);
     const now = Date.now();
+    addBreadcrumb({
+      timestamp: now,
+      category: "ui.click",
+      message: selector,
+      level: "info",
+      data: { x: ev.clientX, y: ev.clientY }
+    });
     recent.push({ selector, timestamp: now });
     while (recent.length > 0 && now - recent[0].timestamp > RAGE_WINDOW_MS) {
       recent.shift();
@@ -30405,18 +30401,31 @@ function installResourceTiming(meter) {
   if (typeof window === "undefined" || typeof PerformanceObserver === "undefined") return () => {
   };
   const gauge = meter.createGauge("browser.resource.duration", { unit: "ms" });
+  let pendingEntries = [];
+  let flushTimer = null;
+  const flushEntries = () => {
+    flushTimer = null;
+    const batch = pendingEntries;
+    pendingEntries = [];
+    for (const res of batch) {
+      const name = typeof res.name === "string" ? res.name : "";
+      const shortName = name.split("?")[0].split("/").pop() || name.slice(0, 80) || "unknown";
+      gauge.record(res.duration, {
+        "resource.type": String(res.initiatorType || "other"),
+        "resource.name": String(shortName),
+        "resource.transfer_size": Number(res.transferSize) || 0
+      });
+    }
+  };
   const observer = new PerformanceObserver((list2) => {
     try {
       for (const entry of list2.getEntries()) {
         const res = entry;
         if (res.duration < 100) continue;
-        const name = typeof res.name === "string" ? res.name : "";
-        const shortName = name.split("?")[0].split("/").pop() || name.slice(0, 80) || "unknown";
-        gauge.record(res.duration, {
-          "resource.type": String(res.initiatorType || "other"),
-          "resource.name": String(shortName),
-          "resource.transfer_size": Number(res.transferSize) || 0
-        });
+        pendingEntries.push(res);
+      }
+      if (pendingEntries.length > 0 && !flushTimer) {
+        flushTimer = setTimeout(flushEntries, 1e3);
       }
     } catch {
     }
@@ -30427,7 +30436,10 @@ function installResourceTiming(meter) {
     return () => {
     };
   }
-  return () => observer.disconnect();
+  return () => {
+    observer.disconnect();
+    if (flushTimer) clearTimeout(flushTimer);
+  };
 }
 
 // src/browser/longtasks.ts
@@ -30647,7 +30659,6 @@ function initBrowserSDK(config) {
   });
   if (config.vitals?.enabled !== false) cleanups.push(installWebVitals(meter, !!config.vitals?.reportAllChanges));
   cleanups.push(installBrowserErrorHooks(tracer, logger, replay.sessionId));
-  cleanups.push(installClickBreadcrumbs());
   cleanups.push(installClickTracking(tracer, replay.sessionId));
   cleanups.push(installResourceTiming(meter));
   cleanups.push(installLongTaskDetection(tracer));
@@ -30661,11 +30672,14 @@ function initBrowserSDK(config) {
     installSharedNavigationTracker();
   }
   let pendingBeaconBlob = null;
+  const scheduleIdle = typeof requestIdleCallback === "function" ? (fn) => requestIdleCallback(fn, { timeout: 2e3 }) : (fn) => setTimeout(fn, 0);
   client.replayTimer = setInterval(() => {
     const chunk = replay.flush();
     if (chunk) {
-      const json = JSON.stringify(chunk);
-      pendingBeaconBlob = new Blob([json], { type: "application/json" });
+      scheduleIdle(() => {
+        const json = JSON.stringify(chunk);
+        pendingBeaconBlob = new Blob([json], { type: "application/json" });
+      });
       client.replayChunk(chunk);
     } else {
       pendingBeaconBlob = null;
@@ -30735,8 +30749,14 @@ function initBrowserSDK(config) {
       span.end();
     }
   };
+  const gaugeCache = /* @__PURE__ */ new Map();
   const metricFn = (name, value, unit, context2) => {
-    const gauge = meter.createGauge(name, { unit: unit ?? "1" });
+    const key = `${name}\0${unit ?? "1"}`;
+    let gauge = gaugeCache.get(key);
+    if (!gauge) {
+      gauge = meter.createGauge(name, { unit: unit ?? "1" });
+      gaugeCache.set(key, gauge);
+    }
     gauge.record(value, { ...userAttrs(), ...context2?.attrs });
   };
   const captureException = (error, context2) => {