@obtrace/browser 2.2.0 → 2.3.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,16 @@ 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) {
+export function installConsoleCapture(tracer, logger, sessionId) {
     if (patched || typeof console === "undefined")
         return () => { };
     patched = true;
@@ -70,21 +78,30 @@ 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 { }
         };

package/dist/browser/errors.js

@@ -1,6 +1,7 @@
 import { SpanStatusCode } from "@opentelemetry/api";
+import { SeverityNumber } from "@opentelemetry/api-logs";
 import { addBreadcrumb, getBreadcrumbs } from "./breadcrumbs";
-export function installBrowserErrorHooks(tracer, sessionId) {
+export function installBrowserErrorHooks(tracer, logger, sessionId) {
     if (typeof window === "undefined") {
         return () => undefined;
     }
@@ -10,19 +11,28 @@ export function installBrowserErrorHooks(tracer, sessionId) {
         try {
             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);
@@ -34,9 +44,11 @@ export function installBrowserErrorHooks(tracer, sessionId) {
     const onRejection = (ev) => {
         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 ?? {});
@@ -44,16 +56,24 @@ export function installBrowserErrorHooks(tracer, sessionId) {
         addBreadcrumb({ timestamp: Date.now(), category: "error", message: reason, level: "error" });
         try {
             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);

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";
@@ -165,6 +166,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 client = new ObtraceClient({
         ...config,
         replay: {
@@ -207,14 +209,14 @@ 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));
     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 +265,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 +306,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)),