@statsig/session-replay 0.0.1-beta.23

package/README.md

@@ -0,0 +1,11 @@
+# session-replay
+
+This library was generated with [Nx](https://nx.dev).
+
+## Building
+
+Run `nx build session-replay` to build the library.
+
+## Running unit tests
+
+Run `nx test session-replay` to execute the unit tests via [Jest](https://jestjs.io).

package/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "@statsig/session-replay",
+  "version": "0.0.1-beta.23",
+  "dependencies": {
+    "rrweb": "2.0.0-alpha.12",
+    "@statsig/client-core": "0.0.1-beta.23"
+  },
+  "devDependencies": {
+    "@rrweb/types": "2.0.0-alpha.12"
+  },
+  "type": "commonjs",
+  "main": "./src/index.js",
+  "typings": "./src/index.d.ts"
+}

package/src/SessionReplay.d.ts

@@ -0,0 +1,12 @@
+import { PrecomputedEvaluationsInterface } from '@statsig/client-core';
+export declare class SessionReplay {
+    private _client;
+    private _replayer;
+    private _sessionData;
+    private _events;
+    constructor(_client: PrecomputedEvaluationsInterface);
+    private _onRecordingEvent;
+    private _attemptToStartRecording;
+    private _shutdown;
+    private _flush;
+}

package/src/SessionReplay.js

@@ -0,0 +1,69 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SessionReplay = void 0;
+const client_core_1 = require("@statsig/client-core");
+const SessionReplayClient_1 = require("./SessionReplayClient");
+const MAX_REPLAY_PAYLOAD_BYTES = 2048;
+class SessionReplay {
+    constructor(_client) {
+        this._client = _client;
+        this._sessionData = null;
+        this._events = [];
+        this._replayer = new SessionReplayClient_1.SessionReplayClient();
+        this._client.on('pre_shutdown', () => this._shutdown());
+        this._client.on('values_updated', () => this._attemptToStartRecording());
+        this._attemptToStartRecording();
+    }
+    _onRecordingEvent(event, data) {
+        this._sessionData = data;
+        this._events.push(event);
+        const payload = JSON.stringify(this._events);
+        if (payload.length > MAX_REPLAY_PAYLOAD_BYTES) {
+            this._flush(payload, data);
+        }
+    }
+    _attemptToStartRecording() {
+        var _a;
+        const values = this._client.getContext().values;
+        if ((values === null || values === void 0 ? void 0 : values.can_record_session) !== true) {
+            this._shutdown();
+            return;
+        }
+        const sampling = (_a = values.session_recording_rate) !== null && _a !== void 0 ? _a : 0;
+        if (Math.random() >= sampling) {
+            this._shutdown();
+            return;
+        }
+        client_core_1.StatsigMetadataProvider.add({ isRecordingSession: 'true' });
+        this._replayer.record((e, d) => this._onRecordingEvent(e, d));
+    }
+    _shutdown() {
+        this._replayer.stop();
+        client_core_1.StatsigMetadataProvider.add({ isRecordingSession: 'false' });
+        if (this._events.length === 0 || this._sessionData == null) {
+            return;
+        }
+        const payload = JSON.stringify(this._events);
+        this._flush(payload, this._sessionData);
+    }
+    _flush(payload, data) {
+        // prevent blowing up the log queue
+        this._client.flush().catch((err) => {
+            client_core_1.Log.error(err);
+        });
+        const { sdkVersion } = client_core_1.StatsigMetadataProvider.get();
+        this._client.logEvent({
+            eventName: 'statsig::session_recording',
+            value: this._client.getContext().sessionID,
+            metadata: {
+                session_start_ts: String(data.startTime),
+                session_end_ts: String(data.endTime),
+                clicks_captured_cumulative: String(data.clickCount),
+                rrweb_events: payload,
+                session_replay_sdk_version: sdkVersion,
+            },
+        });
+        this._events = [];
+    }
+}
+exports.SessionReplay = SessionReplay;

package/src/SessionReplayClient.d.ts

@@ -0,0 +1,17 @@
+import { eventWithTime } from '@rrweb/types';
+import { Flatten } from '@statsig/client-core';
+export type ReplayEvent = Flatten<eventWithTime>;
+export type ReplaySessionData = {
+    startTime: number;
+    endTime: number;
+    clickCount: number;
+};
+export declare class SessionReplayClient {
+    private _stopFn;
+    private _stopCallback?;
+    private _startTimestamp;
+    private _endTimestamp;
+    private _clickCount;
+    record(callback: (latest: ReplayEvent, data: ReplaySessionData) => void, stopCallback?: () => void): void;
+    stop(): void;
+}

package/src/SessionReplayClient.js

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SessionReplayClient = void 0;
+const rrweb_1 = require("rrweb");
+const TIMEOUT_MS = 1000 * 60 * 30;
+class SessionReplayClient {
+    constructor() {
+        this._startTimestamp = null;
+        this._endTimestamp = null;
+        this._clickCount = 0;
+    }
+    record(callback, stopCallback) {
+        if (typeof window === 'undefined') {
+            return;
+        }
+        // Always reset session id and tracking fields for a new recording
+        this._startTimestamp = null;
+        this._endTimestamp = null;
+        this._clickCount = 0;
+        this._stopCallback = stopCallback;
+        if (this._stopFn) {
+            return;
+        }
+        const emit = (event) => {
+            var _a, _b;
+            // Reset start only for the first event
+            (_a = this._startTimestamp) !== null && _a !== void 0 ? _a : (this._startTimestamp = event.timestamp);
+            // Always keep a running end timestamp
+            this._endTimestamp = event.timestamp;
+            // Count clicks only for events representing a click
+            if (_isClickEvent(event)) {
+                this._clickCount++;
+            }
+            callback(event, {
+                startTime: this._startTimestamp,
+                endTime: this._endTimestamp,
+                clickCount: this._clickCount,
+            });
+            if (this._endTimestamp - this._startTimestamp > TIMEOUT_MS) {
+                (_b = this._stopFn) === null || _b === void 0 ? void 0 : _b.call(this);
+                if (this._stopCallback) {
+                    this._stopCallback();
+                }
+            }
+        };
+        this._stopFn = (0, rrweb_1.record)({ emit });
+    }
+    stop() {
+        if (this._stopFn) {
+            this._stopFn();
+            this._stopFn = undefined;
+        }
+    }
+}
+exports.SessionReplayClient = SessionReplayClient;
+function _isClickEvent(event) {
+    return (event.type === rrweb_1.EventType.IncrementalSnapshot &&
+        event.data.source === rrweb_1.IncrementalSource.MouseInteraction &&
+        event.data.type === rrweb_1.MouseInteractions.Click);
+}

package/src/index.d.ts

@@ -0,0 +1,4 @@
+import { SessionReplay } from './SessionReplay';
+import { SessionReplayClient } from './SessionReplayClient';
+export type { ReplaySessionData as ReplayData, ReplayEvent, } from './SessionReplayClient';
+export { SessionReplayClient, SessionReplay };

package/src/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SessionReplay = exports.SessionReplayClient = void 0;
+const SessionReplay_1 = require("./SessionReplay");
+Object.defineProperty(exports, "SessionReplay", { enumerable: true, get: function () { return SessionReplay_1.SessionReplay; } });
+const SessionReplayClient_1 = require("./SessionReplayClient");
+Object.defineProperty(exports, "SessionReplayClient", { enumerable: true, get: function () { return SessionReplayClient_1.SessionReplayClient; } });
+__STATSIG__ = Object.assign(Object.assign({}, (__STATSIG__ !== null && __STATSIG__ !== void 0 ? __STATSIG__ : {})), { SessionReplayClient: SessionReplayClient_1.SessionReplayClient,
+    SessionReplay: SessionReplay_1.SessionReplay });