@obtrace/browser 2.2.0 → 2.4.0

package/dist/browser/console.js

@@ -1,4 +1,5 @@
 import { SpanStatusCode } from "@opentelemetry/api";
+import { SeverityNumber } from "@opentelemetry/api-logs";
 import { addBreadcrumb } from "./breadcrumbs";
 const LEVEL_MAP = {
     debug: "debug",
@@ -7,9 +8,17 @@ const LEVEL_MAP = {
     warn: "warn",
     error: "error",
 };
+const SEVERITY_MAP = {
+    debug: SeverityNumber.DEBUG,
+    log: SeverityNumber.INFO,
+    info: SeverityNumber.INFO,
+    warn: SeverityNumber.WARN,
+    error: SeverityNumber.ERROR,
+};
 let patched = false;
 let originals = {};
-export function installConsoleCapture(tracer, sessionId) {
+let emitting = false;
+export function installConsoleCapture(tracer, logger, sessionId) {
     if (patched || typeof console === "undefined")
         return () => { };
     patched = true;
@@ -21,7 +30,10 @@ export function installConsoleCapture(tracer, sessionId) {
         const level = LEVEL_MAP[method];
         console[method] = (...args) => {
             original(...args);
+            if (emitting)
+                return;
             try {
+                emitting = true;
                 let message;
                 let attrs = {};
                 const safeStringify = (v) => {
@@ -70,23 +82,35 @@ export function installConsoleCapture(tracer, sessionId) {
                     }
                 }
                 addBreadcrumb({ timestamp: Date.now(), category: `console.${method}`, message, level, data: attrs });
-                const spanName = (method === "error" && (isErrorObj || attrs["error.stack"])) ? "browser.error" : "browser.console";
-                const span = tracer.startSpan(spanName, {
+                logger.emit({
+                    severityNumber: SEVERITY_MAP[method] ?? SeverityNumber.INFO,
+                    severityText: level.toUpperCase(),
+                    body: message.slice(0, 4096),
                     attributes: {
-                        "log.severity": level.toUpperCase(),
-                        "log.message": message.slice(0, 1024),
                         "session.id": sessionId,
+                        "log.source": "console",
                         ...attrs,
                     },
                 });
                 if (method === "error") {
+                    const spanName = (isErrorObj || attrs["error.stack"]) ? "browser.error" : "browser.console";
+                    const span = tracer.startSpan(spanName, {
+                        attributes: {
+                            "error.message": message.slice(0, 1024),
+                            "session.id": sessionId,
+                            ...attrs,
+                        },
+                    });
                     span.setStatus({ code: SpanStatusCode.ERROR, message: message.slice(0, 1024) });
                     if (isErrorObj)
                         span.recordException(firstArg);
+                    span.end();
                 }
-                span.end();
             }
             catch { }
+            finally {
+                emitting = false;
+            }
         };
     }
     return () => {

package/dist/browser/errors.js

@@ -1,28 +1,42 @@
 import { SpanStatusCode } from "@opentelemetry/api";
+import { SeverityNumber } from "@opentelemetry/api-logs";
 import { addBreadcrumb, getBreadcrumbs } from "./breadcrumbs";
-export function installBrowserErrorHooks(tracer, sessionId) {
+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 span = tracer.startSpan("browser.error", {
+            const errorType = ev.error?.constructor?.name || "Error";
+            const attrs = {
+                "error.message": message,
+                "error.file": ev.filename || "",
+                "error.line": ev.lineno || 0,
+                "error.column": ev.colno || 0,
+                "error.stack": stack.slice(0, 4096),
+                "error.type": errorType,
+                "breadcrumbs.count": breadcrumbs.length,
+                "breadcrumbs.json": JSON.stringify(breadcrumbs.slice(-20)),
+                ...(sessionId ? { "session.id": sessionId } : {}),
+            };
+            logger.emit({
+                severityNumber: SeverityNumber.ERROR,
+                severityText: "ERROR",
+                body: message,
                 attributes: {
-                    "error.message": message,
-                    "error.file": ev.filename || "",
-                    "error.line": ev.lineno || 0,
-                    "error.column": ev.colno || 0,
-                    "error.stack": stack.slice(0, 4096),
-                    "error.type": ev.error?.constructor?.name || "Error",
-                    "breadcrumbs.count": breadcrumbs.length,
-                    "breadcrumbs.json": JSON.stringify(breadcrumbs.slice(-20)),
-                    ...(sessionId ? { "session.id": sessionId } : {}),
+                    "log.source": "window.error",
+                    ...attrs,
                 },
             });
+            const span = tracer.startSpan("browser.error", { attributes: attrs });
             span.setStatus({ code: SpanStatusCode.ERROR, message });
             if (ev.error instanceof Error) {
                 span.recordException(ev.error);
@@ -30,30 +44,46 @@ export function installBrowserErrorHooks(tracer, sessionId) {
             span.end();
         }
         catch { }
+        finally {
+            processing = false;
+        }
     };
     const onRejection = (ev) => {
+        if (processing)
+            return;
         let reason;
         let stack = "";
+        let errorType = "UnhandledRejection";
         if (ev.reason instanceof Error) {
             reason = `${ev.reason.name}: ${ev.reason.message}`;
             stack = ev.reason.stack || "";
+            errorType = ev.reason.constructor?.name || "Error";
         }
         else {
             reason = typeof ev.reason === "string" ? ev.reason : JSON.stringify(ev.reason ?? {});
         }
         addBreadcrumb({ timestamp: Date.now(), category: "error", message: reason, level: "error" });
         try {
+            processing = true;
             const breadcrumbs = getBreadcrumbs();
-            const span = tracer.startSpan("browser.unhandledrejection", {
+            const attrs = {
+                "error.message": reason,
+                "error.stack": stack.slice(0, 4096),
+                "error.type": errorType,
+                "breadcrumbs.count": breadcrumbs.length,
+                "breadcrumbs.json": JSON.stringify(breadcrumbs.slice(-20)),
+                ...(sessionId ? { "session.id": sessionId } : {}),
+            };
+            logger.emit({
+                severityNumber: SeverityNumber.ERROR,
+                severityText: "ERROR",
+                body: reason,
                 attributes: {
-                    "error.message": reason,
-                    "error.stack": stack.slice(0, 4096),
-                    "error.type": ev.reason?.constructor?.name || "UnhandledRejection",
-                    "breadcrumbs.count": breadcrumbs.length,
-                    "breadcrumbs.json": JSON.stringify(breadcrumbs.slice(-20)),
-                    ...(sessionId ? { "session.id": sessionId } : {}),
+                    "log.source": "unhandledrejection",
+                    ...attrs,
                 },
             });
+            const span = tracer.startSpan("browser.unhandledrejection", { attributes: attrs });
             span.setStatus({ code: SpanStatusCode.ERROR, message: reason });
             if (ev.reason instanceof Error) {
                 span.recordException(ev.reason);
@@ -61,6 +91,9 @@ export function installBrowserErrorHooks(tracer, sessionId) {
             span.end();
         }
         catch { }
+        finally {
+            processing = false;
+        }
     };
     window.addEventListener("error", onError);
     window.addEventListener("unhandledrejection", onRejection);

package/dist/browser/index.js

@@ -1,5 +1,6 @@
 import { record } from "rrweb";
 import { SpanStatusCode } from "@opentelemetry/api";
+import { SeverityNumber } from "@opentelemetry/api-logs";
 import { ObtraceClient } from "../core/client";
 import { setupOtelWeb } from "../core/otel-web-setup";
 import { installBrowserErrorHooks } from "./errors";
@@ -12,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;
@@ -165,6 +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.4.0");
     const client = new ObtraceClient({
         ...config,
         replay: {
@@ -207,14 +210,15 @@ export function initBrowserSDK(config) {
     }).catch(() => { });
     if (config.vitals?.enabled !== false)
         cleanups.push(installWebVitals(meter, !!config.vitals?.reportAllChanges));
-    cleanups.push(installBrowserErrorHooks(tracer, replay.sessionId));
+    cleanups.push(installBrowserErrorHooks(tracer, logger, replay.sessionId));
     cleanups.push(installClickBreadcrumbs());
     cleanups.push(installClickTracking(tracer, replay.sessionId));
     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, replay.sessionId));
+        cleanups.push(installConsoleCapture(tracer, logger, replay.sessionId));
     }
     cleanups.push(installOfflineSupport());
     if (shouldReplay && config.replay?.enabled !== false && typeof window !== "undefined") {
@@ -263,22 +267,40 @@ export function initBrowserSDK(config) {
         window.addEventListener("beforeunload", onBeforeUnload);
         cleanups.push(() => window.removeEventListener("beforeunload", onBeforeUnload));
     }
+    const sevToOtel = {
+        debug: SeverityNumber.DEBUG,
+        info: SeverityNumber.INFO,
+        warn: SeverityNumber.WARN,
+        error: SeverityNumber.ERROR,
+        fatal: SeverityNumber.FATAL,
+    };
     const log = (level, message, context) => {
         addCrumb({ timestamp: Date.now(), category: "log", message, level: level === "fatal" ? "error" : level });
-        const span = tracer.startSpan("browser.log", {
+        logger.emit({
+            severityNumber: sevToOtel[level] ?? SeverityNumber.INFO,
+            severityText: level.toUpperCase(),
+            body: message.slice(0, 4096),
             attributes: {
-                "log.severity": level.toUpperCase(),
-                "log.severity_number": severityToNumber(level),
-                "log.message": message,
                 "session.id": replay.sessionId,
+                "log.source": "sdk",
                 ...userAttrs(),
                 ...(context?.traceId ? { "obtrace.trace_id": context.traceId } : {}),
                 ...context?.attrs,
             },
         });
-        if (level === "error" || level === "fatal")
+        if (level === "error" || level === "fatal") {
+            const span = tracer.startSpan("browser.error", {
+                attributes: {
+                    "error.message": message,
+                    "session.id": replay.sessionId,
+                    ...userAttrs(),
+                    ...(context?.traceId ? { "obtrace.trace_id": context.traceId } : {}),
+                    ...context?.attrs,
+                },
+            });
             span.setStatus({ code: SpanStatusCode.ERROR, message });
-        span.end();
+            span.end();
+        }
     };
     const metricFn = (name, value, unit, context) => {
         const gauge = meter.createGauge(name, { unit: unit ?? "1" });
@@ -286,11 +308,26 @@ export function initBrowserSDK(config) {
     };
     const captureException = (error, context) => {
         const msg = error instanceof Error ? `${error.name}: ${error.message}` : String(error);
+        const stack = error instanceof Error ? (error.stack || "").slice(0, 4096) : "";
         const breadcrumbs = getBreadcrumbs();
         addCrumb({ timestamp: Date.now(), category: "error", message: msg, level: "error" });
+        logger.emit({
+            severityNumber: SeverityNumber.ERROR,
+            severityText: "ERROR",
+            body: msg,
+            attributes: {
+                "session.id": replay.sessionId,
+                "log.source": "exception",
+                "error.stack": stack,
+                "error.type": error instanceof Error ? error.name : "Error",
+                ...userAttrs(),
+                ...context?.attrs,
+            },
+        });
         const span = tracer.startSpan("browser.exception", {
             attributes: {
                 "error.message": msg,
+                "error.stack": stack,
                 "session.id": replay.sessionId,
                 "breadcrumbs.count": breadcrumbs.length,
                 "breadcrumbs.json": JSON.stringify(breadcrumbs.slice(-20)),

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}`);
+}