@monoscopetech/browser 0.6.1 → 0.7.2

package/dist/react.d.ts

@@ -0,0 +1,28 @@
+import { Component } from "react";
+import type { ReactNode, ErrorInfo } from "react";
+import Monoscope from ".";
+import type { MonoscopeConfig, MonoscopeUser } from "./types";
+export declare function MonoscopeProvider({ config, children }: {
+    config: MonoscopeConfig;
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useMonoscope(): Monoscope | null;
+export declare function useMonoscopeUser(user: MonoscopeUser | null | undefined): void;
+type ErrorBoundaryProps = {
+    children: ReactNode;
+    fallback?: ReactNode | ((error: Error) => ReactNode);
+};
+type ErrorBoundaryState = {
+    error: Error | null;
+};
+export declare class MonoscopeErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+    static contextType: import("react").Context<Monoscope | null>;
+    context: Monoscope | null;
+    state: ErrorBoundaryState;
+    static getDerivedStateFromError(error: Error): {
+        error: Error;
+    };
+    componentDidCatch(error: Error, info: ErrorInfo): void;
+    render(): ReactNode;
+}
+export {};

package/dist/react.js

@@ -0,0 +1,59 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useRef, useEffect, Component } from "react";
+import Monoscope from ".";
+const MonoscopeContext = createContext(null);
+export function MonoscopeProvider({ config, children }) {
+    const ref = useRef(null);
+    if (!ref.current && typeof window !== "undefined") {
+        ref.current = new Monoscope(config);
+    }
+    useEffect(() => {
+        const instance = ref.current;
+        if (!instance)
+            return;
+        // Deferred destroy — cleared if Strict Mode remounts immediately
+        let timer;
+        return () => {
+            timer = setTimeout(() => { instance.destroy(); ref.current = null; }, 0);
+            return void timer;
+        };
+    }, []);
+    return _jsx(MonoscopeContext.Provider, { value: ref.current, children: children });
+}
+export function useMonoscope() {
+    return useContext(MonoscopeContext);
+}
+export function useMonoscopeUser(user) {
+    const instance = useMonoscope();
+    useEffect(() => {
+        if (instance && user)
+            instance.setUser(user);
+    }, [instance, user]);
+}
+export class MonoscopeErrorBoundary extends Component {
+    constructor() {
+        super(...arguments);
+        this.state = { error: null };
+    }
+    static getDerivedStateFromError(error) {
+        return { error };
+    }
+    componentDidCatch(error, info) {
+        this.context?.recordEvent("react.error_boundary", {
+            "error.message": error.message,
+            "error.stack": error.stack ?? "",
+            "error.component_stack": info.componentStack ?? "",
+        });
+    }
+    render() {
+        if (this.state.error) {
+            const { fallback } = this.props;
+            if (typeof fallback === "function")
+                return fallback(this.state.error);
+            return fallback ?? null;
+        }
+        return this.props.children;
+    }
+}
+MonoscopeErrorBoundary.contextType = MonoscopeContext;

package/dist/replay.d.ts

@@ -3,18 +3,27 @@ export declare class MonoscopeReplay {
     private events;
     private config;
     private sessionId;
+    private tabId;
     private stopRecording;
     private saveInterval;
     private isSaving;
     private isConfigured;
-    constructor(config: MonoscopeConfig, sessionId: string);
-    private setupEventListeners;
+    private _enabled;
+    private userAttributes;
+    private _listenersAttached;
     private handleUnload;
     private handleVisibilityChange;
+    constructor(config: MonoscopeConfig, sessionId: string, tabId: string);
+    private setupListeners;
+    private removeListeners;
+    private trimEvents;
     configure(): void;
     save(forceSynchronous?: boolean): Promise<void>;
     stop(): void;
+    setEnabled(enabled: boolean): void;
+    setUser(user: Record<string, string | string[] | undefined>): void;
     getEventCount(): number;
+    updateSessionId(sessionId: string): void;
     getSessionId(): string;
     isRecording(): boolean;
 }

package/dist/replay.js

@@ -4,46 +4,71 @@ const MAX_EVENT_BATCH = 50;
 const SAVE_INTERVAL = 2000;
 const MAX_RETRY_EVENTS = 5000;
 export class MonoscopeReplay {
-    constructor(config, sessionId) {
+    constructor(config, sessionId, tabId) {
         this.events = [];
         this.stopRecording = undefined;
         this.saveInterval = null;
         this.isSaving = false;
         this.isConfigured = false;
+        this._enabled = true;
+        this.userAttributes = {};
+        this._listenersAttached = false;
+        this.handleUnload = () => this.save(true);
+        this.handleVisibilityChange = () => { if (document.visibilityState === "hidden")
+            this.save(); };
         this.sessionId = sessionId;
+        this.tabId = tabId;
         this.config = config;
-        this.events = [];
-        // Bind methods
-        this.save = this.save.bind(this);
-        this.configure = this.configure.bind(this);
-        this.handleUnload = this.handleUnload.bind(this);
-        this.handleVisibilityChange = this.handleVisibilityChange.bind(this);
-        // Setup event listeners
-        this.setupEventListeners();
+        this.setupListeners();
     }
-    setupEventListeners() {
+    setupListeners() {
+        if (typeof window === "undefined" || this._listenersAttached)
+            return;
+        this._listenersAttached = true;
         window.addEventListener("beforeunload", this.handleUnload);
-        document.addEventListener("visibilitychange", this.handleVisibilityChange);
         window.addEventListener("pagehide", this.handleUnload);
+        document.addEventListener("visibilitychange", this.handleVisibilityChange);
     }
-    handleUnload() {
-        this.save(true); // Force synchronous save on unload
+    removeListeners() {
+        if (typeof window === "undefined" || !this._listenersAttached)
+            return;
+        this._listenersAttached = false;
+        window.removeEventListener("beforeunload", this.handleUnload);
+        window.removeEventListener("pagehide", this.handleUnload);
+        document.removeEventListener("visibilitychange", this.handleVisibilityChange);
     }
-    handleVisibilityChange() {
-        if (document.visibilityState === "hidden") {
-            this.save();
+    trimEvents() {
+        if (this.events.length <= MAX_RETRY_EVENTS)
+            return;
+        if (this.config.debug) {
+            console.warn(`Event queue exceeded ${MAX_RETRY_EVENTS}, dropping middle events (preserving snapshots)`);
         }
+        // rrweb EventType.FullSnapshot (type 2) — required for replay playback
+        const fullSnapshots = this.events.filter((e) => e.type === 2);
+        const otherEvents = this.events.filter((e) => e.type !== 2);
+        const remainingSlots = Math.max(0, MAX_RETRY_EVENTS - fullSnapshots.length);
+        this.events = [...fullSnapshots, ...otherEvents.slice(-remainingSlots)];
+        this.events.sort((a, b) => a.timestamp - b.timestamp);
     }
     configure() {
-        if (this.isConfigured) {
-            console.warn("MonoscopeReplay already configured");
+        if (typeof window === "undefined")
+            return;
+        if (this.isConfigured)
+            return;
+        this.setupListeners();
+        const rate = Math.max(0, Math.min(1, this.config.replaySampleRate ?? 1));
+        if (Math.random() >= rate) {
+            this._enabled = false;
+            if (this.config.debug)
+                console.log("MonoscopeReplay: sampled out");
             return;
         }
         try {
             this.stopRecording = rrweb.record({
                 emit: (event) => {
+                    if (!this._enabled)
+                        return;
                     this.events.push(event);
-                    // Auto-save when batch size reached
                     if (this.events.length >= MAX_EVENT_BATCH) {
                         this.save();
                     }
@@ -56,8 +81,7 @@ export class MonoscopeReplay {
                     tel: true,
                 },
                 maskTextClass: "rr-mask",
-                // Performance settings
-                checkoutEveryNms: 15 * 1000, // Full snapshot every 15s
+                checkoutEveryNms: 15 * 1000,
                 sampling: {
                     mouseInteraction: {
                         MouseUp: false,
@@ -71,9 +95,9 @@ export class MonoscopeReplay {
                         TouchEnd: false,
                     },
                     mousemove: true,
-                    scroll: 150, // Throttle scroll events
+                    scroll: 150,
                     media: 800,
-                    input: "last", // Only capture final input value
+                    input: "last",
                 },
                 plugins: [
                     getRecordConsolePlugin({
@@ -82,77 +106,59 @@ export class MonoscopeReplay {
                         stringifyOptions: {
                             stringLengthLimit: 1000,
                             numOfKeysLimit: 100,
-                            depthOfLimit: 2, // Increased from 1 for better context
+                            depthOfLimit: 2,
                         },
                     }),
                 ],
             });
-            this.saveInterval = setInterval(() => {
-                this.save();
-            }, SAVE_INTERVAL);
+            this.saveInterval = setInterval(() => this.save(), SAVE_INTERVAL);
             this.isConfigured = true;
             if (this.config.debug) {
                 console.log("MonoscopeReplay configured successfully");
             }
         }
         catch (error) {
-            console.error("Failed to configure MonoscopeReplay:", error);
-            throw error;
+            console.warn("Monoscope: failed to configure replay", error);
         }
     }
     async save(forceSynchronous = false) {
-        if (this.isSaving && !forceSynchronous) {
+        if (this.isSaving && !forceSynchronous)
             return;
-        }
-        if (this.events.length === 0) {
+        if (this.events.length === 0)
             return;
-        }
-        if (this.events.length > MAX_RETRY_EVENTS) {
-            if (this.config.debug) {
-                console.warn(`Event queue exceeded ${MAX_RETRY_EVENTS}, dropping middle events (preserving snapshots)`);
-            }
-            // Find full snapshot events (type 2) - these are critical for replay
-            const fullSnapshots = this.events.filter((e) => e.type === 2);
-            const otherEvents = this.events.filter((e) => e.type !== 2);
-            // Keep all snapshots and the most recent other events
-            const remainingSlots = MAX_RETRY_EVENTS - fullSnapshots.length;
-            this.events = [...fullSnapshots, ...otherEvents.slice(-remainingSlots)];
-            // Re-sort by timestamp to maintain order
-            this.events.sort((a, b) => a.timestamp - b.timestamp);
-        }
+        this.trimEvents();
         this.isSaving = true;
-        const { replayEventsBaseUrl, projectId } = this.config;
-        // Construct base URL
-        let baseUrl = replayEventsBaseUrl || "https://app.monoscope.tech";
-        baseUrl = `${baseUrl}/rrweb/${projectId}`;
-        // Get events to send and clear buffer
+        const baseUrl = `${this.config.replayEventsBaseUrl || "https://app.monoscope.tech"}/rrweb/${this.config.projectId}`;
         const eventsToSend = [...this.events];
         this.events = [];
         const payload = {
             events: eventsToSend,
             sessionId: this.sessionId,
+            tabId: this.tabId,
             timestamp: new Date().toISOString(),
             eventCount: eventsToSend.length,
+            user: Object.keys(this.userAttributes).length > 0 ? this.userAttributes : undefined,
         };
         try {
-            if (forceSynchronous && navigator.sendBeacon) {
+            if (forceSynchronous && typeof navigator !== "undefined" && navigator.sendBeacon) {
                 const blob = new Blob([JSON.stringify(payload)], {
                     type: "application/json",
                 });
                 const sent = navigator.sendBeacon(baseUrl, blob);
                 if (!sent) {
-                    console.warn("sendBeacon failed, events may be lost");
+                    fetch(baseUrl, {
+                        method: "POST",
+                        headers: { "Content-Type": "application/json" },
+                        body: JSON.stringify(payload),
+                        keepalive: true,
+                    }).catch(() => { });
                 }
             }
             else {
-                // Use keepalive so the request survives page navigation,
-                // but only when payload fits under the 64KB keepalive limit
                 const body = JSON.stringify(payload);
                 const response = await fetch(baseUrl, {
                     method: "POST",
-                    headers: {
-                        "Content-Type": "application/json",
-                    },
+                    headers: { "Content-Type": "application/json" },
                     body,
                     keepalive: body.length < 63000,
                 });
@@ -165,23 +171,16 @@ export class MonoscopeReplay {
             }
         }
         catch (error) {
-            console.error("Failed to save replay events:", error);
+            console.warn("Monoscope: failed to save replay events:", error);
             this.events = [...eventsToSend, ...this.events];
-            if (this.events.length > MAX_RETRY_EVENTS) {
-                // Preserve full snapshots when trimming
-                const fullSnapshots = this.events.filter((e) => e.type === 2);
-                const otherEvents = this.events.filter((e) => e.type !== 2);
-                const remainingSlots = MAX_RETRY_EVENTS - fullSnapshots.length;
-                this.events = [...fullSnapshots, ...otherEvents.slice(-remainingSlots)];
-                this.events.sort((a, b) => a.timestamp - b.timestamp);
-            }
+            this.trimEvents();
         }
         finally {
             this.isSaving = false;
         }
     }
     stop() {
-        this.save(true);
+        this.save(true).catch(() => { });
         if (this.stopRecording) {
             this.stopRecording();
             this.stopRecording = undefined;
@@ -190,21 +189,30 @@ export class MonoscopeReplay {
             clearInterval(this.saveInterval);
             this.saveInterval = null;
         }
-        window.removeEventListener("beforeunload", this.handleUnload);
-        window.removeEventListener("pagehide", this.handleUnload);
-        document.removeEventListener("visibilitychange", this.handleVisibilityChange);
+        this.removeListeners();
         this.isConfigured = false;
         if (this.config.debug) {
             console.log("MonoscopeReplay stopped");
         }
     }
+    setEnabled(enabled) {
+        this._enabled = enabled;
+        if (!enabled)
+            this.stop();
+    }
+    setUser(user) {
+        this.userAttributes = { ...this.userAttributes, ...user };
+    }
     getEventCount() {
         return this.events.length;
     }
+    updateSessionId(sessionId) {
+        this.sessionId = sessionId;
+    }
     getSessionId() {
         return this.sessionId;
     }
     isRecording() {
-        return this.isConfigured && this.stopRecording !== null;
+        return this.isConfigured && this.stopRecording !== undefined;
     }
 }

package/dist/router.d.ts

@@ -0,0 +1,13 @@
+type EmitFn = (name: string, attrs: Record<string, string | number>) => void;
+export declare class SPARouter {
+    private emit;
+    private currentUrl;
+    private _active;
+    private origPushState;
+    private origReplaceState;
+    private popstateHandler;
+    constructor(emit: EmitFn);
+    start(): void;
+    stop(): void;
+}
+export {};

package/dist/router.js

@@ -0,0 +1,65 @@
+import { addBreadcrumb } from "./breadcrumbs";
+export class SPARouter {
+    constructor(emit) {
+        this.currentUrl = "";
+        this._active = false;
+        this.origPushState = null;
+        this.origReplaceState = null;
+        this.popstateHandler = null;
+        this.emit = emit;
+    }
+    start() {
+        if (typeof window === "undefined" || this._active)
+            return;
+        this._active = true;
+        this.currentUrl = location.href;
+        this.origPushState = history.pushState.bind(history);
+        this.origReplaceState = history.replaceState.bind(history);
+        const onNav = (method) => {
+            try {
+                const from = this.currentUrl;
+                const to = location.href;
+                if (from === to)
+                    return;
+                this.currentUrl = to;
+                addBreadcrumb({ type: "navigation", message: `${from} → ${to}`, data: { method } });
+                this.emit("navigation", {
+                    "navigation.from": from,
+                    "navigation.to": to,
+                    "navigation.method": method,
+                    "page.title": document.title,
+                });
+            }
+            catch (e) {
+                try {
+                    console.warn("Monoscope: error in navigation tracking", e);
+                }
+                catch { /* must never throw */ }
+            }
+        };
+        history.pushState = (...args) => {
+            this.origPushState(...args);
+            onNav("pushState");
+        };
+        history.replaceState = (...args) => {
+            this.origReplaceState(...args);
+            onNav("replaceState");
+        };
+        this.popstateHandler = () => onNav("popstate");
+        window.addEventListener("popstate", this.popstateHandler);
+    }
+    stop() {
+        if (typeof window === "undefined" || !this._active)
+            return;
+        this._active = false;
+        if (this.origPushState)
+            history.pushState = this.origPushState;
+        if (this.origReplaceState)
+            history.replaceState = this.origReplaceState;
+        if (this.popstateHandler)
+            window.removeEventListener("popstate", this.popstateHandler);
+        this.origPushState = null;
+        this.origReplaceState = null;
+        this.popstateHandler = null;
+    }
+}

package/dist/tracing.d.ts

@@ -1,12 +1,32 @@
 import { MonoscopeConfig, MonoscopeUser } from "./types";
+import { Span } from "@opentelemetry/api";
 export declare class OpenTelemetryManager {
     private config;
     private sessionId;
+    private tabId;
     private provider;
-    constructor(config: MonoscopeConfig, sessionId: string);
+    private longTaskObserver;
+    private resourceObserver;
+    private _enabled;
+    private _configured;
+    private pageSpan;
+    private pageContext;
+    private endPageSpanHandler;
+    constructor(config: MonoscopeConfig, sessionId: string, tabId: string);
     private createProvider;
+    private commonAttrs;
+    private applyCommonAttrs;
     configure(): void;
-    private setUserAttributes;
+    private startPageSpan;
+    getPageContext(): import("@opentelemetry/api").Context | null;
+    private withPageContext;
+    emitSpan(name: string, attrs: Record<string, string | number | boolean>, configure?: (span: Span) => void): void;
+    private observeLongTasks;
+    private observeResourceTiming;
+    startSpan<T>(name: string, fn: (span: Span) => T): T;
+    recordEvent(name: string, attributes?: Record<string, string | number | boolean>): void;
+    updateSessionId(sessionId: string): void;
+    setEnabled(enabled: boolean): void;
     shutdown(): Promise<void>;
     setUser(newConfig: MonoscopeUser): void;
 }