@monoscopetech/browser 0.3.2 → 0.4.2

package/dist/index.d.ts

@@ -1,10 +1,13 @@
 import { MonoscopeReplay } from "./replay";
-import { MonoscopeConfig } from "./types";
+import { OpenTelemetryManager } from "./tracing";
+import { MonoscopeConfig, MonoscopeUser } from "./types";
 declare class Monoscope {
     replay: MonoscopeReplay;
     config: MonoscopeConfig;
+    otel: OpenTelemetryManager;
     sessionId: string;
     constructor(config: MonoscopeConfig);
     getSessionId(): string;
+    setUser(u: MonoscopeUser): void;
 }
 export default Monoscope;

package/dist/index.js

@@ -1,5 +1,5 @@
 import { MonoscopeReplay } from "./replay";
-import { configureOpenTelemetry } from "./tracing";
+import { OpenTelemetryManager } from "./tracing";
 import { v4 as uuidv4 } from "uuid";
 class Monoscope {
     constructor(config) {
@@ -14,13 +14,18 @@ class Monoscope {
             this.sessionId = uuidv4();
             sessionStorage.setItem("monoscope-session-id", this.sessionId);
         }
-        configureOpenTelemetry(config, this.sessionId);
         this.config = config;
         this.replay = new MonoscopeReplay(config, this.sessionId);
+        this.otel = new OpenTelemetryManager(config, this.sessionId);
+        this.otel.configure();
         this.replay.configure();
+        window.monoscope = this;
     }
     getSessionId() {
         return this.sessionId;
     }
+    setUser(u) {
+        this.otel.setUser(u);
+    }
 }
 export default Monoscope;

package/dist/replay.js

@@ -1,3 +1,4 @@
+import { getRecordConsolePlugin } from "@rrweb/rrweb-plugin-console-record";
 import * as rrweb from "rrweb";
 export class MonoscopeReplay {
     constructor(config, sessionId) {
@@ -14,6 +15,17 @@ export class MonoscopeReplay {
             emit: (event) => {
                 this.events.push(event);
             },
+            plugins: [
+                getRecordConsolePlugin({
+                    level: ["info", "log", "warn", "error"],
+                    lengthThreshold: 10000,
+                    stringifyOptions: {
+                        stringLengthLimit: 1000,
+                        numOfKeysLimit: 100,
+                        depthOfLimit: 1,
+                    },
+                }),
+            ],
         });
         setInterval(this.save, 15 * 1000);
     }
@@ -29,7 +41,11 @@ export class MonoscopeReplay {
         }
         const events = this.events;
         this.events = [];
-        const body = JSON.stringify({ events, sessionId: this.sessionId });
+        const body = JSON.stringify({
+            events,
+            sessionId: this.sessionId,
+            timestamp: new Date().toISOString(),
+        });
         fetch(replayEventsBaseUrl, {
             mode: "no-cors",
             method: "POST",

package/dist/tracing.d.ts

@@ -1,2 +1,12 @@
-import { MonoscopeConfig } from "./types";
-export declare const configureOpenTelemetry: (config: MonoscopeConfig, sessionId: string) => void;
+import { MonoscopeConfig, MonoscopeUser } from "./types";
+export declare class OpenTelemetryManager {
+    private config;
+    private sessionId;
+    private provider;
+    constructor(config: MonoscopeConfig, sessionId: string);
+    private createProvider;
+    configure(): void;
+    private setUserAttributes;
+    shutdown(): Promise<void>;
+    setUser(newConfig: MonoscopeUser): void;
+}

package/dist/tracing.js

@@ -9,62 +9,93 @@ 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";
-export const configureOpenTelemetry = (config, sessionId) => {
-    const { serviceName, resourceAttributes, instrumentations = [], propagateTraceHeaderCorsUrls, } = config;
-    const SESSION_ID = sessionId;
-    const resource = resourceFromAttributes({
-        [ATTR_SERVICE_NAME]: serviceName,
-        "at-project-id": config.projectId,
-        ...(resourceAttributes || {}),
-    });
-    const otlpExporter = new OTLPTraceExporter({
-        url: config.exporterEndpoint || "http://otelcol.apitoolkit.io:4318/v1/traces",
-        headers: {},
-    });
-    const provider = new WebTracerProvider({
-        resource: resource,
-        spanProcessors: [new BatchSpanProcessor(otlpExporter)],
-    });
-    provider.register({
-        contextManager: new ZoneContextManager(),
-        propagator: new W3CTraceContextPropagator(),
-    });
-    const headerUrls = propagateTraceHeaderCorsUrls || [/^https?:\/\/.*/];
-    const ignoreUrls = [
-        /^https?:\/\/(?:[^\/]+\.)?apitoolkit\.io\//,
-        /^https?:\/\/(?:[^\/]+\.)?monoscope\.tech\//,
-    ];
-    registerInstrumentations({
-        tracerProvider: provider,
-        instrumentations: [
-            ...instrumentations,
-            new DocumentLoadInstrumentation({
-                applyCustomAttributesOnSpan: {
-                    documentLoad: (span) => {
-                        span.setAttribute("session.id", SESSION_ID);
+export class OpenTelemetryManager {
+    constructor(config, sessionId) {
+        this.config = config;
+        this.sessionId = sessionId;
+        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 || "http://otelcol.apitoolkit.io:4318/v1/traces",
+            headers: {},
+        });
+        return new WebTracerProvider({
+            resource,
+            spanProcessors: [new BatchSpanProcessor(otlpExporter)],
+        });
+    }
+    configure() {
+        this.provider.register({
+            contextManager: new ZoneContextManager(),
+            propagator: new W3CTraceContextPropagator(),
+        });
+        const headerUrls = this.config.propagateTraceHeaderCorsUrls || [
+            /^https?:\/\/.*/,
+        ];
+        const ignoreUrls = [
+            /^https?:\/\/(?:[^\/]+\.)?apitoolkit\.io\//,
+            /^https?:\/\/(?:[^\/]+\.)?monoscope\.tech\//,
+        ];
+        registerInstrumentations({
+            tracerProvider: this.provider,
+            instrumentations: [
+                ...(this.config.instrumentations || []),
+                new DocumentLoadInstrumentation({
+                    applyCustomAttributesOnSpan: {
+                        documentLoad: (span) => {
+                            span.setAttribute("session.id", this.sessionId);
+                            this.setUserAttributes(span);
+                        },
+                        documentFetch: (span) => {
+                            span.setAttribute("session.id", this.sessionId);
+                            this.setUserAttributes(span);
+                        },
+                        resourceFetch: (span) => {
+                            span.setAttribute("session.id", this.sessionId);
+                            this.setUserAttributes(span);
+                        },
                     },
-                    documentFetch: (span) => {
-                        span.setAttribute("session.id", SESSION_ID);
+                }),
+                new XMLHttpRequestInstrumentation({
+                    propagateTraceHeaderCorsUrls: headerUrls,
+                    ignoreUrls,
+                    applyCustomAttributesOnSpan: (span) => {
+                        span.setAttribute("session.id", this.sessionId);
+                        this.setUserAttributes(span);
                     },
-                    resourceFetch: (span) => {
-                        span.setAttribute("session.id", SESSION_ID);
+                }),
+                new FetchInstrumentation({
+                    propagateTraceHeaderCorsUrls: headerUrls,
+                    ignoreUrls,
+                    applyCustomAttributesOnSpan: (span) => {
+                        span.setAttribute("session.id", this.sessionId);
+                        this.setUserAttributes(span);
                     },
-                },
-            }),
-            new XMLHttpRequestInstrumentation({
-                propagateTraceHeaderCorsUrls: headerUrls,
-                ignoreUrls,
-                applyCustomAttributesOnSpan: (span, xhr) => {
-                    span.setAttribute("session.id", SESSION_ID);
-                },
-            }),
-            new FetchInstrumentation({
-                propagateTraceHeaderCorsUrls: headerUrls,
-                ignoreUrls,
-                applyCustomAttributesOnSpan: (span, request) => {
-                    span.setAttribute("session.id", SESSION_ID);
-                },
-            }),
-        ],
-    });
-};
+                }),
+            ],
+        });
+    }
+    setUserAttributes(span) {
+        if (this.config.user) {
+            for (let k in this.config.user) {
+                span.setAttribute(`user.${k}`, this.config.user[k]);
+            }
+        }
+    }
+    async shutdown() {
+        await this.provider.shutdown();
+    }
+    setUser(newConfig) {
+        this.config = {
+            ...this.config,
+            user: { ...this.config.user, ...newConfig },
+        };
+    }
+}

package/dist/types.d.ts

@@ -1,3 +1,4 @@
+import Monoscope from ".";
 export type MonoscopeConfig = {
     serviceName: string;
     exporterEndpoint?: string;
@@ -6,4 +7,17 @@ export type MonoscopeConfig = {
     resourceAttributes?: Record<string, string>;
     instrumentations?: any[];
     replayEventsBaseUrl?: string;
+    user?: MonoscopeUser;
 };
+export type MonoscopeUser = {
+    email?: string;
+    fullName?: string;
+    name?: string;
+    id?: string;
+    roles?: string[];
+} & Record<string, string>;
+declare global {
+    interface Window {
+        monoscope: Monoscope;
+    }
+}

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@monoscopetech/browser",
-  "version": "0.3.2",
+  "version": "0.4.2",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "type": "module",
-  "unpkg": "dis/monoscopetech-browser.umd.js",
+  "unpkg": "dist/monoscopetech-browser.umd.js",
   "dependencies": {
     "@opentelemetry/context-zone": "^2.0.1",
     "@opentelemetry/core": "^2.0.1",
@@ -19,6 +19,7 @@
     "@opentelemetry/sdk-trace-base": "^2.0.1",
     "@opentelemetry/sdk-trace-web": "^2.0.1",
     "@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"
   },
@@ -45,6 +46,7 @@
   },
   "scripts": {
     "build": "rollup -c",
-    "lint": "eslint src --ext .ts"
+    "lint": "eslint src --ext .ts",
+    "prePublishOnly": "npx tsc --build"
   }
 }