@obtrace/browser 2.3.0 → 2.4.1

package/dist/browser_entry.bundle.js

@@ -29548,6 +29548,121 @@ var Zone$1 = loadZone();
 patchCommon(Zone$1);
 patchBrowser(Zone$1);
 
+// src/browser/supabase.ts
+var SUPABASE_DOMAIN = ".supabase.co";
+function isSupabaseURL(url) {
+  try {
+    const u = new URL(url);
+    return u.hostname.endsWith(SUPABASE_DOMAIN);
+  } catch {
+    return false;
+  }
+}
+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 ");
+}
+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}`);
+}
+
 // src/core/otel-web-setup.ts
 function setupOtelWeb(config) {
   const baseUrl = (config.ingestBaseUrl || "https://ingest.obtrace.ai").replace(/\/$/, "");
@@ -29607,12 +29722,23 @@ function setupOtelWeb(config) {
   });
   const ingestPattern = new RegExp(`^${baseUrl.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}`);
   const instrumentations = [];
+  const applySupabaseAttrs = (span, req, _result) => {
+    try {
+      const url = typeof req === "string" ? req : req instanceof URL ? req.href : req?.url || "";
+      const method = req?.method || "GET";
+      if (url && isSupabaseURL(url)) {
+        enrichSupabaseSpan(span, url, method);
+      }
+    } catch {
+    }
+  };
   if (config.instrumentGlobalFetch !== false) {
     instrumentations.push(
       new FetchInstrumentation({
         propagateTraceHeaderCorsUrls: /.*/,
         ignoreUrls: [ingestPattern],
-        clearTimingResources: true
+        clearTimingResources: true,
+        applyCustomAttributesOnSpan: applySupabaseAttrs
       })
     );
   }
@@ -29631,8 +29757,8 @@ function setupOtelWeb(config) {
     tracerProvider,
     instrumentations
   });
-  const tracer = trace.getTracer("@obtrace/sdk-browser", "2.2.0");
-  const meter = metrics.getMeter("@obtrace/sdk-browser", "2.2.0");
+  const tracer = trace.getTracer("@obtrace/sdk-browser", "2.4.0");
+  const meter = metrics.getMeter("@obtrace/sdk-browser", "2.4.0");
   const forceFlush = async () => {
     try {
       await tracerProvider.forceFlush();
@@ -29695,14 +29821,17 @@ function installClickBreadcrumbs() {
 }
 
 // src/browser/errors.ts
+var processing = false;
 function installBrowserErrorHooks(tracer, logger, sessionId) {
   if (typeof window === "undefined") {
     return () => void 0;
   }
   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";
@@ -29733,9 +29862,12 @@ function installBrowserErrorHooks(tracer, logger, sessionId) {
       }
       span.end();
     } catch {
+    } finally {
+      processing = false;
     }
   };
   const onRejection = (ev) => {
+    if (processing) return;
     let reason;
     let stack = "";
     let errorType = "UnhandledRejection";
@@ -29748,6 +29880,7 @@ 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,
@@ -29773,6 +29906,8 @@ function installBrowserErrorHooks(tracer, logger, sessionId) {
       }
       span.end();
     } catch {
+    } finally {
+      processing = false;
     }
   };
   window.addEventListener("error", onError);
@@ -30058,6 +30193,7 @@ var SEVERITY_MAP = {
 };
 var patched = false;
 var originals = {};
+var emitting = false;
 function installConsoleCapture(tracer, logger, sessionId) {
   if (patched || typeof console === "undefined") return () => {
   };
@@ -30070,7 +30206,9 @@ 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) => {
@@ -30138,6 +30276,8 @@ function installConsoleCapture(tracer, logger, sessionId) {
           span.end();
         }
       } catch {
+      } finally {
+        emitting = false;
       }
     };
   }
@@ -30220,14 +30360,19 @@ function installResourceTiming(meter) {
   };
   const gauge = meter.createGauge("browser.resource.duration", { unit: "ms" });
   const observer = new PerformanceObserver((list2) => {
-    for (const entry of list2.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 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
+        });
+      }
+    } catch {
     }
   });
   try {
@@ -30284,6 +30429,127 @@ function installMemoryTracking(meter) {
   return () => clearInterval(timer);
 }
 
+// src/browser/supabase-intercept.ts
+function installSupabaseFetchInterceptor(tracer, sessionId) {
+  if (typeof window === "undefined" || typeof window.fetch === "undefined") return () => {
+  };
+  const originalFetch = window.fetch;
+  window.fetch = async function(input2, init) {
+    const url = typeof input2 === "string" ? input2 : input2 instanceof URL ? input2.href : input2 instanceof Request ? input2.url : "";
+    if (!url || !isSupabaseURL(url)) {
+      return originalFetch.call(this, input2, init);
+    }
+    const method = init?.method || (input2 instanceof Request ? input2.method : "GET") || "GET";
+    const parsed = parseSupabaseURL(url, method);
+    if (!parsed) {
+      return originalFetch.call(this, input2, 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, input2, 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} \u2192 ${response.status}`, level: "error" });
+      } else {
+        rootSpan.setStatus({ code: SpanStatusCode.OK });
+        addBreadcrumb({ timestamp: Date.now(), category: "supabase", message: `${parsed.detail} \u2192 ${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} \u2192 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();
+}
+
 // src/browser/index.ts
 var instances = /* @__PURE__ */ new Set();
 var replayBuffers = /* @__PURE__ */ new Set();
@@ -30414,7 +30680,7 @@ 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: {
@@ -30461,6 +30727,7 @@ 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));
   }
@@ -30481,7 +30748,7 @@ function initBrowserSDK(config) {
     }
   }, config.replay?.flushIntervalMs ?? 5e3);
   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" }));