@multiplayer-app/session-recorder-browser 2.0.81-beta.0 → 2.0.83-beta.0

package/dist/observable.d.ts

@@ -0,0 +1,9 @@
+export declare class Observable<N extends string> {
+    protected _observers: Map<N, Set<Function>>;
+    on(name: N, f: Function): void;
+    once(name: N, f: Function): void;
+    off(name: N, f: Function): void;
+    emit(name: N, args: any[]): void;
+    destroy(): void;
+}
+//# sourceMappingURL=observable.d.ts.map

package/dist/observable.js

@@ -0,0 +1,39 @@
+export class Observable {
+    constructor() {
+        this._observers = new Map();
+    }
+    on(name, f) {
+        let listeners = this._observers.get(name);
+        if (!listeners) {
+            listeners = new Set();
+            this._observers.set(name, listeners);
+        }
+        listeners.add(f);
+    }
+    once(name, f) {
+        const _f = (...args) => {
+            this.off(name, _f);
+            f(...args);
+        };
+        this.on(name, _f);
+    }
+    off(name, f) {
+        const observers = this._observers.get(name);
+        if (observers) {
+            observers.delete(f);
+            if (observers.size === 0) {
+                this._observers.delete(name);
+            }
+        }
+    }
+    emit(name, args) {
+        const listeners = this._observers.get(name);
+        if (listeners) {
+            Array.from(listeners).forEach((f) => f(...args));
+        }
+    }
+    destroy() {
+        this._observers.clear();
+    }
+}
+//# sourceMappingURL=observable.js.map

package/dist/otel/instrumentations/index.d.ts

@@ -1,3 +1,6 @@
+import { XMLHttpRequestInstrumentation } from '@opentelemetry/instrumentation-xml-http-request';
+import { FetchInstrumentation } from '@opentelemetry/instrumentation-fetch';
+import { UserInteractionInstrumentation } from '@opentelemetry/instrumentation-user-interaction';
 import { TracerBrowserConfig } from '../../types';
-export declare const getInstrumentations: (config: TracerBrowserConfig) => import("@opentelemetry/instrumentation").Instrumentation<import("@opentelemetry/instrumentation").InstrumentationConfig>[][];
+export declare const getInstrumentations: (config: TracerBrowserConfig) => (XMLHttpRequestInstrumentation | FetchInstrumentation | UserInteractionInstrumentation)[];
 //# sourceMappingURL=index.d.ts.map

package/dist/otel/instrumentations/index.js

@@ -1,102 +1,102 @@
-import { getWebAutoInstrumentations } from '@opentelemetry/auto-instrumentations-web';
+import { XMLHttpRequestInstrumentation } from '@opentelemetry/instrumentation-xml-http-request';
+import { FetchInstrumentation } from '@opentelemetry/instrumentation-fetch';
+import { UserInteractionInstrumentation } from '@opentelemetry/instrumentation-user-interaction';
 import { headersToObject, processHttpPayload, extractResponseBody, getElementInnerText, getElementTextContent, } from '../helpers';
 import { OTEL_IGNORE_URLS } from '../../config';
 export const getInstrumentations = (config) => {
     return [
-        getWebAutoInstrumentations({
-            '@opentelemetry/instrumentation-xml-http-request': {
-                clearTimingResources: true,
-                ignoreUrls: [...OTEL_IGNORE_URLS, ...(config.ignoreUrls || [])],
-                propagateTraceHeaderCorsUrls: config.propagateTraceHeaderCorsUrls,
-                applyCustomAttributesOnSpan: (span, xhr) => {
-                    if (!config)
+        new XMLHttpRequestInstrumentation({
+            clearTimingResources: true,
+            ignoreUrls: [...OTEL_IGNORE_URLS, ...(config.ignoreUrls || [])],
+            propagateTraceHeaderCorsUrls: config.propagateTraceHeaderCorsUrls,
+            applyCustomAttributesOnSpan: (span, xhr) => {
+                if (!config)
+                    return;
+                const { captureBody, captureHeaders } = config;
+                try {
+                    if (!captureBody && !captureHeaders) {
                         return;
-                    const { captureBody, captureHeaders } = config;
-                    try {
-                        if (!captureBody && !captureHeaders) {
-                            return;
-                        }
-                        // @ts-ignore
-                        const networkRequest = xhr.networkRequest;
-                        const requestBody = networkRequest.requestBody;
-                        const responseBody = networkRequest.responseBody;
-                        const requestHeaders = networkRequest.requestHeaders || {};
-                        const responseHeaders = networkRequest.responseHeaders || {};
-                        const payload = {
-                            requestBody,
-                            responseBody,
-                            requestHeaders,
-                            responseHeaders,
-                        };
-                        processHttpPayload(payload, config, span);
-                    }
-                    catch (error) {
-                        // eslint-disable-next-line
-                        console.error('[MULTIPLAYER_SESSION_RECORDER] Failed to capture xml-http payload', error);
                     }
-                },
+                    // @ts-ignore
+                    const networkRequest = xhr.networkRequest;
+                    const requestBody = networkRequest.requestBody;
+                    const responseBody = networkRequest.responseBody;
+                    const requestHeaders = networkRequest.requestHeaders || {};
+                    const responseHeaders = networkRequest.responseHeaders || {};
+                    const payload = {
+                        requestBody,
+                        responseBody,
+                        requestHeaders,
+                        responseHeaders,
+                    };
+                    processHttpPayload(payload, config, span);
+                }
+                catch (error) {
+                    // eslint-disable-next-line
+                    console.error('[MULTIPLAYER_SESSION_RECORDER] Failed to capture xml-http payload', error);
+                }
             },
-            '@opentelemetry/instrumentation-fetch': {
-                clearTimingResources: true,
-                ignoreUrls: [...OTEL_IGNORE_URLS, ...(config.ignoreUrls || [])],
-                propagateTraceHeaderCorsUrls: config.propagateTraceHeaderCorsUrls,
-                applyCustomAttributesOnSpan: async (span, request, response) => {
-                    if (!config)
+        }),
+        new FetchInstrumentation({
+            clearTimingResources: true,
+            ignoreUrls: [...OTEL_IGNORE_URLS, ...(config.ignoreUrls || [])],
+            propagateTraceHeaderCorsUrls: config.propagateTraceHeaderCorsUrls,
+            applyCustomAttributesOnSpan: async (span, request, response) => {
+                if (!config)
+                    return;
+                const { captureBody, captureHeaders } = config;
+                try {
+                    if (!captureBody && !captureHeaders) {
                         return;
-                    const { captureBody, captureHeaders } = config;
-                    try {
-                        if (!captureBody && !captureHeaders) {
-                            return;
-                        }
-                        // Try to get data from our fetch wrapper first
-                        // @ts-ignore
-                        const networkRequest = response === null || response === void 0 ? void 0 : response.networkRequest;
-                        let requestBody = null;
-                        let responseBody = null;
-                        let requestHeaders = {};
-                        let responseHeaders = {};
-                        if (networkRequest) {
-                            // Use data captured by our fetch wrapper
-                            requestBody = networkRequest.requestBody;
-                            responseBody = networkRequest.responseBody;
-                            requestHeaders = networkRequest.requestHeaders || {};
-                            responseHeaders = networkRequest.responseHeaders || {};
-                        }
-                        else {
-                            // Fallback to original OpenTelemetry approach
-                            requestBody = request.body;
-                            requestHeaders = headersToObject(request.headers);
-                            responseHeaders = headersToObject(response instanceof Response ? response.headers : undefined);
-                            if (response instanceof Response && response.body) {
-                                responseBody = await extractResponseBody(response);
-                            }
-                        }
-                        const payload = {
-                            requestBody,
-                            responseBody,
-                            requestHeaders,
-                            responseHeaders,
-                        };
-                        processHttpPayload(payload, config, span);
                     }
-                    catch (error) {
-                        // eslint-disable-next-line
-                        console.error('[MULTIPLAYER_SESSION_RECORDER] Failed to capture fetch payload', error);
+                    // Try to get data from our fetch wrapper first
+                    // @ts-ignore
+                    const networkRequest = response === null || response === void 0 ? void 0 : response.networkRequest;
+                    let requestBody = null;
+                    let responseBody = null;
+                    let requestHeaders = {};
+                    let responseHeaders = {};
+                    if (networkRequest) {
+                        // Use data captured by our fetch wrapper
+                        requestBody = networkRequest.requestBody;
+                        responseBody = networkRequest.responseBody;
+                        requestHeaders = networkRequest.requestHeaders || {};
+                        responseHeaders = networkRequest.responseHeaders || {};
                     }
-                },
-            },
-            '@opentelemetry/instrumentation-user-interaction': {
-                shouldPreventSpanCreation: (_event, element, span) => {
-                    if (span['parentSpanContext']) {
-                        return true;
+                    else {
+                        // Fallback to original OpenTelemetry approach
+                        requestBody = request.body;
+                        requestHeaders = headersToObject(request.headers);
+                        responseHeaders = headersToObject(response instanceof Response ? response.headers : undefined);
+                        if (response instanceof Response && response.body) {
+                            responseBody = await extractResponseBody(response);
+                        }
                     }
-                    span.setAttribute('target.innerText', getElementInnerText(element));
-                    span.setAttribute('target.textContent', getElementTextContent(element));
-                    Array.from(element.attributes).forEach((attribute) => {
-                        span.setAttribute(`target.attribute.${attribute.name}`, attribute.value);
-                    });
-                    return false;
-                },
+                    const payload = {
+                        requestBody,
+                        responseBody,
+                        requestHeaders,
+                        responseHeaders,
+                    };
+                    processHttpPayload(payload, config, span);
+                }
+                catch (error) {
+                    // eslint-disable-next-line
+                    console.error('[MULTIPLAYER_SESSION_RECORDER] Failed to capture fetch payload', error);
+                }
+            },
+        }),
+        new UserInteractionInstrumentation({
+            shouldPreventSpanCreation: (_event, element, span) => {
+                if (span['parentSpanContext']) {
+                    return true;
+                }
+                span.setAttribute('target.innerText', getElementInnerText(element));
+                span.setAttribute('target.textContent', getElementTextContent(element));
+                Array.from(element.attributes).forEach((attribute) => {
+                    span.setAttribute(`target.attribute.${attribute.name}`, attribute.value);
+                });
+                return false;
             },
         }),
     ];

package/dist/services/socket.service.d.ts

@@ -1,4 +1,4 @@
-import { Observable } from 'lib0/observable';
+import { Observable } from '../observable';
 import { SESSION_AUTO_CREATED, SESSION_STOPPED_EVENT, REMOTE_SESSION_RECORDING_START, REMOTE_SESSION_RECORDING_STOP, SESSION_SAVE_BUFFER_EVENT } from '../config';
 import { type ISession, type IUserAttributes } from '@multiplayer-app/session-recorder-common';
 export type SocketServiceEvents = typeof SESSION_STOPPED_EVENT | typeof SESSION_AUTO_CREATED | typeof REMOTE_SESSION_RECORDING_START | typeof REMOTE_SESSION_RECORDING_STOP | typeof SESSION_SAVE_BUFFER_EVENT;

package/dist/services/socket.service.js

@@ -1,5 +1,4 @@
-import io from 'socket.io-client';
-import { Observable } from 'lib0/observable';
+import { Observable } from '../observable';
 import messagingService from '../services/messaging.service';
 import { SESSION_ADD_EVENT, SESSION_AUTO_CREATED, SESSION_STOPPED_EVENT, SESSION_SUBSCRIBE_EVENT, SESSION_UNSUBSCRIBE_EVENT, SOCKET_SET_USER_EVENT, REMOTE_SESSION_RECORDING_START, REMOTE_SESSION_RECORDING_STOP, SESSION_STARTED_EVENT, SESSION_SAVE_BUFFER_EVENT, } from '../config';
 import { ATTR_MULTIPLAYER_SESSION_CLIENT_ID, } from '@multiplayer-app/session-recorder-common';
@@ -60,12 +59,13 @@ export class SocketService extends Observable {
             }
         }
     }
-    _initConnection() {
+    async _initConnection() {
         if (this.isConnecting || this.isConnected || !this.isInitialized)
             return;
         this.attempts++;
         this.isConnecting = true;
         this.usePostMessage = false;
+        const { default: io } = await import(/* webpackChunkName: "socket-io" */ 'socket.io-client');
         this.socket = io(this.options.socketUrl, {
             path: '/v0/radar/ws',
             auth: {

package/dist/session-recorder.d.ts

@@ -1,4 +1,4 @@
-import { Observable } from 'lib0/observable';
+import { Observable } from './observable';
 import { SessionType, type ISession, type IUserAttributes } from '@multiplayer-app/session-recorder-common';
 import { SessionState, SessionRecorderOptions, SessionRecorderEvents } from './types';
 import { ISessionRecorder } from './types';

package/dist/session-recorder.js

@@ -1,4 +1,4 @@
-import { Observable } from 'lib0/observable';
+import { Observable } from './observable';
 import { SessionType } from '@multiplayer-app/session-recorder-common';
 import { TracerBrowserSDK } from './otel';
 import { RecorderBrowserSDK } from './rrweb';

package/dist/sessionWidget/index.d.ts

@@ -1,4 +1,4 @@
-import { Observable } from 'lib0/observable';
+import { Observable } from '../observable';
 import { SessionWidgetConfig, SessionState, ToastConfig } from '../types';
 import { ButtonState, ContinuousRecordingSaveButtonState } from './buttonStateConfigs';
 import './styles/button.scss';

package/dist/sessionWidget/index.js

@@ -1,4 +1,4 @@
-import { Observable } from 'lib0/observable';
+import { Observable } from '../observable';
 import { insertTrustedHTML, injectStylesIntoShadowRoot, formatTimeForSessionTimer } from '../utils';
 import { SessionState } from '../types';
 import { POPOVER_WIDTH, NON_DRAGGABLE_OFFSET, POPOVER_DISTANCE_FROM_BUTTON, } from './constants';

package/dist/socket-io.index.js

@@ -0,0 +1,22 @@
+import * as __WEBPACK_EXTERNAL_MODULE_socket_io_client_a48daf0e__ from "socket.io-client";
+export const __webpack_esm_id__ = "socket-io";
+export const __webpack_esm_ids__ = ["socket-io"];
+export const __webpack_esm_modules__ = {
+
+/***/ "socket.io-client"
+/*!***********************************!*\
+  !*** external "socket.io-client" ***!
+  \***********************************/
+(module, __unused_webpack_exports, __webpack_require__) {
+
+var x = (y) => {
+	var x = {}; __webpack_require__.d(x, y); return x
+} 
+var y = (x) => (() => (x))
+module.exports = x({ ["default"]: () => (__WEBPACK_EXTERNAL_MODULE_socket_io_client_a48daf0e__["default"]) });
+
+/***/ }
+
+};
+
+//# sourceMappingURL=socket-io.index.js.map

package/dist/types/session-recorder.d.ts

@@ -4,7 +4,7 @@ import { PropagateTraceHeaderCorsUrls } from '@opentelemetry/sdk-trace-web';
 import type { MaskTextFn, MaskInputFn, MaskInputOptions } from 'rrweb-snapshot';
 import type { maskTextClass } from '@rrweb/types';
 import { LogData } from '@rrweb/rrweb-plugin-console-record';
-import { Observable } from 'lib0/observable';
+import { Observable } from '../observable';
 import type { NavigationRecorderPublicApi } from '../navigation';
 export declare enum WidgetButtonPlacement {
     topLeft = "top-left",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiplayer-app/session-recorder-browser",
-  "version": "2.0.81-beta.0",
+  "version": "2.0.83-beta.0",
   "description": "Multiplayer Fullstack Session Recorder for Browser",
   "author": {
     "name": "Multiplayer Software, Inc.",
@@ -28,9 +28,7 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js",
       "require": "./dist/index.umd.js"
-    },
-    "./browser": "./dist/browser/index.js",
-    "./exporters": "./dist/exporters/index.js"
+    }
   },
   "engines": {
     "node": ">=18",
@@ -50,8 +48,12 @@
     "lint": "eslint 'src/**/*.ts' --config eslint.config.js",
     "preversion": "npm run lint",
     "postversion:skip": "git push && git push --tags",
-    "build": "rm -rf dist tsconfig.tsbuildinfo && tsc && webpack",
-    "prepublishOnly": "npm run build"
+    "build": "rm -rf dist tsconfig.tsbuildinfo && tsc && webpack --config-name esm --config-name umd && node scripts/sync-exports.js",
+    "build:browser": "webpack --config-name browser && node scripts/sync-exports.js",
+    "build:exporters": "webpack --config-name exporters && node scripts/sync-exports.js",
+    "build:extras": "webpack --config-name browser --config-name exporters && node scripts/sync-exports.js",
+    "build:all": "rm -rf dist tsconfig.tsbuildinfo && tsc && webpack && node scripts/sync-exports.js",
+    "prepublishOnly": "npm run build:all"
   },
   "devDependencies": {
     "@types/node": "^22.0.0",
@@ -71,12 +73,13 @@
     "webpack-cli": "5.1.4"
   },
   "dependencies": {
-    "@multiplayer-app/session-recorder-common": "2.0.81-beta.0",
-    "@opentelemetry/auto-instrumentations-web": "0.49.0",
-    "@opentelemetry/context-zone": "2.0.1",
+    "@multiplayer-app/session-recorder-common": "2.0.83-beta.0",
     "@opentelemetry/core": "2.0.1",
     "@opentelemetry/exporter-trace-otlp-http": "0.203.0",
     "@opentelemetry/instrumentation": "0.203.0",
+    "@opentelemetry/instrumentation-fetch": "0.203.0",
+    "@opentelemetry/instrumentation-user-interaction": "0.48.1",
+    "@opentelemetry/instrumentation-xml-http-request": "0.203.0",
     "@opentelemetry/otlp-exporter-base": "0.203.0",
     "@opentelemetry/otlp-transformer": "0.203.0",
     "@opentelemetry/resources": "2.0.1",
@@ -86,7 +89,6 @@
     "@rrweb/packer": "2.0.0-alpha.20",
     "@rrweb/rrweb-plugin-console-record": "2.0.0-alpha.20",
     "dompurify": "^3.4.2",
-    "lib0": "0.2.82",
     "rrweb": "2.0.0-alpha.20",
     "socket.io-client": "4.7.5",
     "to-json-schema": "^0.2.5"