@monoscopetech/browser 0.7.2 → 0.9.0

package/dist/overlay.d.ts

@@ -0,0 +1,12 @@
+export declare class DevOverlay {
+    private el;
+    private eventCount;
+    private statusDot;
+    private countEl;
+    private connEl;
+    constructor();
+    private mount;
+    incrementEvents(): void;
+    setConnectionStatus(ok: boolean): void;
+    private dismiss;
+}

package/dist/overlay.js

@@ -0,0 +1,63 @@
+const DISMISS_KEY = "monoscope-overlay-dismissed";
+export class DevOverlay {
+    constructor() {
+        this.el = null;
+        this.eventCount = 0;
+        this.statusDot = null;
+        this.countEl = null;
+        this.connEl = null;
+        if (typeof document === "undefined")
+            return;
+        try {
+            if (sessionStorage.getItem(DISMISS_KEY))
+                return;
+        }
+        catch { }
+        this.mount();
+    }
+    mount() {
+        const el = document.createElement("div");
+        Object.assign(el.style, {
+            position: "fixed", bottom: "12px", right: "12px", zIndex: "2147483647",
+            background: "#1a1a2e", color: "#e0e0e0", fontFamily: "system-ui, sans-serif",
+            fontSize: "12px", padding: "6px 10px", borderRadius: "6px",
+            boxShadow: "0 2px 8px rgba(0,0,0,0.3)", display: "flex", alignItems: "center", gap: "6px",
+            cursor: "default", userSelect: "none",
+        });
+        this.statusDot = document.createElement("span");
+        Object.assign(this.statusDot.style, {
+            width: "7px", height: "7px", borderRadius: "50%", background: "#22c55e", display: "inline-block",
+        });
+        this.countEl = document.createElement("span");
+        this.countEl.textContent = "0";
+        this.countEl.style.opacity = "0.7";
+        this.connEl = document.createElement("span");
+        this.connEl.style.opacity = "0.7";
+        const close = document.createElement("span");
+        close.textContent = "\u00d7";
+        Object.assign(close.style, { cursor: "pointer", marginLeft: "4px", opacity: "0.6", fontSize: "14px" });
+        close.onclick = () => this.dismiss();
+        el.append(this.statusDot, " Monoscope ", this.countEl, " ", this.connEl, close);
+        this.el = el;
+        (document.body || document.documentElement).appendChild(el);
+    }
+    incrementEvents() {
+        this.eventCount++;
+        if (this.countEl)
+            this.countEl.textContent = String(this.eventCount);
+    }
+    setConnectionStatus(ok) {
+        if (this.connEl)
+            this.connEl.textContent = ok ? "Connected" : "Connection failed";
+        if (this.statusDot)
+            this.statusDot.style.background = ok ? "#22c55e" : "#ef4444";
+    }
+    dismiss() {
+        this.el?.remove();
+        this.el = null;
+        try {
+            sessionStorage.setItem(DISMISS_KEY, "1");
+        }
+        catch { }
+    }
+}

package/dist/react.d.ts

@@ -2,10 +2,14 @@ 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;
+type ProviderProps = {
     children: ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
+} & ({
+    config: MonoscopeConfig;
+} | ({
+    config?: undefined;
+} & MonoscopeConfig));
+export declare function MonoscopeProvider({ children, ...rest }: ProviderProps): import("react/jsx-runtime").JSX.Element;
 export declare function useMonoscope(): Monoscope | null;
 export declare function useMonoscopeUser(user: MonoscopeUser | null | undefined): void;
 type ErrorBoundaryProps = {

package/dist/react.js

@@ -3,7 +3,8 @@ 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 }) {
+export function MonoscopeProvider({ children, ...rest }) {
+    const config = rest.config ?? rest;
     const ref = useRef(null);
     if (!ref.current && typeof window !== "undefined") {
         ref.current = new Monoscope(config);

package/dist/replay.js

@@ -128,7 +128,8 @@ export class MonoscopeReplay {
             return;
         this.trimEvents();
         this.isSaving = true;
-        const baseUrl = `${this.config.replayEventsBaseUrl || "https://app.monoscope.tech"}/rrweb/${this.config.projectId}`;
+        const apiKey = this.config.apiKey || this.config.projectId || "";
+        const baseUrl = `${this.config.replayEventsBaseUrl || "https://app.monoscope.tech"}/api/v1/rrweb`;
         const eventsToSend = [...this.events];
         this.events = [];
         const payload = {
@@ -139,6 +140,7 @@ export class MonoscopeReplay {
             eventCount: eventsToSend.length,
             user: Object.keys(this.userAttributes).length > 0 ? this.userAttributes : undefined,
         };
+        const headers = { "Content-Type": "application/json", "Authorization": `Bearer ${apiKey}` };
         try {
             if (forceSynchronous && typeof navigator !== "undefined" && navigator.sendBeacon) {
                 const blob = new Blob([JSON.stringify(payload)], {
@@ -148,7 +150,7 @@ export class MonoscopeReplay {
                 if (!sent) {
                     fetch(baseUrl, {
                         method: "POST",
-                        headers: { "Content-Type": "application/json" },
+                        headers,
                         body: JSON.stringify(payload),
                         keepalive: true,
                     }).catch(() => { });
@@ -158,12 +160,19 @@ export class MonoscopeReplay {
                 const body = JSON.stringify(payload);
                 const response = await fetch(baseUrl, {
                     method: "POST",
-                    headers: { "Content-Type": "application/json" },
+                    headers,
                     body,
                     keepalive: body.length < 63000,
                 });
                 if (!response.ok) {
-                    throw new Error(`Failed to save replay events: ${response.status} ${response.statusText}`);
+                    const status = response.status;
+                    if (status === 401 || status === 403) {
+                        console.warn("[Monoscope] Replay upload authentication failed. Your apiKey may be invalid.");
+                    }
+                    else {
+                        console.warn(`[Monoscope] Replay upload failed (${status}). Check your apiKey and network.`);
+                    }
+                    throw new Error(`Failed to save replay events: ${status} ${response.statusText}`);
                 }
                 if (this.config.debug) {
                     console.log(`Successfully saved ${eventsToSend.length} replay events`);

package/dist/router.d.ts

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

package/dist/router.js

@@ -1,12 +1,12 @@
 import { addBreadcrumb } from "./breadcrumbs";
 export class SPARouter {
-    constructor(emit) {
+    constructor(onNavigation) {
         this.currentUrl = "";
         this._active = false;
         this.origPushState = null;
         this.origReplaceState = null;
         this.popstateHandler = null;
-        this.emit = emit;
+        this.onNavigation = onNavigation;
     }
     start() {
         if (typeof window === "undefined" || this._active)
@@ -23,12 +23,7 @@ export class SPARouter {
                     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,
-                });
+                this.onNavigation(from, to, method);
             }
             catch (e) {
                 try {

package/dist/tracing.d.ts

@@ -1,30 +1,61 @@
 import { MonoscopeConfig, MonoscopeUser } from "./types";
 import { Span } from "@opentelemetry/api";
+export type MonoscopeKind = "page_load" | "navigation" | "interaction" | "network" | "resource" | "web_vital" | "error" | "long_task" | "custom";
+export declare function shortPath(url: string): string;
+export declare function describeElement(el: EventTarget | Element | null | undefined): string;
+/**
+ * RFC4122 v4 id with a fallback for non-secure contexts (HTTP / file:// /
+ * older Safari/Edge) where `crypto.randomUUID` is undefined.
+ */
+export declare function newId(): string;
 export declare class OpenTelemetryManager {
     private config;
     private sessionId;
     private tabId;
+    private pageviewId;
     private provider;
+    private processor;
     private longTaskObserver;
     private resourceObserver;
     private _enabled;
     private _configured;
-    private pageSpan;
-    private pageContext;
-    private endPageSpanHandler;
+    private _firstExportLogged;
+    private routeSpan;
+    private routeContext;
+    private routeIdleTimer;
+    private flushOnHideHandler;
+    private visibilityHandler;
+    onExportStatus: ((ok: boolean) => void) | null;
+    onSpanStart: (() => void) | null;
     constructor(config: MonoscopeConfig, sessionId: string, tabId: string);
     private createProvider;
     private commonAttrs;
     private applyCommonAttrs;
     configure(): void;
-    private startPageSpan;
-    getPageContext(): import("@opentelemetry/api").Context | null;
-    private withPageContext;
+    getPageviewId(): string;
+    rotatePageview(): string;
+    /**
+     * Open a short-lived route.change root span for an SPA navigation. Closes
+     * any previous route span, rotates pageview.id, and publishes the span as
+     * the active context so async work started in the same Zone (fetch/XHR)
+     * inherits it as parent. Auto-closes after ROUTE_IDLE_MS or on next nav.
+     */
+    startRouteChange(from: string, to: string, method: string): void;
+    endRouteChange(): void;
+    /**
+     * Flush pending spans before the JS context is destroyed. Critical for
+     * MPAs where every navigation unloads the page, and still valuable for
+     * SPAs at tab close. pagehide is preferred over beforeunload (fires for
+     * bfcache eviction and mobile backgrounding; beforeunload does not).
+     */
+    private installFlushOnHide;
+    private withActiveContext;
     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;
+    forceFlush(): Promise<void>;
     updateSessionId(sessionId: string): void;
     setEnabled(enabled: boolean): void;
     shutdown(): Promise<void>;