@monoscopetech/browser 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+import { MonoscopeReplay } from "./replay";
+import { MonoscopeConfig } from "./types";
+declare class Monoscope {
+    replay: MonoscopeReplay;
+    config: MonoscopeConfig;
+    sessionId: string;
+    constructor(config: MonoscopeConfig);
+}
+export default Monoscope;

package/dist/index.js

@@ -0,0 +1,29 @@
+import { MonoscopeReplay } from "./replay";
+import { configureOpenTelemetry } from "./tracing";
+import { v4 as uuidv4 } from "uuid";
+class Monoscope {
+    constructor(config) {
+        if (!config.projectId) {
+            throw new Error("MonoscopeConfig must include projectId");
+        }
+        if (!config.replayEndpoint) {
+            config.replayEndpoint = `https://app.apitoolkit.io/p/${config.projectId}/replay`;
+        }
+        if (!config.exporterEndpoint) {
+            config.exporterEndpoint = "http://otelcol.apitoolkit.io:4318";
+        }
+        const storedSessionId = sessionStorage.getItem("monoscope-session-id");
+        if (storedSessionId) {
+            this.sessionId = storedSessionId;
+        }
+        else {
+            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.replay.configure();
+    }
+}
+export default Monoscope;

package/dist/replay.d.ts

@@ -0,0 +1,9 @@
+import { MonoscopeConfig } from "./types";
+export declare class MonoscopeReplay {
+    events: any[];
+    config: MonoscopeConfig;
+    sessionId: string;
+    constructor(config: MonoscopeConfig, sessionId: string);
+    configure(): void;
+    save(): void;
+}

package/dist/replay.js

@@ -0,0 +1,40 @@
+import * as rrweb from "rrweb";
+export class MonoscopeReplay {
+    constructor(config, sessionId) {
+        this.events = [];
+        this.sessionId = sessionId;
+        this.config = config;
+        this.save = this.save.bind(this);
+        this.events = [];
+        this.configure = this.configure.bind(this);
+    }
+    configure() {
+        rrweb.record({
+            emit: (event) => {
+                this.events.push(event);
+            },
+        });
+        setInterval(this.save, 15 * 1000);
+    }
+    save() {
+        if (this.events.length === 0)
+            return;
+        let { replayEndpoint, projectId } = this.config;
+        if (!replayEndpoint) {
+            replayEndpoint = `https://app.apitoolkit.io/p/${projectId}/rrweb`;
+        }
+        const events = this.events;
+        this.events = [];
+        const body = JSON.stringify({ events, sessionId: this.sessionId });
+        fetch(replayEndpoint, {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+            },
+            body,
+        }).catch((error) => {
+            console.error("Failed to save replay events:", error);
+            this.events = [...events, ...this.events];
+        });
+    }
+}

package/dist/tracing.d.ts

@@ -0,0 +1,2 @@
+import { MonoscopeConfig } from "./types";
+export declare const configureOpenTelemetry: (config: MonoscopeConfig, sessionId: string) => void;

package/dist/tracing.js

@@ -0,0 +1,58 @@
+import { BatchSpanProcessor } from "@opentelemetry/sdk-trace-base";
+import { WebTracerProvider } from "@opentelemetry/sdk-trace-web";
+import { DocumentLoadInstrumentation } from "@opentelemetry/instrumentation-document-load";
+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 { 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) => {
+    //create a resource with service name and attributes
+    const { serviceName, resourceAttributes, instrumentations = [] } = config;
+    const SESSION_ID = sessionId;
+    const resource = resourceFromAttributes({
+        [ATTR_SERVICE_NAME]: serviceName,
+        "at-project-key": config.projectId,
+        ...(resourceAttributes || {}),
+    });
+    const otlpExporter = new OTLPTraceExporter({
+        url: config.exporterEndpoint || "http://otelcol.apitoolkit.io:4318", // HTTP endpoint (note the :4318 port)
+        headers: {},
+    });
+    const provider = new WebTracerProvider({
+        resource: resource,
+        spanProcessors: [new BatchSpanProcessor(otlpExporter)],
+    });
+    provider.register({
+        contextManager: new ZoneContextManager(),
+        propagator: new W3CTraceContextPropagator(),
+    });
+    registerInstrumentations({
+        tracerProvider: provider,
+        instrumentations: [
+            ...instrumentations,
+            new DocumentLoadInstrumentation({
+                applyCustomAttributesOnSpan: {
+                    documentLoad: (span) => {
+                        span.setAttribute("session.id", SESSION_ID);
+                    },
+                },
+            }),
+            new XMLHttpRequestInstrumentation({
+                propagateTraceHeaderCorsUrls: [/^http:\/\/localhost:3000/],
+                applyCustomAttributesOnSpan: (span, xhr) => {
+                    span.setAttribute("session.id", SESSION_ID);
+                },
+            }),
+            new FetchInstrumentation({
+                propagateTraceHeaderCorsUrls: [/^http:\/\/localhost:3000/],
+                applyCustomAttributesOnSpan: (span, request) => {
+                    span.setAttribute("session.id", SESSION_ID);
+                },
+            }),
+        ],
+    });
+};

package/dist/tsconfig.tsbuildinfo

@@ -0,0 +1 @@
+{"root":["../src/index.ts","../src/replay.ts","../src/tracing.ts","../src/types.ts"],"version":"5.8.3"}

package/dist/types.d.ts

@@ -0,0 +1,12 @@
+export type MonoscopeConfig = {
+    serviceName: string;
+    exporterEndpoint: string;
+    propagateTraceHeaderCorsUrls?: RegExp[];
+    projectId: string;
+    resourceAttributes?: Record<string, string>;
+    documentLoadAttributes?: (span: any) => void;
+    xhrAttributes?: (span: any, xhr: any) => void;
+    fetchAttributes?: (span: any, request: any) => void;
+    instrumentations?: any[];
+    replayEndpoint: string;
+};

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@monoscopetech/browser",
+  "version": "0.1.0",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "type": "module",
+  "dependencies": {
+    "@opentelemetry/context-zone": "^2.0.1",
+    "@opentelemetry/core": "^2.0.1",
+    "@opentelemetry/exporter-logs-otlp-http": "^0.203.0",
+    "@opentelemetry/exporter-metrics-otlp-http": "^0.203.0",
+    "@opentelemetry/exporter-trace-otlp-http": "^0.203.0",
+    "@opentelemetry/instrumentation": "^0.203.0",
+    "@opentelemetry/instrumentation-document-load": "^0.48.0",
+    "@opentelemetry/instrumentation-fetch": "^0.203.0",
+    "@opentelemetry/instrumentation-xml-http-request": "^0.203.0",
+    "@opentelemetry/resources": "^2.0.1",
+    "@opentelemetry/sdk-trace-base": "^2.0.1",
+    "@opentelemetry/sdk-trace-web": "^2.0.1",
+    "@opentelemetry/semantic-conventions": "^1.36.0",
+    "rrweb": "2.0.0-alpha.4",
+    "uuid": "^11.1.0"
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "MIT",
+  "devDependencies": {
+    "@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-typescript": "^11.0.0",
+    "@types/uuid": "^10.0.0",
+    "buffer": "^5.5.0||^6.0.0",
+    "rollup": "^4.0.0",
+    "tslib": "^2.8.1",
+    "typescript": "^5.0.0"
+  },
+  "scripts": {
+    "build": "rollup -c",
+    "lint": "eslint src --ext .ts"
+  }
+}