@monoscopetech/browser 0.6.0 → 0.7.1

package/dist/tracing.js

@@ -9,86 +9,237 @@ import { W3CTraceContextPropagator } from "@opentelemetry/core";
 import { resourceFromAttributes } from "@opentelemetry/resources";
 import { ATTR_SERVICE_NAME } from "@opentelemetry/semantic-conventions";
 import { OTLPTraceExporter } from "@opentelemetry/exporter-trace-otlp-http";
+import { context, SpanStatusCode, trace } from "@opentelemetry/api";
+const MONOSCOPE_TRACER = "monoscope";
 export class OpenTelemetryManager {
-    constructor(config, sessionId) {
+    constructor(config, sessionId, tabId) {
+        this.longTaskObserver = null;
+        this.resourceObserver = null;
+        this._enabled = true;
+        this._configured = false;
+        this.pageSpan = null;
+        this.pageContext = null;
+        this.endPageSpanHandler = null;
         this.config = config;
         this.sessionId = sessionId;
+        this.tabId = tabId;
         this.provider = this.createProvider();
     }
     createProvider() {
-        const { serviceName, resourceAttributes, exporterEndpoint, projectId } = this.config;
-        const resource = resourceFromAttributes({
-            [ATTR_SERVICE_NAME]: serviceName,
-            "at-project-id": projectId,
-            ...(resourceAttributes || {}),
-        });
-        const otlpExporter = new OTLPTraceExporter({
-            url: exporterEndpoint || "https://otelcol.apitoolkit.io/v1/traces",
-            headers: {},
-        });
+        const { serviceName, resourceAttributes = {}, exporterEndpoint, projectId } = this.config;
         return new WebTracerProvider({
-            resource,
-            spanProcessors: [new BatchSpanProcessor(otlpExporter)],
+            resource: resourceFromAttributes({
+                [ATTR_SERVICE_NAME]: serviceName,
+                "at-project-id": projectId,
+                ...resourceAttributes,
+            }),
+            spanProcessors: [new BatchSpanProcessor(new OTLPTraceExporter({
+                    url: exporterEndpoint || "https://otelcol.apitoolkit.io/v1/traces",
+                    headers: {},
+                }))],
         });
     }
+    commonAttrs() {
+        const attrs = {
+            "session.id": this.sessionId,
+            "tab.id": this.tabId,
+            "page.url": location.href,
+            "page.title": document.title,
+        };
+        if (document.referrer)
+            attrs["page.referrer"] = document.referrer;
+        return attrs;
+    }
+    applyCommonAttrs(span) {
+        for (const [k, v] of Object.entries(this.commonAttrs()))
+            span.setAttribute(k, v);
+        if (this.config.user) {
+            for (const [k, v] of Object.entries(this.config.user)) {
+                if (v !== undefined)
+                    span.setAttribute(`user.${k}`, v);
+            }
+        }
+    }
     configure() {
+        if (typeof window === "undefined" || this._configured)
+            return;
+        this._configured = true;
+        const rate = Math.max(0, Math.min(1, this.config.sampleRate ?? 1));
+        if (Math.random() >= rate) {
+            this._enabled = false;
+            if (this.config.debug)
+                console.log("MonoscopeOTel: sampled out");
+            return;
+        }
         this.provider.register({
             contextManager: new ZoneContextManager(),
             propagator: new W3CTraceContextPropagator(),
         });
-        const headerUrls = this.config.propagateTraceHeaderCorsUrls || [
-            /^https?:\/\/.*/,
-        ];
+        // Default to same-origin only to avoid leaking trace context to third parties
+        const headerUrls = this.config.propagateTraceHeaderCorsUrls || [new RegExp(`^${location.origin}`)];
         const ignoreUrls = [
             /^https?:\/\/(?:[^\/]+\.)?apitoolkit\.io\//,
             /^https?:\/\/(?:[^\/]+\.)?monoscope\.tech\//,
         ];
+        const addAttrs = (span) => this.applyCommonAttrs(span);
         registerInstrumentations({
             tracerProvider: this.provider,
             instrumentations: [
                 ...(this.config.instrumentations || []),
                 new DocumentLoadInstrumentation({
                     ignoreNetworkEvents: !this.config.enableNetworkEvents,
-                    applyCustomAttributesOnSpan: {
-                        documentLoad: (span) => {
-                            span.setAttribute("session.id", this.sessionId);
-                            this.setUserAttributes(span);
-                        },
-                    },
+                    applyCustomAttributesOnSpan: { documentLoad: addAttrs },
                 }),
                 new XMLHttpRequestInstrumentation({
-                    propagateTraceHeaderCorsUrls: headerUrls,
-                    ignoreUrls,
-                    applyCustomAttributesOnSpan: (span) => {
-                        span.setAttribute("session.id", this.sessionId);
-                        this.setUserAttributes(span);
-                    },
+                    propagateTraceHeaderCorsUrls: headerUrls, ignoreUrls, applyCustomAttributesOnSpan: addAttrs,
                 }),
                 new FetchInstrumentation({
-                    propagateTraceHeaderCorsUrls: headerUrls,
-                    ignoreUrls,
-                    applyCustomAttributesOnSpan: (span) => {
-                        span.setAttribute("session.id", this.sessionId);
-                        this.setUserAttributes(span);
-                    },
+                    propagateTraceHeaderCorsUrls: headerUrls, ignoreUrls, applyCustomAttributesOnSpan: addAttrs,
                 }),
             ],
         });
+        this.startPageSpan();
+        this.observeLongTasks();
+        this.observeResourceTiming();
     }
-    setUserAttributes(span) {
-        if (this.config.user) {
-            for (let k in this.config.user) {
-                span.setAttribute(`user.${k}`, this.config.user[k]);
-            }
+    startPageSpan() {
+        const tracer = trace.getTracer(MONOSCOPE_TRACER);
+        this.pageSpan = tracer.startSpan("browser.session", { attributes: this.commonAttrs() });
+        this.pageContext = trace.setSpan(context.active(), this.pageSpan);
+        this.endPageSpanHandler = () => { this.pageSpan?.end(); this.pageSpan = null; };
+        window.addEventListener("pagehide", this.endPageSpanHandler);
+        window.addEventListener("beforeunload", this.endPageSpanHandler);
+    }
+    getPageContext() { return this.pageContext; }
+    withPageContext(fn) {
+        if (this.pageContext)
+            return context.with(this.pageContext, fn);
+        return fn();
+    }
+    emitSpan(name, attrs, configure) {
+        try {
+            const tracer = trace.getTracer(MONOSCOPE_TRACER);
+            this.withPageContext(() => tracer.startActiveSpan(name, (span) => {
+                this.applyCommonAttrs(span);
+                for (const [k, v] of Object.entries(attrs))
+                    span.setAttribute(k, v);
+                configure?.(span);
+                span.end();
+            }));
+        }
+        catch (e) {
+            if (this.config.debug)
+                console.warn("Monoscope: span emit failed for", name, e);
+        }
+    }
+    observeLongTasks() {
+        if (typeof PerformanceObserver === "undefined")
+            return;
+        try {
+            this.longTaskObserver = new PerformanceObserver((list) => {
+                if (!this._enabled)
+                    return;
+                for (const entry of list.getEntries()) {
+                    try {
+                        const attrs = {
+                            "longtask.duration": entry.duration,
+                            "longtask.name": entry.name,
+                        };
+                        const attr = entry.attribution;
+                        if (attr?.[0]?.containerSrc)
+                            attrs["longtask.script"] = attr[0].containerSrc;
+                        if (attr?.[0]?.containerName)
+                            attrs["longtask.container"] = attr[0].containerName;
+                        this.emitSpan("longtask", attrs);
+                    }
+                    catch (e) {
+                        if (this.config.debug)
+                            console.warn("Monoscope: failed to process longtask entry", e);
+                    }
+                }
+            });
+            this.longTaskObserver.observe({ type: "longtask", buffered: true });
+        }
+        catch (e) {
+            console.warn("Monoscope: longtask observation not supported", e);
+        }
+    }
+    observeResourceTiming() {
+        if (typeof PerformanceObserver === "undefined")
+            return;
+        const threshold = this.config.resourceTimingThresholdMs ?? 200;
+        try {
+            this.resourceObserver = new PerformanceObserver((list) => {
+                if (!this._enabled)
+                    return;
+                for (const entry of list.getEntries()) {
+                    if (entry.duration < threshold)
+                        continue;
+                    try {
+                        const re = entry;
+                        this.emitSpan("resource", {
+                            "resource.name": re.name,
+                            "resource.duration": re.duration,
+                            "resource.type": re.initiatorType,
+                            "resource.transferSize": re.transferSize,
+                            "resource.encodedBodySize": re.encodedBodySize,
+                        });
+                    }
+                    catch (e) {
+                        if (this.config.debug)
+                            console.warn("Monoscope: failed to process resource entry", e);
+                    }
+                }
+            });
+            this.resourceObserver.observe({ type: "resource", buffered: false });
+        }
+        catch (e) {
+            console.warn("Monoscope: resource timing not supported", e);
         }
     }
+    startSpan(name, fn) {
+        const tracer = trace.getTracer(MONOSCOPE_TRACER);
+        return this.withPageContext(() => tracer.startActiveSpan(name, (span) => {
+            this.applyCommonAttrs(span);
+            try {
+                const result = fn(span);
+                if (result instanceof Promise) {
+                    return result.then((v) => { span.end(); return v; }, (e) => {
+                        span.setStatus({ code: SpanStatusCode.ERROR, message: String(e) });
+                        span.end();
+                        throw e;
+                    });
+                }
+                span.end();
+                return result;
+            }
+            catch (e) {
+                span.setStatus({ code: SpanStatusCode.ERROR, message: String(e) });
+                span.end();
+                throw e;
+            }
+        }));
+    }
+    recordEvent(name, attributes = {}) {
+        this.emitSpan(name, attributes);
+    }
+    updateSessionId(sessionId) { this.sessionId = sessionId; }
+    setEnabled(enabled) { this._enabled = enabled; }
     async shutdown() {
+        this.longTaskObserver?.disconnect();
+        this.resourceObserver?.disconnect();
+        if (this.endPageSpanHandler && typeof window !== "undefined") {
+            this.endPageSpanHandler();
+            window.removeEventListener("pagehide", this.endPageSpanHandler);
+            window.removeEventListener("beforeunload", this.endPageSpanHandler);
+            this.endPageSpanHandler = null;
+        }
+        this.pageSpan = null;
+        this.pageContext = null;
+        this._configured = false;
         await this.provider.shutdown();
     }
     setUser(newConfig) {
-        this.config = {
-            ...this.config,
-            user: { ...this.config.user, ...newConfig },
-        };
+        this.config = { ...this.config, user: { ...this.config.user, ...newConfig } };
     }
 }

package/dist/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"root":["../src/index.ts","../src/replay.ts","../src/tracing.ts","../src/types.ts"],"version":"5.8.3"}
+{"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"}

package/dist/types.d.ts

@@ -5,10 +5,15 @@ export type MonoscopeConfig = {
     propagateTraceHeaderCorsUrls?: RegExp[];
     projectId: string;
     resourceAttributes?: Record<string, string>;
-    instrumentations?: any[];
+    instrumentations?: unknown[];
     replayEventsBaseUrl?: string;
     enableNetworkEvents?: boolean;
     user?: MonoscopeUser;
+    debug?: boolean;
+    sampleRate?: number;
+    replaySampleRate?: number;
+    enabled?: boolean;
+    resourceTimingThresholdMs?: number;
 };
 export type MonoscopeUser = {
     email?: string;
@@ -16,7 +21,7 @@ export type MonoscopeUser = {
     name?: string;
     id?: string;
     roles?: string[];
-} & Record<string, string>;
+} & Record<string, string | string[] | undefined>;
 declare global {
     interface Window {
         monoscope: Monoscope;

package/dist/web-vitals.d.ts

@@ -0,0 +1,10 @@
+type EmitFn = (name: string, attrs: Record<string, string | number>) => void;
+export declare class WebVitalsCollector {
+    private emit;
+    private _enabled;
+    private _active;
+    constructor(emit: EmitFn);
+    start(): Promise<void>;
+    setEnabled(enabled: boolean): void;
+}
+export {};

package/dist/web-vitals.js

@@ -0,0 +1,31 @@
+export class WebVitalsCollector {
+    constructor(emit) {
+        this._enabled = true;
+        this._active = false;
+        this.emit = emit;
+    }
+    async start() {
+        if (typeof window === "undefined" || this._active)
+            return;
+        this._active = true;
+        try {
+            const { onCLS, onINP, onLCP, onFCP, onTTFB } = await import("web-vitals");
+            const report = (m) => {
+                if (!this._enabled)
+                    return;
+                this.emit(`web-vital.${m.name}`, {
+                    "vital.name": m.name,
+                    "vital.value": m.value,
+                    "vital.rating": m.rating,
+                    "vital.id": m.id,
+                    "vital.navigationType": m.navigationType,
+                });
+            };
+            [onCLS, onINP, onLCP, onFCP, onTTFB].forEach(fn => fn(report));
+        }
+        catch (e) {
+            console.warn("Monoscope: web-vitals collection failed to initialize", e);
+        }
+    }
+    setEnabled(enabled) { this._enabled = enabled; }
+}

package/package.json

@@ -1,17 +1,32 @@
 {
   "name": "@monoscopetech/browser",
-  "version": "0.6.0",
+  "version": "0.7.1",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "type": "module",
   "unpkg": "dist/monoscope.umd.js",
   "browser": "dist/monoscope.umd.js",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./react": {
+      "types": "./dist/react.d.ts",
+      "import": "./dist/react.js",
+      "default": "./dist/react.js"
+    }
+  },
   "scripts": {
     "build": "npx tsc --build && rollup -c",
+    "test": "vitest run",
+    "test:e2e": "playwright test",
     "lint": "eslint src --ext .ts",
     "prepublishOnly": "pnpm run build"
   },
   "dependencies": {
+    "@opentelemetry/api": "^1.9.0",
     "@opentelemetry/context-zone": "^2.0.1",
     "@opentelemetry/core": "^2.0.1",
     "@opentelemetry/exporter-logs-otlp-http": "^0.203.0",
@@ -20,6 +35,7 @@
     "@opentelemetry/instrumentation": "^0.203.0",
     "@opentelemetry/instrumentation-document-load": "^0.48.0",
     "@opentelemetry/instrumentation-fetch": "^0.203.0",
+    "@opentelemetry/instrumentation-user-interaction": "^0.58.0",
     "@opentelemetry/instrumentation-xml-http-request": "^0.203.0",
     "@opentelemetry/resources": "^2.0.1",
     "@opentelemetry/sdk-trace-base": "^2.0.1",
@@ -27,27 +43,45 @@
     "@opentelemetry/semantic-conventions": "^1.36.0",
     "@rrweb/rrweb-plugin-console-record": "2.0.0-alpha.18",
     "rrweb": "2.0.0-alpha.4",
-    "uuid": "^11.1.0"
+    "web-vitals": "^4.2.0"
   },
   "files": [
     "dist"
   ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/monoscope-tech/monoscope-web.git"
+  },
   "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "provenance": true
   },
   "keywords": [],
   "author": "",
   "license": "MIT",
+  "peerDependencies": {
+    "react": ">=17"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    }
+  },
   "devDependencies": {
+    "@playwright/test": "^1.58.2",
     "@rollup/plugin-commonjs": "^25.0.0",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.0.0",
-    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-terser": "^1.0.0",
     "@rollup/plugin-typescript": "^11.0.0",
-    "@types/uuid": "^10.0.0",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@types/react": "^19.0.0",
     "buffer": "^5.5.0||^6.0.0",
+    "jsdom": "^29.0.1",
     "rollup": "^4.0.0",
     "tslib": "^2.8.1",
-    "typescript": "^5.0.0"
+    "typescript": "^5.0.0",
+    "vitest": "^4.1.1"
   }
 }