@obtrace/browser 2.3.0 → 2.4.1

package/dist/browser/console.js

@@ -17,6 +17,7 @@ const SEVERITY_MAP = {
 };
 let patched = false;
 let originals = {};
+let emitting = false;
 export function installConsoleCapture(tracer, logger, sessionId) {
     if (patched || typeof console === "undefined")
         return () => { };
@@ -29,7 +30,10 @@ export function installConsoleCapture(tracer, logger, sessionId) {
         const level = LEVEL_MAP[method];
         console[method] = (...args) => {
             original(...args);
+            if (emitting)
+                return;
             try {
+                emitting = true;
                 let message;
                 let attrs = {};
                 const safeStringify = (v) => {
@@ -104,6 +108,9 @@ export function installConsoleCapture(tracer, logger, sessionId) {
                 }
             }
             catch { }
+            finally {
+                emitting = false;
+            }
         };
     }
     return () => {

package/dist/browser/errors.js

@@ -1,14 +1,18 @@
 import { SpanStatusCode } from "@opentelemetry/api";
 import { SeverityNumber } from "@opentelemetry/api-logs";
 import { addBreadcrumb, getBreadcrumbs } from "./breadcrumbs";
+let processing = false;
 export function installBrowserErrorHooks(tracer, logger, sessionId) {
     if (typeof window === "undefined") {
         return () => undefined;
     }
     const onError = (ev) => {
+        if (processing)
+            return;
         const message = ev.message || "window.error";
         addBreadcrumb({ timestamp: Date.now(), category: "error", message, level: "error" });
         try {
+            processing = true;
             const breadcrumbs = getBreadcrumbs();
             const stack = ev.error instanceof Error ? ev.error.stack || "" : "";
             const errorType = ev.error?.constructor?.name || "Error";
@@ -40,8 +44,13 @@ export function installBrowserErrorHooks(tracer, logger, sessionId) {
             span.end();
         }
         catch { }
+        finally {
+            processing = false;
+        }
     };
     const onRejection = (ev) => {
+        if (processing)
+            return;
         let reason;
         let stack = "";
         let errorType = "UnhandledRejection";
@@ -55,6 +64,7 @@ export function installBrowserErrorHooks(tracer, logger, sessionId) {
         }
         addBreadcrumb({ timestamp: Date.now(), category: "error", message: reason, level: "error" });
         try {
+            processing = true;
             const breadcrumbs = getBreadcrumbs();
             const attrs = {
                 "error.message": reason,
@@ -81,6 +91,9 @@ export function installBrowserErrorHooks(tracer, logger, sessionId) {
             span.end();
         }
         catch { }
+        finally {
+            processing = false;
+        }
     };
     window.addEventListener("error", onError);
     window.addEventListener("unhandledrejection", onRejection);

package/dist/browser/index.js

@@ -13,6 +13,7 @@ import { installResourceTiming } from "./resources";
 import { installLongTaskDetection } from "./longtasks";
 import { installMemoryTracking } from "./memory";
 import { installOfflineSupport } from "./offline";
+import { installSupabaseFetchInterceptor } from "./supabase-intercept";
 const instances = new Set();
 const replayBuffers = new Set();
 let currentUser = null;
@@ -166,7 +167,7 @@ export function initBrowserSDK(config) {
     const otel = setupOtelWeb({ ...config, tracesSampleRate: sampleRate, sessionId: replay.sessionId });
     const tracer = otel.tracer;
     const meter = otel.meter;
-    const logger = otel.loggerProvider.getLogger("@obtrace/sdk-browser", "2.2.0");
+    const logger = otel.loggerProvider.getLogger("@obtrace/sdk-browser", "2.4.0");
     const client = new ObtraceClient({
         ...config,
         replay: {
@@ -215,6 +216,7 @@ export function initBrowserSDK(config) {
     cleanups.push(installResourceTiming(meter));
     cleanups.push(installLongTaskDetection(tracer));
     cleanups.push(installMemoryTracking(meter));
+    cleanups.push(installSupabaseFetchInterceptor(tracer, replay.sessionId));
     if (config.captureConsole !== false) {
         cleanups.push(installConsoleCapture(tracer, logger, replay.sessionId));
     }
@@ -236,7 +238,7 @@ export function initBrowserSDK(config) {
         }
     }, config.replay?.flushIntervalMs ?? 5000);
     const sendViaBeacon = () => {
-        const url = `${config.ingestBaseUrl?.replace(/\/$/, "")}/ingest/replay/chunk`;
+        const url = `${config.ingestBaseUrl?.replace(/\/$/, "")}/ingest/replay/chunk?token=${encodeURIComponent(config.apiKey)}`;
         const freshChunk = replay.flush();
         if (freshChunk) {
             navigator.sendBeacon(url, new Blob([JSON.stringify(freshChunk)], { type: "application/json" }));

package/dist/browser/resources.js

@@ -3,16 +3,21 @@ export function installResourceTiming(meter) {
         return () => { };
     const gauge = meter.createGauge("browser.resource.duration", { unit: "ms" });
     const observer = new PerformanceObserver((list) => {
-        for (const entry of list.getEntries()) {
-            const res = entry;
-            if (res.duration < 100)
-                continue;
-            gauge.record(res.duration, {
-                "resource.type": res.initiatorType || "other",
-                "resource.name": res.name.split("?")[0].split("/").pop() || res.name.slice(0, 80),
-                "resource.transfer_size": res.transferSize || 0,
-            });
+        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,
+                });
+            }
         }
+        catch { }
     });
     try {
         observer.observe({ type: "resource", buffered: false });

package/dist/browser/supabase-intercept.js

@@ -0,0 +1,133 @@
+import { SpanStatusCode, context, trace } from "@opentelemetry/api";
+import { isSupabaseURL, parseSupabaseURL } from "./supabase";
+import { addBreadcrumb } from "./breadcrumbs";
+export function installSupabaseFetchInterceptor(tracer, sessionId) {
+    if (typeof window === "undefined" || typeof window.fetch === "undefined")
+        return () => { };
+    const originalFetch = window.fetch;
+    window.fetch = async function (input, init) {
+        const url = typeof input === "string" ? input : input instanceof URL ? input.href : input instanceof Request ? input.url : "";
+        if (!url || !isSupabaseURL(url)) {
+            return originalFetch.call(this, input, init);
+        }
+        const method = init?.method || (input instanceof Request ? input.method : "GET") || "GET";
+        const parsed = parseSupabaseURL(url, method);
+        if (!parsed) {
+            return originalFetch.call(this, input, init);
+        }
+        const rootSpan = tracer.startSpan(`supabase.${parsed.service} ${parsed.detail}`, {
+            attributes: {
+                "supabase.ref": parsed.ref,
+                "supabase.service": parsed.service,
+                "supabase.operation": parsed.operation,
+                "supabase.detail": parsed.detail,
+                "http.method": method.toUpperCase(),
+                "http.url": url.split("?")[0],
+                "peer.service": `supabase.${parsed.service}`,
+                "session.id": sessionId,
+                ...(parsed.service === "postgrest" ? {
+                    "db.system": "postgresql",
+                    "db.operation": parsed.operation,
+                    "db.sql.table": parsed.table,
+                } : {}),
+            },
+        });
+        const rootCtx = trace.setSpan(context.active(), rootSpan);
+        const startMs = performance.now();
+        try {
+            const response = await originalFetch.call(this, input, init);
+            const durationMs = performance.now() - startMs;
+            rootSpan.setAttribute("http.status_code", response.status);
+            rootSpan.setAttribute("supabase.duration_ms", Math.round(durationMs));
+            context.with(rootCtx, () => {
+                createChildSpans(tracer, parsed, method, response.status, durationMs, sessionId);
+            });
+            if (response.status >= 400) {
+                rootSpan.setStatus({ code: SpanStatusCode.ERROR, message: `HTTP ${response.status}` });
+                addBreadcrumb({ timestamp: Date.now(), category: "supabase", message: `${parsed.detail} → ${response.status}`, level: "error" });
+            }
+            else {
+                rootSpan.setStatus({ code: SpanStatusCode.OK });
+                addBreadcrumb({ timestamp: Date.now(), category: "supabase", message: `${parsed.detail} → ${response.status} (${Math.round(durationMs)}ms)`, level: "info" });
+            }
+            rootSpan.end();
+            return response;
+        }
+        catch (err) {
+            rootSpan.setStatus({ code: SpanStatusCode.ERROR, message: err instanceof Error ? err.message : "fetch failed" });
+            if (err instanceof Error)
+                rootSpan.recordException(err);
+            rootSpan.end();
+            addBreadcrumb({ timestamp: Date.now(), category: "supabase", message: `${parsed.detail} → FAILED`, level: "error" });
+            throw err;
+        }
+    };
+    return () => { window.fetch = originalFetch; };
+}
+function createChildSpans(tracer, parsed, method, status, _durationMs, sessionId) {
+    const synth = { "session.id": sessionId, "supabase.ref": parsed.ref, "span.synthetic": "true" };
+    const gatewaySpan = tracer.startSpan("supabase.gateway", {
+        attributes: {
+            ...synth,
+            "http.method": method.toUpperCase(),
+            "http.status_code": status,
+            "peer.service": "supabase.kong",
+        },
+    });
+    const gatewayCtx = trace.setSpan(context.active(), gatewaySpan);
+    context.with(gatewayCtx, () => {
+        if (parsed.service === "postgrest") {
+            const dbSpan = tracer.startSpan("supabase.db.query", {
+                attributes: {
+                    ...synth,
+                    "db.system": "postgresql",
+                    "db.operation": parsed.operation,
+                    "db.sql.table": parsed.table,
+                    "db.statement": parsed.detail,
+                    "peer.service": "supabase.postgresql",
+                },
+            });
+            if (status >= 400)
+                dbSpan.setStatus({ code: SpanStatusCode.ERROR, message: `HTTP ${status}` });
+            else
+                dbSpan.setStatus({ code: SpanStatusCode.OK });
+            dbSpan.end();
+        }
+        if (parsed.service === "auth") {
+            const authSpan = tracer.startSpan("supabase.auth." + parsed.operation, {
+                attributes: { ...synth, "auth.operation": parsed.operation, "peer.service": "supabase.gotrue" },
+            });
+            if (status >= 400)
+                authSpan.setStatus({ code: SpanStatusCode.ERROR, message: `HTTP ${status}` });
+            else
+                authSpan.setStatus({ code: SpanStatusCode.OK });
+            authSpan.end();
+        }
+        if (parsed.service === "storage") {
+            const storageSpan = tracer.startSpan("supabase.storage." + parsed.operation, {
+                attributes: { ...synth, "storage.operation": parsed.operation, "peer.service": "supabase.storage" },
+            });
+            if (status >= 400)
+                storageSpan.setStatus({ code: SpanStatusCode.ERROR, message: `HTTP ${status}` });
+            else
+                storageSpan.setStatus({ code: SpanStatusCode.OK });
+            storageSpan.end();
+        }
+        if (parsed.service === "edge-function") {
+            const fnName = parsed.operation.replace("invoke:", "");
+            const fnSpan = tracer.startSpan("supabase.function." + fnName, {
+                attributes: { ...synth, "faas.name": fnName, "faas.trigger": "http", "peer.service": "supabase.edge-runtime" },
+            });
+            if (status >= 400)
+                fnSpan.setStatus({ code: SpanStatusCode.ERROR, message: `HTTP ${status}` });
+            else
+                fnSpan.setStatus({ code: SpanStatusCode.OK });
+            fnSpan.end();
+        }
+    });
+    if (status >= 400)
+        gatewaySpan.setStatus({ code: SpanStatusCode.ERROR, message: `HTTP ${status}` });
+    else
+        gatewaySpan.setStatus({ code: SpanStatusCode.OK });
+    gatewaySpan.end();
+}

package/dist/browser/supabase.js

@@ -0,0 +1,104 @@
+const SUPABASE_DOMAIN = ".supabase.co";
+export function isSupabaseURL(url) {
+    try {
+        const u = new URL(url);
+        return u.hostname.endsWith(SUPABASE_DOMAIN);
+    }
+    catch {
+        return false;
+    }
+}
+export function parseSupabaseURL(url, method) {
+    let u;
+    try {
+        u = new URL(url);
+    }
+    catch {
+        return null;
+    }
+    if (!u.hostname.endsWith(SUPABASE_DOMAIN))
+        return null;
+    const ref = u.hostname.replace(SUPABASE_DOMAIN, "");
+    const path = u.pathname;
+    const segments = path.split("/").filter(Boolean);
+    if (segments[0] === "rest" && segments[1] === "v1" && segments[2]) {
+        const table = segments[2];
+        const op = restMethodToOp(method);
+        const select = u.searchParams.get("select") || "*";
+        const filters = extractFilters(u.searchParams);
+        const detail = op === "SELECT" ? `${op} ${select} FROM ${table}` : `${op} ${table}`;
+        return { ref, service: "postgrest", operation: op, table, detail: filters ? `${detail} WHERE ${filters}` : detail };
+    }
+    if (segments[0] === "auth" && segments[1] === "v1") {
+        const action = segments[2] || "session";
+        const op = authActionToOp(action);
+        return { ref, service: "auth", operation: op, table: "", detail: `AUTH ${op}` };
+    }
+    if (segments[0] === "storage" && segments[1] === "v1") {
+        const subCmd = segments[2] || "object";
+        const bucket = segments[3] || "";
+        const filePath = segments.slice(4).join("/");
+        const op = `${method.toUpperCase()} ${subCmd}`;
+        return { ref, service: "storage", operation: op, table: "", detail: bucket ? `STORAGE ${op} ${bucket}/${filePath}` : `STORAGE ${op}` };
+    }
+    if (segments[0] === "realtime") {
+        return { ref, service: "realtime", operation: "subscribe", table: "", detail: "REALTIME subscribe" };
+    }
+    if (segments[0] === "functions" && segments[1] === "v1" && segments[2]) {
+        const fnName = segments[2];
+        return { ref, service: "edge-function", operation: `invoke:${fnName}`, table: "", detail: `EDGE FUNCTION ${fnName}` };
+    }
+    return { ref, service: "unknown", operation: method.toUpperCase(), table: "", detail: `${method.toUpperCase()} ${path}` };
+}
+function restMethodToOp(method) {
+    switch (method.toUpperCase()) {
+        case "GET": return "SELECT";
+        case "POST": return "INSERT";
+        case "PATCH": return "UPDATE";
+        case "PUT": return "UPSERT";
+        case "DELETE": return "DELETE";
+        default: return method.toUpperCase();
+    }
+}
+function authActionToOp(action) {
+    switch (action) {
+        case "token": return "login";
+        case "signup": return "signup";
+        case "logout": return "logout";
+        case "recover": return "recover";
+        case "magiclink": return "magic_link";
+        case "otp": return "otp";
+        case "user": return "get_user";
+        case "callback": return "oauth_callback";
+        default: return action;
+    }
+}
+function extractFilters(params) {
+    const filters = [];
+    for (const [key, value] of params.entries()) {
+        if (key === "select" || key === "apikey" || key === "order" || key === "limit" || key === "offset")
+            continue;
+        const match = value.match(/^(eq|neq|gt|gte|lt|lte|like|ilike|is|in|cs|cd|not)\.(.+)/);
+        if (match) {
+            filters.push(`${key} ${match[1]} ${match[2]}`);
+        }
+    }
+    return filters.join(" AND ");
+}
+export function enrichSupabaseSpan(span, url, method) {
+    const parsed = parseSupabaseURL(url, method);
+    if (!parsed)
+        return;
+    span.setAttribute("supabase.ref", parsed.ref);
+    span.setAttribute("supabase.service", parsed.service);
+    span.setAttribute("supabase.operation", parsed.operation);
+    span.setAttribute("supabase.detail", parsed.detail);
+    span.setAttribute("peer.service", `supabase.${parsed.service}`);
+    if (parsed.service === "postgrest") {
+        span.setAttribute("db.system", "postgresql");
+        span.setAttribute("db.operation", parsed.operation);
+        if (parsed.table)
+            span.setAttribute("db.sql.table", parsed.table);
+    }
+    span.updateName(`supabase.${parsed.service} ${parsed.detail}`);
+}