@obtrace/browser 1.0.0

package/dist/browser/index.js

@@ -0,0 +1,352 @@
+import { record } from "rrweb";
+import { SpanStatusCode } from "@opentelemetry/api";
+import { ObtraceClient } from "../core/client";
+import { setupOtelWeb } from "../core/otel-web-setup";
+import { installBrowserErrorHooks } from "./errors";
+import { BrowserReplayBuffer } from "./replay";
+import { installWebVitals } from "./vitals";
+import { addBreadcrumb as addCrumb, getBreadcrumbs, installClickBreadcrumbs } from "./breadcrumbs";
+import { installConsoleCapture } from "./console";
+import { installClickTracking } from "./clicks";
+import { installResourceTiming } from "./resources";
+import { installLongTaskDetection } from "./longtasks";
+import { installMemoryTracking } from "./memory";
+import { installOfflineSupport } from "./offline";
+const instances = new Set();
+const replayBuffers = new Set();
+let currentUser = null;
+let navigationPatched = false;
+let originalPushState = null;
+let originalReplaceState = null;
+let navigationPopstateHandler = null;
+let navigationHashchangeHandler = null;
+let rrwebRecording = false;
+let stopRrwebRecording = null;
+function fanOutNavigation() {
+    addCrumb({ timestamp: Date.now(), category: "navigation", message: window.location.href, level: "info" });
+    for (const entry of instances) {
+        const chunk = entry.replay.pushCustomEvent("navigation", {
+            href: window.location.href,
+            title: document.title,
+        });
+        if (chunk) {
+            entry.client.replayChunk(chunk);
+        }
+    }
+}
+function installSharedNavigationTracker() {
+    if (navigationPatched || typeof window === "undefined")
+        return;
+    navigationPatched = true;
+    const historyRef = window.history;
+    originalPushState = historyRef.pushState.bind(historyRef);
+    originalReplaceState = historyRef.replaceState.bind(historyRef);
+    const rawPush = originalPushState;
+    const rawReplace = originalReplaceState;
+    historyRef.pushState = ((...args) => {
+        rawPush(...args);
+        fanOutNavigation();
+    });
+    historyRef.replaceState = ((...args) => {
+        rawReplace(...args);
+        fanOutNavigation();
+    });
+    navigationPopstateHandler = fanOutNavigation;
+    navigationHashchangeHandler = fanOutNavigation;
+    window.addEventListener("popstate", navigationPopstateHandler);
+    window.addEventListener("hashchange", navigationHashchangeHandler);
+}
+function teardownSharedNavigationTracker() {
+    if (!navigationPatched || typeof window === "undefined")
+        return;
+    if (originalPushState)
+        window.history.pushState = originalPushState;
+    if (originalReplaceState)
+        window.history.replaceState = originalReplaceState;
+    if (navigationPopstateHandler)
+        window.removeEventListener("popstate", navigationPopstateHandler);
+    if (navigationHashchangeHandler)
+        window.removeEventListener("hashchange", navigationHashchangeHandler);
+    originalPushState = null;
+    originalReplaceState = null;
+    navigationPopstateHandler = null;
+    navigationHashchangeHandler = null;
+    navigationPatched = false;
+}
+function installSharedRrwebRecording(config) {
+    if (rrwebRecording || typeof window === "undefined")
+        return;
+    rrwebRecording = true;
+    const replayCfg = config.replay ?? { enabled: true };
+    const stop = record({
+        emit(event) {
+            for (const buf of replayBuffers) {
+                const chunk = buf.pushRrwebEvent(event);
+                if (chunk) {
+                    for (const entry of instances) {
+                        if (entry.replay === buf) {
+                            entry.client.replayChunk(chunk);
+                            break;
+                        }
+                    }
+                }
+            }
+        },
+        maskAllInputs: replayCfg.maskAllInputs ?? true,
+        maskInputOptions: { password: true, email: true, tel: true },
+        maskInputFn: (text, element) => {
+            const el = element;
+            const n = (el?.name || "").toLowerCase();
+            const id = (el?.id || "").toLowerCase();
+            if (/(pass|token|secret|key|email|cpf|ssn|credit|card)/.test(`${n} ${id}`))
+                return "[redacted]";
+            return text;
+        },
+        blockClass: replayCfg.blockClass ?? "ob-block",
+        maskTextClass: replayCfg.maskTextClass ?? "ob-mask",
+        inlineStylesheet: true,
+        collectFonts: false,
+        sampling: {
+            mousemove: replayCfg.sampling?.mousemove ?? false,
+            mouseInteraction: true,
+            scroll: replayCfg.sampling?.scroll ?? 150,
+            input: replayCfg.sampling?.input ?? "last",
+        },
+    });
+    if (stop)
+        stopRrwebRecording = stop;
+}
+function teardownSharedRrwebRecording() {
+    if (!rrwebRecording)
+        return;
+    if (stopRrwebRecording) {
+        stopRrwebRecording();
+        stopRrwebRecording = null;
+    }
+    rrwebRecording = false;
+}
+function severityToNumber(level) {
+    switch (level) {
+        case "debug": return 5;
+        case "info": return 9;
+        case "warn": return 13;
+        case "error": return 17;
+        case "fatal": return 21;
+        default: return 9;
+    }
+}
+function userAttrs() {
+    if (!currentUser)
+        return {};
+    const attrs = {};
+    if (currentUser.id)
+        attrs["user.id"] = String(currentUser.id);
+    if (currentUser.email)
+        attrs["user.email"] = String(currentUser.email);
+    if (currentUser.name)
+        attrs["user.name"] = String(currentUser.name);
+    return attrs;
+}
+export function initBrowserSDK(config) {
+    for (const entry of instances) {
+        if (entry.config.apiKey === config.apiKey && entry.config.ingestBaseUrl === config.ingestBaseUrl && entry.config.serviceName === config.serviceName) {
+            return entry.sdk;
+        }
+    }
+    const sampleRate = config.tracesSampleRate ?? 1;
+    const replaySampleRate = config.replaySampleRate ?? 1;
+    const shouldReplay = Math.random() < replaySampleRate;
+    const otel = setupOtelWeb({ ...config, tracesSampleRate: sampleRate });
+    const tracer = otel.tracer;
+    const meter = otel.meter;
+    const client = new ObtraceClient({
+        ...config,
+        replay: {
+            enabled: shouldReplay,
+            flushIntervalMs: 5000,
+            maxChunkBytes: 480_000,
+            captureNetworkRecipes: true,
+            sessionStorageKey: "obtrace_session_id",
+            ...config.replay,
+        },
+        vitals: { enabled: true, reportAllChanges: false, ...config.vitals },
+        propagation: { enabled: true, ...config.propagation },
+    });
+    const replay = new BrowserReplayBuffer({
+        maxChunkBytes: config.replay?.maxChunkBytes ?? 480_000,
+        flushIntervalMs: config.replay?.flushIntervalMs ?? 5000,
+        sessionStorageKey: config.replay?.sessionStorageKey ?? "obtrace_session_id",
+    });
+    const recipeSteps = [];
+    const cleanups = [];
+    const entry = { client, sessionId: replay.sessionId, replay, config, recipeSteps, otel };
+    instances.add(entry);
+    replayBuffers.add(replay);
+    const base = config.ingestBaseUrl?.replace(/\/$/, "") ?? "";
+    fetch(`${base}/v1/init`, {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json",
+            Authorization: `Bearer ${config.apiKey}`,
+        },
+        body: JSON.stringify({
+            sdk: "@obtrace/browser",
+            sdk_version: "1.0.0",
+            service_name: config.serviceName,
+            service_version: config.serviceVersion ?? "",
+            runtime: "browser",
+            runtime_version: typeof navigator !== "undefined" ? navigator.userAgent : "",
+        }),
+        signal: AbortSignal.timeout(5000),
+    }).then((res) => {
+        if (res.ok && config.debug)
+            console.log("[obtrace-sdk-browser] init handshake OK");
+        if (!res.ok)
+            console.error(`[obtrace-sdk-browser] init handshake failed: ${res.status}`);
+    }).catch(() => { });
+    if (config.vitals?.enabled !== false)
+        cleanups.push(installWebVitals(meter, !!config.vitals?.reportAllChanges));
+    cleanups.push(installBrowserErrorHooks(tracer, 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(installOfflineSupport());
+    if (shouldReplay && config.replay?.enabled !== false && typeof window !== "undefined") {
+        installSharedRrwebRecording(config);
+        installSharedNavigationTracker();
+    }
+    let pendingBeaconBlob = null;
+    client.replayTimer = setInterval(() => {
+        const chunk = replay.flush();
+        if (chunk) {
+            const json = JSON.stringify(chunk);
+            pendingBeaconBlob = new Blob([json], { type: "application/json" });
+            client.replayChunk(chunk);
+        }
+        else {
+            pendingBeaconBlob = null;
+        }
+    }, config.replay?.flushIntervalMs ?? 5000);
+    const sendViaBeacon = () => {
+        const url = `${config.ingestBaseUrl?.replace(/\/$/, "")}/ingest/replay/chunk`;
+        const freshChunk = replay.flush();
+        if (freshChunk) {
+            navigator.sendBeacon(url, new Blob([JSON.stringify(freshChunk)], { type: "application/json" }));
+            pendingBeaconBlob = null;
+        }
+        else if (pendingBeaconBlob) {
+            navigator.sendBeacon(url, pendingBeaconBlob);
+            pendingBeaconBlob = null;
+        }
+    };
+    const onVisibility = () => { if (document.visibilityState === "hidden")
+        flushReplay(); };
+    const onBeforeUnload = () => sendViaBeacon();
+    if (typeof document !== "undefined") {
+        document.addEventListener("visibilitychange", onVisibility);
+        cleanups.push(() => document.removeEventListener("visibilitychange", onVisibility));
+    }
+    if (typeof window !== "undefined") {
+        window.addEventListener("beforeunload", onBeforeUnload);
+        cleanups.push(() => window.removeEventListener("beforeunload", onBeforeUnload));
+    }
+    const log = (level, message, context) => {
+        addCrumb({ timestamp: Date.now(), category: "log", message, level: level === "fatal" ? "error" : level });
+        const span = tracer.startSpan("browser.log", {
+            attributes: {
+                "log.severity": level.toUpperCase(),
+                "log.severity_number": severityToNumber(level),
+                "log.message": message,
+                "session.id": replay.sessionId,
+                ...userAttrs(),
+                ...(context?.traceId ? { "obtrace.trace_id": context.traceId } : {}),
+                ...context?.attrs,
+            },
+        });
+        if (level === "error" || level === "fatal")
+            span.setStatus({ code: SpanStatusCode.ERROR, message });
+        span.end();
+    };
+    const metricFn = (name, value, unit, context) => {
+        const gauge = meter.createGauge(name, { unit: unit ?? "1" });
+        gauge.record(value, { ...userAttrs(), ...context?.attrs });
+    };
+    const captureException = (error, context) => {
+        const msg = error instanceof Error ? `${error.name}: ${error.message}` : String(error);
+        const breadcrumbs = getBreadcrumbs();
+        addCrumb({ timestamp: Date.now(), category: "error", message: msg, level: "error" });
+        const span = tracer.startSpan("browser.exception", {
+            attributes: {
+                "error.message": msg,
+                "session.id": replay.sessionId,
+                "breadcrumbs.count": breadcrumbs.length,
+                "breadcrumbs.json": JSON.stringify(breadcrumbs.slice(-20)),
+                ...userAttrs(),
+                ...context?.attrs,
+            },
+        });
+        span.setStatus({ code: SpanStatusCode.ERROR, message: msg });
+        if (error instanceof Error)
+            span.recordException(error);
+        span.end();
+    };
+    const captureReplayEvent = (type, payload) => {
+        const chunk = replay.pushCustomEvent(type, payload);
+        if (chunk)
+            client.replayChunk(chunk);
+    };
+    const flushReplay = () => {
+        const chunk = replay.flush();
+        if (chunk)
+            client.replayChunk(chunk);
+        if (recipeSteps.length)
+            client.replayRecipes(recipeSteps.splice(0, recipeSteps.length));
+    };
+    const captureRecipe = (step) => {
+        recipeSteps.push(step);
+        if (recipeSteps.length >= 50)
+            client.replayRecipes(recipeSteps.splice(0, recipeSteps.length));
+    };
+    const instrumentFetch = () => (input, init) => fetch(input, init);
+    const setUser = (user) => {
+        currentUser = user;
+        addCrumb({ timestamp: Date.now(), category: "auth", message: `setUser: ${user.id || user.email || "anonymous"}`, level: "info" });
+    };
+    const shutdown = async () => {
+        if (client.replayTimer) {
+            clearInterval(client.replayTimer);
+            client.replayTimer = null;
+        }
+        await otel.shutdown();
+        try {
+            flushReplay();
+        }
+        catch { }
+        for (const c of cleanups) {
+            try {
+                c();
+            }
+            catch { }
+        }
+        instances.delete(entry);
+        replayBuffers.delete(replay);
+        if (instances.size === 0) {
+            teardownSharedNavigationTracker();
+            teardownSharedRrwebRecording();
+        }
+        await client.shutdown();
+    };
+    const sdk = {
+        client, sessionId: replay.sessionId, log, metric: metricFn,
+        captureException, captureError: captureException,
+        captureReplayEvent, flushReplay, captureRecipe, instrumentFetch,
+        shutdown, setUser, addBreadcrumb: addCrumb,
+    };
+    entry.sdk = sdk;
+    return sdk;
+}

package/dist/browser/longtasks.js

@@ -0,0 +1,24 @@
+export function installLongTaskDetection(tracer) {
+    if (typeof window === "undefined" || typeof PerformanceObserver === "undefined")
+        return () => { };
+    const observer = new PerformanceObserver((list) => {
+        for (const entry of list.getEntries()) {
+            if (entry.duration < 50)
+                continue;
+            const span = tracer.startSpan("browser.longtask", {
+                attributes: {
+                    "longtask.duration_ms": entry.duration,
+                    "longtask.name": entry.name,
+                },
+            });
+            span.end();
+        }
+    });
+    try {
+        observer.observe({ type: "longtask", buffered: true });
+    }
+    catch {
+        return () => { };
+    }
+    return () => observer.disconnect();
+}

package/dist/browser/memory.js

@@ -0,0 +1,19 @@
+export function installMemoryTracking(meter) {
+    if (typeof window === "undefined")
+        return () => { };
+    const perf = performance;
+    if (!perf.memory)
+        return () => { };
+    const usedGauge = meter.createGauge("browser.memory.used_js_heap", { unit: "By" });
+    const totalGauge = meter.createGauge("browser.memory.total_js_heap", { unit: "By" });
+    const limitGauge = meter.createGauge("browser.memory.heap_limit", { unit: "By" });
+    const timer = setInterval(() => {
+        const mem = perf.memory;
+        if (!mem)
+            return;
+        usedGauge.record(mem.usedJSHeapSize);
+        totalGauge.record(mem.totalJSHeapSize);
+        limitGauge.record(mem.jsHeapSizeLimit);
+    }, 30000);
+    return () => clearInterval(timer);
+}

package/dist/browser/offline.js

@@ -0,0 +1,115 @@
+const DB_NAME = "obtrace_offline";
+const STORE_NAME = "queue";
+const MAX_ENTRIES = 500;
+const MAX_BYTES = 5 * 1024 * 1024;
+let db = null;
+let draining = false;
+function openDB() {
+    if (db)
+        return Promise.resolve(db);
+    return new Promise((resolve, reject) => {
+        const req = indexedDB.open(DB_NAME, 1);
+        req.onupgradeneeded = () => {
+            const store = req.result.createObjectStore(STORE_NAME, { keyPath: "id", autoIncrement: true });
+            store.createIndex("ts", "ts");
+        };
+        req.onsuccess = () => { db = req.result; resolve(db); };
+        req.onerror = () => reject(req.error);
+    });
+}
+async function countAndSize() {
+    const idb = await openDB();
+    return new Promise((resolve) => {
+        const tx = idb.transaction(STORE_NAME, "readonly");
+        const store = tx.objectStore(STORE_NAME);
+        const countReq = store.count();
+        let totalSize = 0;
+        let count = 0;
+        countReq.onsuccess = () => { count = countReq.result; };
+        const cursorReq = store.openCursor();
+        cursorReq.onsuccess = () => {
+            const cursor = cursorReq.result;
+            if (cursor) {
+                totalSize += cursor.value.payload.length;
+                cursor.continue();
+            }
+            else {
+                resolve({ count, size: totalSize });
+            }
+        };
+        cursorReq.onerror = () => resolve({ count, size: totalSize });
+    });
+}
+export async function enqueueOffline(url, payload, headers) {
+    try {
+        const { count, size } = await countAndSize();
+        if (count >= MAX_ENTRIES || size + payload.length > MAX_BYTES)
+            return false;
+        const idb = await openDB();
+        return new Promise((resolve) => {
+            const tx = idb.transaction(STORE_NAME, "readwrite");
+            tx.objectStore(STORE_NAME).add({ ts: Date.now(), url, payload, headers });
+            tx.oncomplete = () => resolve(true);
+            tx.onerror = () => resolve(false);
+        });
+    }
+    catch {
+        return false;
+    }
+}
+export async function drainOfflineQueue() {
+    if (draining || !navigator.onLine)
+        return;
+    draining = true;
+    try {
+        const idb = await openDB();
+        const entries = [];
+        await new Promise((resolve) => {
+            const tx = idb.transaction(STORE_NAME, "readonly");
+            const cursorReq = tx.objectStore(STORE_NAME).openCursor();
+            cursorReq.onsuccess = () => {
+                const cursor = cursorReq.result;
+                if (cursor) {
+                    entries.push(cursor.value);
+                    cursor.continue();
+                }
+                else {
+                    resolve();
+                }
+            };
+            cursorReq.onerror = () => resolve();
+        });
+        for (const entry of entries) {
+            try {
+                const res = await fetch(entry.url, {
+                    method: "POST",
+                    headers: { "Content-Type": "application/json", ...entry.headers },
+                    body: entry.payload,
+                });
+                if (res.ok || res.status === 400) {
+                    const tx = idb.transaction(STORE_NAME, "readwrite");
+                    tx.objectStore(STORE_NAME).delete(entry.id);
+                }
+                else {
+                    break;
+                }
+            }
+            catch {
+                break;
+            }
+        }
+    }
+    catch {
+    }
+    finally {
+        draining = false;
+    }
+}
+export function installOfflineSupport() {
+    if (typeof window === "undefined" || typeof indexedDB === "undefined")
+        return () => { };
+    const onOnline = () => drainOfflineQueue();
+    window.addEventListener("online", onOnline);
+    drainOfflineQueue();
+    return () => window.removeEventListener("online", onOnline);
+}

package/dist/browser/replay.js

@@ -0,0 +1,127 @@
+import { EventType } from "@rrweb/types";
+import { sanitizeHeaders, stripQuery, toBase64 } from "../shared/utils";
+const KEY_OVERHEAD = 6;
+function estimateObjectBytes(value) {
+    if (value === null || value === undefined)
+        return 4;
+    switch (typeof value) {
+        case "string":
+            return value.length + 2;
+        case "number":
+        case "boolean":
+            return 8;
+        case "object": {
+            if (Array.isArray(value)) {
+                let sum = 2;
+                for (let i = 0; i < value.length; i++) {
+                    sum += estimateObjectBytes(value[i]) + 1;
+                }
+                return sum;
+            }
+            let sum = 2;
+            const keys = Object.keys(value);
+            for (let i = 0; i < keys.length; i++) {
+                sum += keys[i].length + KEY_OVERHEAD + estimateObjectBytes(value[keys[i]]);
+            }
+            return sum;
+        }
+        default:
+            return 4;
+    }
+}
+export class BrowserReplayBuffer {
+    cfg;
+    replayId;
+    seq = 0;
+    events = [];
+    bytesEstimate = 0;
+    chunkStartedAt = Date.now();
+    constructor(cfg) {
+        this.cfg = cfg;
+        this.replayId = this.resolveReplayId();
+    }
+    get sessionId() {
+        return this.replayId;
+    }
+    pushRrwebEvent(event) {
+        this.events.push(event);
+        this.bytesEstimate += estimateObjectBytes(event);
+        if (this.bytesEstimate >= this.cfg.maxChunkBytes) {
+            return this.flush();
+        }
+        return null;
+    }
+    pushCustomEvent(tag, payload) {
+        const event = {
+            type: EventType.Custom,
+            data: { tag, payload },
+            timestamp: Date.now(),
+        };
+        return this.pushRrwebEvent(event);
+    }
+    flush() {
+        if (!this.events.length) {
+            return null;
+        }
+        const out = {
+            replay_id: this.replayId,
+            seq: this.seq,
+            started_at_ms: this.chunkStartedAt,
+            ended_at_ms: Date.now(),
+            events: this.events,
+        };
+        this.seq += 1;
+        this.events = [];
+        this.bytesEstimate = 0;
+        this.chunkStartedAt = Date.now();
+        return out;
+    }
+    toRecipeStep(index, record) {
+        const safeReqHeaders = sanitizeHeaders(record.req_headers);
+        let body_b64 = "";
+        if (record.req_body_b64) {
+            body_b64 = record.req_body_b64;
+        }
+        return {
+            step_id: index,
+            method: record.method,
+            url_template: stripQuery(record.url),
+            headers: safeReqHeaders,
+            body_b64: body_b64 || undefined,
+        };
+    }
+    asNetworkEvent(record) {
+        return {
+            method: record.method,
+            url: stripQuery(record.url),
+            status: record.status,
+            dur_ms: record.dur_ms,
+            req_headers: sanitizeHeaders(record.req_headers),
+            res_headers: sanitizeHeaders(record.res_headers),
+            req_body_b64: record.req_body_b64,
+            res_body_b64: record.res_body_b64,
+        };
+    }
+    encodeBody(body) {
+        if (typeof body === "string") {
+            return toBase64(body);
+        }
+        if (body && typeof body === "object") {
+            return toBase64(JSON.stringify(body));
+        }
+        return undefined;
+    }
+    resolveReplayId() {
+        if (typeof window === "undefined") {
+            return `srv-${Date.now()}`;
+        }
+        const ls = window.localStorage;
+        const existing = ls.getItem(this.cfg.sessionStorageKey);
+        if (existing) {
+            return existing;
+        }
+        const next = `${Date.now()}-${Math.random().toString(16).slice(2, 10)}`;
+        ls.setItem(this.cfg.sessionStorageKey, next);
+        return next;
+    }
+}

package/dist/browser/resources.js

@@ -0,0 +1,24 @@
+export function installResourceTiming(meter) {
+    if (typeof window === "undefined" || typeof PerformanceObserver === "undefined")
+        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 {
+        observer.observe({ type: "resource", buffered: false });
+    }
+    catch {
+        return () => { };
+    }
+    return () => observer.disconnect();
+}