session-replay: add session replay package

examples/sdk/browser/package.json

@@ -41,6 +41,7 @@
     },
     "dependencies": {
         "@reduxjs/toolkit": "^1.9.5",
-        "@backtrace/browser": "^0.1.0"
+        "@backtrace/browser": "^0.2.0",
+        "@backtrace/session-replay": "^0.0.1"
     }
 }

examples/sdk/browser/src/index.ts

@@ -1,8 +1,9 @@
 import { BacktraceClient, BacktraceStringAttachment, createBacktraceReduxMiddleware } from '@backtrace/browser';
+import { BacktraceSessionReplayModule } from '@backtrace/session-replay';
 import { configureStore, createSlice } from '@reduxjs/toolkit';
 import { SUBMISSION_URL } from './consts';
 
-const client = BacktraceClient.initialize({
+const client = BacktraceClient.builder({
     url: SUBMISSION_URL,
     name: '@backtrace/browser-example',
     version: '0.0.1',
@@ -13,7 +14,13 @@ const client = BacktraceClient.initialize({
             prop2: 123,
         },
     },
-});
+})
+    .useModule(
+        new BacktraceSessionReplayModule({
+            maxEventCount: 100,
+        }),
+    )
+    .build();
 
 interface DemoState {
     count: number;

package.json

@@ -27,7 +27,8 @@
         "tools/rollup-plugin",
         "tools/webpack-plugin",
         "tools/vite-plugin",
-        "packages/electron"
+        "packages/electron",
+        "packages/session-replay"
     ],
     "repository": {
         "type": "git",

packages/sdk-core/src/builder/BacktraceCoreClientBuilder.ts

@@ -1,5 +1,6 @@
 import { BacktraceReportSubmission } from '../model/http/BacktraceReportSubmission';
 import { BacktraceRequestHandler } from '../model/http/BacktraceRequestHandler';
+import { BacktraceModule } from '../modules/BacktraceModule';
 import { BacktraceAttributeProvider } from '../modules/attribute/BacktraceAttributeProvider';
 import { BreadcrumbsEventSubscriber, BreadcrumbsStorage } from '../modules/breadcrumbs';
 import { BacktraceStackTraceConverter } from '../modules/converter';
@@ -81,4 +82,13 @@ export abstract class BacktraceCoreClientBuilder<S extends Partial<CoreClientSet
         this.clientSetup.uniqueMetricsQueue = queue;
         return this;
     }
+
+    public useModule(module: BacktraceModule) {
+        if (!this.clientSetup.modules) {
+            this.clientSetup.modules = [module];
+        } else {
+            this.clientSetup.modules.push(module);
+        }
+        return this;
+    }
 }

packages/sdk-core/src/dataStructures/index.ts

@@ -0,0 +1,2 @@
+export * from './OverwritingArray';
+export * from './OverwritingArrayIterator';

packages/sdk-core/src/index.ts

@@ -6,6 +6,7 @@ export { anySignal } from './common/AbortController';
 export * from './common/IdGenerator';
 export * from './common/TimeHelper';
 export * from './common/jsonEscaper';
+export * from './dataStructures';
 export * from './model/attachment';
 export * from './model/configuration/BacktraceConfiguration';
 export * from './model/configuration/BacktraceDatabaseConfiguration';

packages/session-replay/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Backtrace Labs
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/session-replay/package.json

@@ -0,0 +1,33 @@
+{
+    "name": "@backtrace/session-replay",
+    "version": "0.0.1",
+    "description": "Backtrace-JavaScript Session Replay module",
+    "main": "lib/index.js",
+    "types": "lib/index.d.ts",
+    "scripts": {
+        "build": "tsc",
+        "clean": "tsc -b --clean && rimraf \"lib\"",
+        "format": "prettier --write '**/*.ts'",
+        "lint": "eslint . --ext .ts",
+        "watch": "tsc -w"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/backtrace-labs/backtrace-javascript.git"
+    },
+    "author": "Backtrace <team@backtrace.io>",
+    "license": "MIT",
+    "bugs": {
+        "url": "https://github.com/backtrace-labs/backtrace-javascript/issues"
+    },
+    "files": [
+        "/lib"
+    ],
+    "homepage": "https://github.com/backtrace-labs/backtrace-javascript#readme",
+    "peerDependencies": {
+        "@backtrace/sdk-core": "^0.2.0"
+    },
+    "dependencies": {
+        "rrweb": "^2.0.0-alpha.4"
+    }
+}

packages/session-replay/src/BacktraceSessionRecorder.ts

@@ -0,0 +1,72 @@
+import { BacktraceAttachment } from '@backtrace/sdk-core';
+import { eventWithTime } from '@rrweb/types';
+import { record } from 'rrweb';
+import { BacktraceSessionRecorderOptions } from './options';
+
+export class BacktraceSessionRecorder implements BacktraceAttachment {
+    public readonly name = 'bt-session-replay-0';
+    public readonly type = 'dynamic';
+
+    private readonly _maxEventCount?: number;
+    private readonly _maxTime?: number;
+
+    private _previousEvents?: eventWithTime[] = [];
+    private _events?: eventWithTime[] = [];
+
+    private _stop?: () => void;
+
+    constructor(private readonly _options: BacktraceSessionRecorderOptions) {
+        this._events = [];
+        this._maxEventCount = !_options.disableMaxEventCount ? _options.maxEventCount ?? 100 : undefined;
+        this._maxTime = !_options.disableMaxTime ? _options.maxTime : undefined;
+    }
+
+    public start() {
+        this._stop = record({
+            ...this._options.advancedOptions,
+            sampling: {
+                mousemove: this._options.sampling?.mousemove,
+                mouseInteraction: this._options.sampling?.mouseInteraction,
+                input: this._options.sampling?.input,
+                media: this._options.sampling?.media,
+                scroll: this._options.sampling?.scroll,
+                ...this._options.advancedOptions,
+            },
+            emit: (event, isCheckout) => this.onEmit(event, isCheckout),
+            checkoutEveryNth: this._maxEventCount && Math.ceil(this._maxEventCount / 2),
+            checkoutEveryNms: this._maxTime && Math.ceil(this._maxTime / 2),
+        });
+    }
+
+    public stop() {
+        if (this._stop) {
+            this._stop();
+        }
+    }
+
+    public get(): string {
+        const events = [...(this._events ?? []), ...(this._previousEvents ?? [])];
+        return JSON.stringify(events);
+    }
+
+    private onEmit(event: eventWithTime, isCheckout?: boolean) {
+        if (isCheckout || !this._events) {
+            this._previousEvents = this._events;
+            this._events = [];
+        }
+
+        if (this._options.privacy?.inspect) {
+            const inspected = this._options.privacy.inspect(event);
+            if (!inspected) {
+                return;
+            }
+            event = inspected;
+        }
+
+        this._events.push(event);
+
+        if (this._options.advancedOptions?.emit) {
+            this._options.advancedOptions.emit(event as never, isCheckout);
+        }
+    }
+}

packages/session-replay/src/BacktraceSessionReplayModule.ts

@@ -0,0 +1,34 @@
+import { BacktraceModule, BacktraceModuleBindData } from '@backtrace/sdk-core';
+import { BacktraceSessionRecorder } from './BacktraceSessionRecorder';
+import { BacktraceSessionRecorderOptions } from './options';
+
+/**
+ * Adds session recorder module to `BacktraceClient`.
+ * 
+ * Add using `useModule` on `BacktraceClient` builder.
+ * @example
+   const client = BacktraceClient.builder({
+     ...
+   }).useModule(new BacktraceSessionReplayModule({
+     // options here
+   })).build();
+ */
+export class BacktraceSessionReplayModule implements BacktraceModule {
+    private readonly _recorder: BacktraceSessionRecorder;
+
+    constructor(options?: BacktraceSessionRecorderOptions) {
+        this._recorder = new BacktraceSessionRecorder(options ?? {});
+    }
+
+    public bind({ client }: BacktraceModuleBindData): void {
+        client.addAttachment(this._recorder);
+    }
+
+    public initialize(): void {
+        this._recorder.start();
+    }
+
+    public dispose(): void {
+        this._recorder.stop();
+    }
+}

packages/session-replay/src/index.ts

@@ -0,0 +1,2 @@
+export * from './BacktraceSessionRecorder';
+export * from './BacktraceSessionReplayModule';