@monoscopetech/browser 0.7.1 → 0.8.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/tracing.d.ts

@@ -5,13 +5,16 @@ export declare class OpenTelemetryManager {
     private sessionId;
     private tabId;
     private provider;
+    private processor;
     private longTaskObserver;
     private resourceObserver;
     private _enabled;
     private _configured;
+    private _firstExportLogged;
     private pageSpan;
     private pageContext;
     private endPageSpanHandler;
+    onExportStatus: ((ok: boolean) => void) | null;
     constructor(config: MonoscopeConfig, sessionId: string, tabId: string);
     private createProvider;
     private commonAttrs;
@@ -25,6 +28,7 @@ export declare class OpenTelemetryManager {
     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>;

package/dist/tracing.js

@@ -5,6 +5,7 @@ import { ZoneContextManager } from "@opentelemetry/context-zone";
 import { registerInstrumentations } from "@opentelemetry/instrumentation";
 import { XMLHttpRequestInstrumentation } from "@opentelemetry/instrumentation-xml-http-request";
 import { FetchInstrumentation } from "@opentelemetry/instrumentation-fetch";
+import { UserInteractionInstrumentation } from "@opentelemetry/instrumentation-user-interaction";
 import { W3CTraceContextPropagator } from "@opentelemetry/core";
 import { resourceFromAttributes } from "@opentelemetry/resources";
 import { ATTR_SERVICE_NAME } from "@opentelemetry/semantic-conventions";
@@ -13,30 +14,65 @@ import { context, SpanStatusCode, trace } from "@opentelemetry/api";
 const MONOSCOPE_TRACER = "monoscope";
 export class OpenTelemetryManager {
     constructor(config, sessionId, tabId) {
+        this.processor = null;
         this.longTaskObserver = null;
         this.resourceObserver = null;
         this._enabled = true;
         this._configured = false;
+        this._firstExportLogged = false;
         this.pageSpan = null;
         this.pageContext = null;
         this.endPageSpanHandler = null;
+        this.onExportStatus = null;
         this.config = config;
         this.sessionId = sessionId;
         this.tabId = tabId;
         this.provider = this.createProvider();
     }
     createProvider() {
-        const { serviceName, resourceAttributes = {}, exporterEndpoint, projectId } = this.config;
+        const { serviceName, resourceAttributes = {}, exporterEndpoint } = this.config;
+        const apiKey = this.config.apiKey || this.config.projectId || "";
+        const self = this;
+        const realExporter = new OTLPTraceExporter({
+            url: exporterEndpoint || "https://otelcol.monoscope.tech/v1/traces",
+            headers: { "x-api-key": apiKey },
+        });
+        // Wrap exporter to capture export results for diagnostics
+        const wrappedExporter = Object.create(realExporter, {
+            export: {
+                value(spans, resultCallback) {
+                    return realExporter.export(spans, (result) => {
+                        if (!self._firstExportLogged) {
+                            self._firstExportLogged = true;
+                            const ok = result.code === 0;
+                            if (self.config.debug) {
+                                console.log(ok ? "%c[Monoscope] ✓ First trace sent successfully" : "%c[Monoscope] ✗ First trace export failed", ok ? "color: #22c55e; font-weight: bold" : "color: #ef4444; font-weight: bold", ok ? "" : result.error || "");
+                                if (!ok) {
+                                    const msg = String(result.error || "");
+                                    if (msg.includes("401") || msg.includes("403")) {
+                                        console.warn("[Monoscope] Authentication failed. Your apiKey may be invalid.");
+                                    }
+                                    else {
+                                        console.warn("[Monoscope] Could not reach Monoscope endpoint. Check your apiKey and network.");
+                                    }
+                                }
+                            }
+                            self.onExportStatus?.(ok);
+                        }
+                        resultCallback(result);
+                    });
+                },
+            },
+        });
+        const processor = new BatchSpanProcessor(wrappedExporter);
+        this.processor = processor;
         return new WebTracerProvider({
             resource: resourceFromAttributes({
                 [ATTR_SERVICE_NAME]: serviceName,
-                "at-project-id": projectId,
+                "x-api-key": apiKey,
                 ...resourceAttributes,
             }),
-            spanProcessors: [new BatchSpanProcessor(new OTLPTraceExporter({
-                    url: exporterEndpoint || "https://otelcol.apitoolkit.io/v1/traces",
-                    headers: {},
-                }))],
+            spanProcessors: [processor],
         });
     }
     commonAttrs() {
@@ -96,6 +132,7 @@ export class OpenTelemetryManager {
                 new FetchInstrumentation({
                     propagateTraceHeaderCorsUrls: headerUrls, ignoreUrls, applyCustomAttributesOnSpan: addAttrs,
                 }),
+                ...(this.config.enableUserInteraction ? [new UserInteractionInstrumentation()] : []),
             ],
         });
         this.startPageSpan();
@@ -223,6 +260,7 @@ export class OpenTelemetryManager {
     recordEvent(name, attributes = {}) {
         this.emitSpan(name, attributes);
     }
+    async forceFlush() { await this.processor?.forceFlush(); }
     updateSessionId(sessionId) { this.sessionId = sessionId; }
     setEnabled(enabled) { this._enabled = enabled; }
     async shutdown() {

package/dist/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"root":["../src/breadcrumbs.ts","../src/errors.ts","../src/index.ts","../src/react.tsx","../src/replay.ts","../src/router.ts","../src/tracing.ts","../src/types.ts","../src/web-vitals.ts"],"version":"5.9.3"}
+{"root":["../src/breadcrumbs.ts","../src/errors.ts","../src/index.ts","../src/overlay.ts","../src/react.tsx","../src/replay.ts","../src/router.ts","../src/tracing.ts","../src/types.ts","../src/web-vitals.ts"],"version":"5.9.3"}

package/dist/types.d.ts

@@ -1,9 +1,11 @@
 import Monoscope from ".";
 export type MonoscopeConfig = {
-    serviceName: string;
+    apiKey?: string;
+    serviceName?: string;
     exporterEndpoint?: string;
     propagateTraceHeaderCorsUrls?: RegExp[];
-    projectId: string;
+    /** @deprecated Use `apiKey` instead. */
+    projectId?: string;
     resourceAttributes?: Record<string, string>;
     instrumentations?: unknown[];
     replayEventsBaseUrl?: string;
@@ -14,6 +16,7 @@ export type MonoscopeConfig = {
     replaySampleRate?: number;
     enabled?: boolean;
     resourceTimingThresholdMs?: number;
+    enableUserInteraction?: boolean;
 };
 export type MonoscopeUser = {
     email?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@monoscopetech/browser",
-  "version": "0.7.1",
+  "version": "0.8.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "type": "module",