@obtrace/browser 2.0.0 → 2.1.0

package/README.md

@@ -14,17 +14,19 @@ bun add @obtrace/sdk-browser
 
 ### Simplified setup
 
-The API key resolves `tenant_id`, `project_id`, `app_id`, and `env` automatically on the server side, so only three fields are needed:
+The API key resolves `tenant_id`, `project_id`, `app_id`, and `env` automatically on the server side. `serviceName` must match the connected app name in the project, or an explicit alias configured for that app.
 
 ```ts
 import { initBrowserSDK } from "@obtrace/sdk-browser/browser";
 
 const sdk = initBrowserSDK({
   apiKey: "obt_live_...",
-  serviceName: "web-app",
+  serviceName: "core",
 });
 ```
 
+If the project app is `core` and the dashboard defines `web` as an alias, `serviceName: "web"` is accepted and normalized to `core` on ingest. Arbitrary names are rejected.
+
 ### Full configuration
 
 For advanced use cases you can override the resolved values explicitly:
@@ -34,10 +36,10 @@ import { initBrowserSDK, SemanticMetrics } from "@obtrace/sdk-browser/browser";
 
 const sdk = initBrowserSDK({
   apiKey: "<API_KEY>",
-  serviceName: "web-app",
+  serviceName: "core",
   tenantId: "tenant-prod",
   projectId: "project-prod",
-  appId: "web",
+  appId: "core",
   env: "prod"
 });
 

package/dist/auto.js

@@ -45,14 +45,10 @@ function readEnvConfig() {
     let appId;
     let env;
     for (const p of prefixes) {
-        apiKey = apiKey || resolveEnvVar(`${p}OBTRACE_API_KEY`);
-        ingestBaseUrl = ingestBaseUrl || resolveEnvVar(`${p}OBTRACE_INGEST_BASE_URL`);
+        apiKey = apiKey || resolveEnvVar(`${p}OBTRACE_PUBLIC_KEY`) || resolveEnvVar(`${p}OBTRACE_API_KEY`);
         serviceName = serviceName || resolveEnvVar(`${p}OBTRACE_SERVICE_NAME`);
-        appId = appId || resolveEnvVar(`${p}OBTRACE_APP_ID`);
-        env = env || resolveEnvVar(`${p}OBTRACE_ENV`);
     }
-    env = env || resolveEnvVar("NODE_ENV");
-    return { apiKey, ingestBaseUrl, serviceName, appId, env };
+    return { apiKey, serviceName };
 }
 function merge(...sources) {
     const merged = {};
@@ -116,7 +112,7 @@ function autoInit() {
         return;
     }
     console.warn("[obtrace] No configuration found. Provide config via window.__OBTRACE_CONFIG__, " +
-        '<meta name="obtrace-api-key">, or build-time env vars (VITE_OBTRACE_API_KEY, etc). ' +
+        '<meta name="obtrace-api-key">, or VITE_OBTRACE_PUBLIC_KEY env var. ' +
         "Deferring initialization until config appears.");
     setupDeferredInit();
 }

package/dist/browser/console.js

@@ -20,32 +20,43 @@ export function installConsoleCapture(tracer, sessionId) {
         const level = LEVEL_MAP[method];
         console[method] = (...args) => {
             original(...args);
-            let message;
-            let attrs = {};
-            if (args.length === 1 && typeof args[0] === "object" && args[0] !== null && !Array.isArray(args[0])) {
-                const obj = args[0];
-                message = String(obj.msg || obj.message || JSON.stringify(obj));
-                for (const [k, v] of Object.entries(obj)) {
-                    if (k === "msg" || k === "message")
-                        continue;
-                    if (typeof v === "string" || typeof v === "number" || typeof v === "boolean") {
-                        attrs[k] = v;
+            try {
+                let message;
+                let attrs = {};
+                const safeStringify = (v) => {
+                    try {
+                        return JSON.stringify(v);
+                    }
+                    catch {
+                        return String(v);
+                    }
+                };
+                if (args.length === 1 && typeof args[0] === "object" && args[0] !== null && !Array.isArray(args[0])) {
+                    const obj = args[0];
+                    message = String(obj.msg || obj.message || safeStringify(obj));
+                    for (const [k, v] of Object.entries(obj)) {
+                        if (k === "msg" || k === "message")
+                            continue;
+                        if (typeof v === "string" || typeof v === "number" || typeof v === "boolean") {
+                            attrs[k] = v;
+                        }
                     }
                 }
+                else {
+                    message = args.map(a => typeof a === "string" ? a : safeStringify(a)).join(" ");
+                }
+                addBreadcrumb({ timestamp: Date.now(), category: `console.${method}`, message, level, data: attrs });
+                const span = tracer.startSpan("browser.console", {
+                    attributes: {
+                        "log.severity": level.toUpperCase(),
+                        "log.message": message.slice(0, 1024),
+                        "session.id": sessionId,
+                        ...attrs,
+                    },
+                });
+                span.end();
             }
-            else {
-                message = args.map(a => typeof a === "string" ? a : JSON.stringify(a)).join(" ");
-            }
-            addBreadcrumb({ timestamp: Date.now(), category: `console.${method}`, message, level, data: attrs });
-            const span = tracer.startSpan("browser.console", {
-                attributes: {
-                    "log.severity": level.toUpperCase(),
-                    "log.message": message.slice(0, 1024),
-                    "session.id": sessionId,
-                    ...attrs,
-                },
-            });
-            span.end();
+            catch { }
         };
     }
     return () => {

package/dist/browser/errors.js

@@ -6,41 +6,47 @@ export function installBrowserErrorHooks(tracer, sessionId) {
     }
     const onError = (ev) => {
         addBreadcrumb({ timestamp: Date.now(), category: "error", message: ev.message || "window.error", level: "error" });
-        const breadcrumbs = getBreadcrumbs();
-        const span = tracer.startSpan("browser.error", {
-            attributes: {
-                "error.message": ev.message || "window.error",
-                "error.file": ev.filename || "",
-                "error.line": ev.lineno || 0,
-                "error.column": ev.colno || 0,
-                "breadcrumbs.count": breadcrumbs.length,
-                "breadcrumbs.json": JSON.stringify(breadcrumbs.slice(-20)),
-                ...(sessionId ? { "session.id": sessionId } : {}),
-            },
-        });
-        span.setStatus({ code: SpanStatusCode.ERROR, message: ev.message });
-        if (ev.error instanceof Error) {
-            span.recordException(ev.error);
+        try {
+            const breadcrumbs = getBreadcrumbs();
+            const span = tracer.startSpan("browser.error", {
+                attributes: {
+                    "error.message": ev.message || "window.error",
+                    "error.file": ev.filename || "",
+                    "error.line": ev.lineno || 0,
+                    "error.column": ev.colno || 0,
+                    "breadcrumbs.count": breadcrumbs.length,
+                    "breadcrumbs.json": JSON.stringify(breadcrumbs.slice(-20)),
+                    ...(sessionId ? { "session.id": sessionId } : {}),
+                },
+            });
+            span.setStatus({ code: SpanStatusCode.ERROR, message: ev.message });
+            if (ev.error instanceof Error) {
+                span.recordException(ev.error);
+            }
+            span.end();
         }
-        span.end();
+        catch { }
     };
     const onRejection = (ev) => {
         const reason = typeof ev.reason === "string" ? ev.reason : JSON.stringify(ev.reason ?? {});
         addBreadcrumb({ timestamp: Date.now(), category: "error", message: reason, level: "error" });
-        const breadcrumbs = getBreadcrumbs();
-        const span = tracer.startSpan("browser.unhandledrejection", {
-            attributes: {
-                "error.message": reason,
-                "breadcrumbs.count": breadcrumbs.length,
-                "breadcrumbs.json": JSON.stringify(breadcrumbs.slice(-20)),
-                ...(sessionId ? { "session.id": sessionId } : {}),
-            },
-        });
-        span.setStatus({ code: SpanStatusCode.ERROR, message: reason });
-        if (ev.reason instanceof Error) {
-            span.recordException(ev.reason);
+        try {
+            const breadcrumbs = getBreadcrumbs();
+            const span = tracer.startSpan("browser.unhandledrejection", {
+                attributes: {
+                    "error.message": reason,
+                    "breadcrumbs.count": breadcrumbs.length,
+                    "breadcrumbs.json": JSON.stringify(breadcrumbs.slice(-20)),
+                    ...(sessionId ? { "session.id": sessionId } : {}),
+                },
+            });
+            span.setStatus({ code: SpanStatusCode.ERROR, message: reason });
+            if (ev.reason instanceof Error) {
+                span.recordException(ev.reason);
+            }
+            span.end();
         }
-        span.end();
+        catch { }
     };
     window.addEventListener("error", onError);
     window.addEventListener("unhandledrejection", onRejection);

package/dist/browser/index.js

@@ -245,9 +245,16 @@ export function initBrowserSDK(config) {
             pendingBeaconBlob = null;
         }
     };
-    const onVisibility = () => { if (document.visibilityState === "hidden")
-        flushReplay(); };
-    const onBeforeUnload = () => sendViaBeacon();
+    const onVisibility = () => {
+        if (document.visibilityState === "hidden") {
+            otel.forceFlush();
+            flushReplay();
+        }
+    };
+    const onBeforeUnload = () => {
+        otel.forceFlush();
+        sendViaBeacon();
+    };
     if (typeof document !== "undefined") {
         document.addEventListener("visibilitychange", onVisibility);
         cleanups.push(() => document.removeEventListener("visibilitychange", onVisibility));

package/dist/browser_entry.bundle.js

@@ -27840,13 +27840,24 @@ function setupOtelWeb(config) {
     tracerProvider,
     instrumentations
   });
-  const tracer = trace.getTracer("@obtrace/sdk-browser", "1.1.0");
-  const meter = metrics.getMeter("@obtrace/sdk-browser", "1.1.0");
+  const tracer = trace.getTracer("@obtrace/sdk-browser", "2.1.0");
+  const meter = metrics.getMeter("@obtrace/sdk-browser", "2.1.0");
+  const forceFlush = async () => {
+    try {
+      await tracerProvider.forceFlush();
+    } catch {
+    }
+    try {
+      await meterProvider.forceFlush();
+    } catch {
+    }
+  };
   const shutdown = async () => {
+    await forceFlush();
     await tracerProvider.shutdown();
     await meterProvider.shutdown();
   };
-  return { tracer, meter, shutdown };
+  return { tracer, meter, shutdown, forceFlush };
 }
 
 // src/browser/breadcrumbs.ts
@@ -27894,41 +27905,47 @@ function installBrowserErrorHooks(tracer, sessionId) {
   }
   const onError = (ev) => {
     addBreadcrumb({ timestamp: Date.now(), category: "error", message: ev.message || "window.error", level: "error" });
-    const breadcrumbs = getBreadcrumbs();
-    const span = tracer.startSpan("browser.error", {
-      attributes: {
-        "error.message": ev.message || "window.error",
-        "error.file": ev.filename || "",
-        "error.line": ev.lineno || 0,
-        "error.column": ev.colno || 0,
-        "breadcrumbs.count": breadcrumbs.length,
-        "breadcrumbs.json": JSON.stringify(breadcrumbs.slice(-20)),
-        ...sessionId ? { "session.id": sessionId } : {}
+    try {
+      const breadcrumbs = getBreadcrumbs();
+      const span = tracer.startSpan("browser.error", {
+        attributes: {
+          "error.message": ev.message || "window.error",
+          "error.file": ev.filename || "",
+          "error.line": ev.lineno || 0,
+          "error.column": ev.colno || 0,
+          "breadcrumbs.count": breadcrumbs.length,
+          "breadcrumbs.json": JSON.stringify(breadcrumbs.slice(-20)),
+          ...sessionId ? { "session.id": sessionId } : {}
+        }
+      });
+      span.setStatus({ code: SpanStatusCode.ERROR, message: ev.message });
+      if (ev.error instanceof Error) {
+        span.recordException(ev.error);
       }
-    });
-    span.setStatus({ code: SpanStatusCode.ERROR, message: ev.message });
-    if (ev.error instanceof Error) {
-      span.recordException(ev.error);
+      span.end();
+    } catch {
     }
-    span.end();
   };
   const onRejection = (ev) => {
     const reason = typeof ev.reason === "string" ? ev.reason : JSON.stringify(ev.reason ?? {});
     addBreadcrumb({ timestamp: Date.now(), category: "error", message: reason, level: "error" });
-    const breadcrumbs = getBreadcrumbs();
-    const span = tracer.startSpan("browser.unhandledrejection", {
-      attributes: {
-        "error.message": reason,
-        "breadcrumbs.count": breadcrumbs.length,
-        "breadcrumbs.json": JSON.stringify(breadcrumbs.slice(-20)),
-        ...sessionId ? { "session.id": sessionId } : {}
+    try {
+      const breadcrumbs = getBreadcrumbs();
+      const span = tracer.startSpan("browser.unhandledrejection", {
+        attributes: {
+          "error.message": reason,
+          "breadcrumbs.count": breadcrumbs.length,
+          "breadcrumbs.json": JSON.stringify(breadcrumbs.slice(-20)),
+          ...sessionId ? { "session.id": sessionId } : {}
+        }
+      });
+      span.setStatus({ code: SpanStatusCode.ERROR, message: reason });
+      if (ev.reason instanceof Error) {
+        span.recordException(ev.reason);
       }
-    });
-    span.setStatus({ code: SpanStatusCode.ERROR, message: reason });
-    if (ev.reason instanceof Error) {
-      span.recordException(ev.reason);
+      span.end();
+    } catch {
     }
-    span.end();
   };
   window.addEventListener("error", onError);
   window.addEventListener("unhandledrejection", onRejection);
@@ -28218,30 +28235,40 @@ function installConsoleCapture(tracer, sessionId) {
     const level = LEVEL_MAP[method];
     console[method] = (...args) => {
       original(...args);
-      let message;
-      let attrs = {};
-      if (args.length === 1 && typeof args[0] === "object" && args[0] !== null && !Array.isArray(args[0])) {
-        const obj = args[0];
-        message = String(obj.msg || obj.message || JSON.stringify(obj));
-        for (const [k, v] of Object.entries(obj)) {
-          if (k === "msg" || k === "message") continue;
-          if (typeof v === "string" || typeof v === "number" || typeof v === "boolean") {
-            attrs[k] = v;
+      try {
+        let message;
+        let attrs = {};
+        const safeStringify = (v) => {
+          try {
+            return JSON.stringify(v);
+          } catch {
+            return String(v);
+          }
+        };
+        if (args.length === 1 && typeof args[0] === "object" && args[0] !== null && !Array.isArray(args[0])) {
+          const obj = args[0];
+          message = String(obj.msg || obj.message || safeStringify(obj));
+          for (const [k, v] of Object.entries(obj)) {
+            if (k === "msg" || k === "message") continue;
+            if (typeof v === "string" || typeof v === "number" || typeof v === "boolean") {
+              attrs[k] = v;
+            }
           }
+        } else {
+          message = args.map((a) => typeof a === "string" ? a : safeStringify(a)).join(" ");
         }
-      } else {
-        message = args.map((a) => typeof a === "string" ? a : JSON.stringify(a)).join(" ");
+        addBreadcrumb({ timestamp: Date.now(), category: `console.${method}`, message, level, data: attrs });
+        const span = tracer.startSpan("browser.console", {
+          attributes: {
+            "log.severity": level.toUpperCase(),
+            "log.message": message.slice(0, 1024),
+            "session.id": sessionId,
+            ...attrs
+          }
+        });
+        span.end();
+      } catch {
       }
-      addBreadcrumb({ timestamp: Date.now(), category: `console.${method}`, message, level, data: attrs });
-      const span = tracer.startSpan("browser.console", {
-        attributes: {
-          "log.severity": level.toUpperCase(),
-          "log.message": message.slice(0, 1024),
-          "session.id": sessionId,
-          ...attrs
-        }
-      });
-      span.end();
     };
   }
   return () => {
@@ -28610,9 +28637,15 @@ function initBrowserSDK(config) {
     }
   };
   const onVisibility = () => {
-    if (document.visibilityState === "hidden") flushReplay();
+    if (document.visibilityState === "hidden") {
+      otel.forceFlush();
+      flushReplay();
+    }
+  };
+  const onBeforeUnload = () => {
+    otel.forceFlush();
+    sendViaBeacon();
   };
-  const onBeforeUnload = () => sendViaBeacon();
   if (typeof document !== "undefined") {
     document.addEventListener("visibilitychange", onVisibility);
     cleanups.push(() => document.removeEventListener("visibilitychange", onVisibility));