@statsig/session-replay 3.16.1 → 3.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@statsig/session-replay",
-  "version": "3.16.1",
+  "version": "3.17.0",
   "license": "ISC",
   "homepage": "https://github.com/statsig-io/js-client-monorepo",
   "repository": {
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "rrweb": "2.0.0-alpha.14",
-    "@statsig/client-core": "3.16.1"
+    "@statsig/client-core": "3.17.0"
   },
   "devDependencies": {
     "@rrweb/types": "2.0.0-alpha.14"

package/src/SessionReplay.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SessionReplay = exports.runStatsigSessionReplay = exports.StatsigSessionReplayPlugin = void 0;
 const client_core_1 = require("@statsig/client-core");
 const SessionReplayBase_1 = require("./SessionReplayBase");
+const SessionReplayUtils_1 = require("./SessionReplayUtils");
 class StatsigSessionReplayPlugin {
     constructor(options) {
         this.options = options;
@@ -34,11 +35,22 @@ class SessionReplay extends SessionReplayBase_1.SessionReplayBase {
     }
     _attemptToStartRecording(force = false) {
         var _a, _b;
+        if (this._totalLogs >= SessionReplayUtils_1.MAX_LOGS) {
+            return;
+        }
         const values = this._client.getContext().values;
+        if ((values === null || values === void 0 ? void 0 : values.recording_blocked) === true) {
+            this._shutdown();
+            return;
+        }
         if (!force && (values === null || values === void 0 ? void 0 : values.can_record_session) !== true) {
             this._shutdown();
             return;
         }
+        if ((values === null || values === void 0 ? void 0 : values.passes_session_recording_targeting) === false) {
+            this._shutdown();
+            return;
+        }
         if (this._replayer.isRecording()) {
             return;
         }

package/src/SessionReplayBase.d.ts

@@ -15,6 +15,7 @@ export declare abstract class SessionReplayBase {
     protected _replayer: SessionReplayClient;
     protected _wasStopped: boolean;
     protected _currentEventIndex: number;
+    protected _totalLogs: number;
     constructor(client: PrecomputedEvaluationsInterface, options?: SessionReplayOptions);
     forceStartRecording(): void;
     stopRecording(): void;
@@ -28,6 +29,7 @@ export declare abstract class SessionReplayBase {
     protected _getSessionIdFromClient(): string;
     protected abstract _shutdown(endReason?: EndReason): void;
     protected _shutdownImpl(endReason?: EndReason): void;
+    private _makeEmptySessionData;
     protected _onRecordingEvent(event: ReplayEvent, data: ReplaySessionData): void;
 }
 export {};

package/src/SessionReplayBase.js

@@ -8,13 +8,14 @@ const SizeOf_1 = require("./SizeOf");
 class SessionReplayBase {
     constructor(client, options) {
         this._sessionData = {
-            startTime: 0,
+            startTime: -1,
             endTime: 0,
             clickCount: 0,
         };
         this._events = [];
         this._wasStopped = false;
         this._currentEventIndex = 0;
+        this._totalLogs = 0;
         this._client = client;
         this._options = options;
         const { sdkKey, errorBoundary } = this._client.getContext();
@@ -87,6 +88,7 @@ class SessionReplayBase {
             if (endReason) {
                 event.metadata[endReason] = 'true';
             }
+            this._totalLogs++;
             this._client.logEvent(event);
             if (slicedID != null) {
                 this._client.flush().catch((e) => {
@@ -95,6 +97,9 @@ class SessionReplayBase {
             }
         }
         this._events = [];
+        if (this._totalLogs > SessionReplayUtils_1.MAX_LOGS) {
+            this._shutdown();
+        }
     }
     _bumpSessionIdleTimerAndLogRecording() {
         this._getSessionIdFromClient();
@@ -104,15 +109,28 @@ class SessionReplayBase {
         return this._client.getContext().session.data.sessionID;
     }
     _shutdownImpl(endReason) {
-        this._replayer.stop();
-        client_core_1.StatsigMetadataProvider.add({ isRecordingSession: 'false' });
-        this._currentEventIndex = 0;
+        if (this._replayer.isRecording()) {
+            this._replayer.stop();
+            client_core_1.StatsigMetadataProvider.add({ isRecordingSession: 'false' });
+        }
         if (this._events.length === 0) {
+            // only reset if session expired otherwise we might start recording again
+            if (endReason === 'session_expired') {
+                this._currentEventIndex = 0;
+                this._sessionData = this._makeEmptySessionData();
+            }
             return;
         }
         this._logRecording(endReason);
-        this._sessionData = {
-            startTime: 0,
+        // only reset if session expired otherwise we might start recording again
+        if (endReason === 'session_expired') {
+            this._currentEventIndex = 0;
+            this._sessionData = this._makeEmptySessionData();
+        }
+    }
+    _makeEmptySessionData() {
+        return {
+            startTime: -1,
             endTime: 0,
             clickCount: 0,
         };
@@ -123,10 +141,17 @@ class SessionReplayBase {
             this._shutdown('session_expired');
             return;
         }
+        if (this._totalLogs >= SessionReplayUtils_1.MAX_LOGS) {
+            this._shutdown();
+            return;
+        }
         event.eventIndex = this._currentEventIndex++;
         // Update the session data
         this._sessionData.clickCount += data.clickCount;
-        this._sessionData.startTime = Math.min(this._sessionData.startTime, data.startTime);
+        this._sessionData.startTime =
+            this._sessionData.startTime === -1
+                ? data.startTime
+                : Math.min(this._sessionData.startTime, data.startTime);
         this._sessionData.endTime = Math.max(this._sessionData.endTime, data.endTime);
         const eventApproxSize = (0, SizeOf_1._fastApproxSizeOf)(event, SessionReplayUtils_1.MAX_INDIVIDUAL_EVENT_BYTES);
         if (eventApproxSize > SessionReplayUtils_1.MAX_INDIVIDUAL_EVENT_BYTES) {

package/src/SessionReplayClient.d.ts

@@ -15,7 +15,6 @@ export declare class SessionReplayClient {
     private _stopCallback?;
     private _startTimestamp;
     private _endTimestamp;
-    private _eventCounter;
     record(callback: (latest: ReplayEvent, data: ReplaySessionData, isCheckout?: boolean) => void, config: RRWebConfig, stopCallback?: () => void, keepRollingWindow?: boolean): void;
     stop(): void;
     isRecording(): boolean;

package/src/SessionReplayClient.js

@@ -4,12 +4,11 @@ exports.SessionReplayClient = void 0;
 const rrweb = require("rrweb");
 const client_core_1 = require("@statsig/client-core");
 const TIMEOUT_MS = 1000 * 60 * 60 * 4; // 4 hours
-const CHECKOUT_WINDOW_MS = 1000 * 60; // 1 minute
+const CHECKOUT_WINDOW_MS = 1000 * 30; // 30 seconds
 class SessionReplayClient {
     constructor() {
         this._startTimestamp = null;
         this._endTimestamp = null;
-        this._eventCounter = 0;
     }
     record(callback, config, stopCallback, keepRollingWindow = false) {
         if ((0, client_core_1._getDocumentSafe)() == null) {
@@ -18,7 +17,6 @@ class SessionReplayClient {
         // Always reset session id and tracking fields for a new recording
         this._startTimestamp = null;
         this._endTimestamp = null;
-        this._eventCounter = 0;
         this._stopCallback = stopCallback;
         if (this._stopFn) {
             return;

package/src/SessionReplayUtils.d.ts

@@ -16,6 +16,7 @@ export type RRWebPayload = {
 };
 export declare const REPLAY_ENQUEUE_TRIGGER_BYTES: number;
 export declare const MAX_INDIVIDUAL_EVENT_BYTES: number;
+export declare const MAX_LOGS = 10000;
 export declare function _makeLoggableRrwebEvent(slice: string, payload: string, sessionID: string, data: ReplaySessionData): StatsigEvent & {
     metadata: RRWebPayload;
 };

package/src/SessionReplayUtils.js

@@ -1,10 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports._appendSlicedMetadata = exports._slicePayload = exports._makeLoggableRrwebEvent = exports.MAX_INDIVIDUAL_EVENT_BYTES = exports.REPLAY_ENQUEUE_TRIGGER_BYTES = void 0;
+exports._appendSlicedMetadata = exports._slicePayload = exports._makeLoggableRrwebEvent = exports.MAX_LOGS = exports.MAX_INDIVIDUAL_EVENT_BYTES = exports.REPLAY_ENQUEUE_TRIGGER_BYTES = void 0;
 const client_core_1 = require("@statsig/client-core");
 const REPLAY_SLICE_BYTES = 1024 * 1024; // 1 MB
 exports.REPLAY_ENQUEUE_TRIGGER_BYTES = 1024 * 10; // 10 KB
 exports.MAX_INDIVIDUAL_EVENT_BYTES = 1024 * 1024 * 10; // 10 MB
+exports.MAX_LOGS = 10000; // 10K logs
 function _makeLoggableRrwebEvent(slice, payload, sessionID, data) {
     const metadata = {
         session_start_ts: String(data.startTime),

package/src/TriggeredSessionReplay.d.ts

@@ -17,11 +17,18 @@ export declare class StatsigTriggeredSessionReplayPlugin implements StatsigPlugi
 }
 export declare function runStatsigSessionReplay(client: PrecomputedEvaluationsInterface, options?: SessionReplayOptions): void;
 export declare function startRecording(sdkKey: string): void;
+export declare function forceStartRecording(sdkKey: string): void;
 export declare function stopRecording(sdkKey: string): void;
 export declare class TriggeredSessionReplay extends SessionReplayBase {
     private _runningEventData;
     private _isActiveRecording;
     constructor(client: PrecomputedEvaluationsInterface, options?: TriggeredSessionReplayOptions);
+    private _subscribeToClientEvents;
+    private _subscribeToValuesUpdated;
+    private _subscribeToLogEventCalled;
+    private _subscribeToGateEvaluation;
+    private _subscribeToExperimentEvaluation;
+    private _tryStartExposureRecording;
     startRecording(): void;
     forceStartRecording(): void;
     stopRecording(): void;

package/src/TriggeredSessionReplay.js

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TriggeredSessionReplay = exports.stopRecording = exports.startRecording = exports.runStatsigSessionReplay = exports.StatsigTriggeredSessionReplayPlugin = void 0;
+exports.TriggeredSessionReplay = exports.stopRecording = exports.forceStartRecording = exports.startRecording = exports.runStatsigSessionReplay = exports.StatsigTriggeredSessionReplayPlugin = void 0;
 const client_core_1 = require("@statsig/client-core");
 const SessionReplayBase_1 = require("./SessionReplayBase");
+const SessionReplayUtils_1 = require("./SessionReplayUtils");
 class StatsigTriggeredSessionReplayPlugin {
     constructor(options) {
         this.options = options;
@@ -25,6 +26,14 @@ function startRecording(sdkKey) {
     }
 }
 exports.startRecording = startRecording;
+function forceStartRecording(sdkKey) {
+    var _a, _b;
+    const inst = (_b = (_a = (0, client_core_1._getStatsigGlobal)()) === null || _a === void 0 ? void 0 : _a.srInstances) === null || _b === void 0 ? void 0 : _b[sdkKey];
+    if (inst instanceof TriggeredSessionReplay) {
+        inst.forceStartRecording();
+    }
+}
+exports.forceStartRecording = forceStartRecording;
 function stopRecording(sdkKey) {
     var _a, _b;
     const inst = (_b = (_a = (0, client_core_1._getStatsigGlobal)()) === null || _a === void 0 ? void 0 : _a.srInstances) === null || _b === void 0 ? void 0 : _b[sdkKey];
@@ -39,6 +48,21 @@ class TriggeredSessionReplay extends SessionReplayBase_1.SessionReplayBase {
         super(client, options);
         this._runningEventData = [];
         this._isActiveRecording = false;
+        this._subscribeToClientEvents(options);
+        if (options === null || options === void 0 ? void 0 : options.autoStartRecording) {
+            this._attemptToStartRecording((_a = this._options) === null || _a === void 0 ? void 0 : _a.forceRecording);
+        }
+        else if (options === null || options === void 0 ? void 0 : options.keepRollingWindow) {
+            this._attemptToStartRollingWindow();
+        }
+    }
+    _subscribeToClientEvents(options) {
+        this._subscribeToValuesUpdated(options);
+        this._subscribeToLogEventCalled();
+        this._subscribeToGateEvaluation();
+        this._subscribeToExperimentEvaluation();
+    }
+    _subscribeToValuesUpdated(options) {
         this._client.$on('values_updated', () => {
             var _a;
             if (!this._wasStopped) {
@@ -50,11 +74,74 @@ class TriggeredSessionReplay extends SessionReplayBase_1.SessionReplayBase {
                 }
             }
         });
-        if (options === null || options === void 0 ? void 0 : options.autoStartRecording) {
-            this._attemptToStartRecording((_a = this._options) === null || _a === void 0 ? void 0 : _a.forceRecording);
+    }
+    _subscribeToLogEventCalled() {
+        this._client.$on('log_event_called', (event) => {
+            var _a;
+            if (this._wasStopped) {
+                return;
+            }
+            const values = this._client.getContext().values;
+            const passedTargeting = values === null || values === void 0 ? void 0 : values.passes_session_recording_targeting;
+            if (passedTargeting === false ||
+                (values === null || values === void 0 ? void 0 : values.session_recording_event_triggers) == null) {
+                return;
+            }
+            const trigger = values.session_recording_event_triggers[event.event.eventName];
+            if (trigger == null) {
+                return;
+            }
+            if (trigger.passes_sampling === false) {
+                return;
+            }
+            const targetValues = trigger.values;
+            if (targetValues == null) {
+                this._attemptToStartRecording(true);
+                return;
+            }
+            if (targetValues.includes(String((_a = event.event.value) !== null && _a !== void 0 ? _a : ''))) {
+                this._attemptToStartRecording(true);
+                return;
+            }
+        });
+    }
+    _subscribeToGateEvaluation() {
+        this._client.$on('gate_evaluation', (event) => {
+            this._tryStartExposureRecording(event.gate.name, String(event.gate.value));
+        });
+    }
+    _subscribeToExperimentEvaluation() {
+        this._client.$on('experiment_evaluation', (event) => {
+            var _a;
+            this._tryStartExposureRecording(event.experiment.name, (_a = event.experiment.groupName) !== null && _a !== void 0 ? _a : '');
+        });
+    }
+    _tryStartExposureRecording(name, value) {
+        var _a;
+        if (this._wasStopped) {
+            return;
         }
-        else if (options === null || options === void 0 ? void 0 : options.keepRollingWindow) {
-            this._attemptToStartRollingWindow();
+        const values = this._client.getContext().values;
+        const passedTargeting = values === null || values === void 0 ? void 0 : values.passes_session_recording_targeting;
+        if (passedTargeting === false ||
+            (values === null || values === void 0 ? void 0 : values.session_recording_exposure_triggers) == null) {
+            return;
+        }
+        const trigger = (_a = values.session_recording_exposure_triggers[name]) !== null && _a !== void 0 ? _a : values.session_recording_exposure_triggers[(0, client_core_1._DJB2)(name)];
+        if (trigger == null) {
+            return;
+        }
+        if (trigger.passes_sampling === false) {
+            return;
+        }
+        const targetValues = trigger.values;
+        if (targetValues == null) {
+            this._attemptToStartRecording(true);
+            return;
+        }
+        if (targetValues.includes(value)) {
+            this._attemptToStartRecording(true);
+            return;
         }
     }
     startRecording() {
@@ -79,7 +166,10 @@ class TriggeredSessionReplay extends SessionReplayBase_1.SessionReplayBase {
         for (let i = 0; i < currentEvents.length; i++) {
             currentEvents[i].event.eventIndex = i;
             this._sessionData.clickCount += currentEvents[i].data.clickCount;
-            this._sessionData.startTime = Math.min(this._sessionData.startTime, currentEvents[i].data.startTime);
+            this._sessionData.startTime =
+                this._sessionData.startTime === -1
+                    ? currentEvents[i].data.startTime
+                    : Math.min(this._sessionData.startTime, currentEvents[i].data.startTime);
             this._sessionData.endTime = Math.max(this._sessionData.endTime, currentEvents[i].data.endTime);
         }
         this._events = currentEvents.map((e) => e.event);
@@ -90,6 +180,8 @@ class TriggeredSessionReplay extends SessionReplayBase_1.SessionReplayBase {
         else {
             this._logRecording();
         }
+        // stop recording and since it will be started again
+        this._replayer.stop();
     }
     _shutdown(endReason) {
         this._isActiveRecording = false;
@@ -124,7 +216,7 @@ class TriggeredSessionReplay extends SessionReplayBase_1.SessionReplayBase {
     _attemptToStartRollingWindow() {
         var _a, _b;
         const values = this._client.getContext().values;
-        if ((values === null || values === void 0 ? void 0 : values.can_record_session) !== true) {
+        if ((values === null || values === void 0 ? void 0 : values.passes_session_recording_targeting) === false) {
             this._shutdown();
             return;
         }
@@ -137,11 +229,22 @@ class TriggeredSessionReplay extends SessionReplayBase_1.SessionReplayBase {
     }
     _attemptToStartRecording(force = false) {
         var _a, _b;
+        if (this._totalLogs >= SessionReplayUtils_1.MAX_LOGS) {
+            return;
+        }
         const values = this._client.getContext().values;
+        if ((values === null || values === void 0 ? void 0 : values.recording_blocked) === true) {
+            this._shutdown();
+            return;
+        }
         if (!force && (values === null || values === void 0 ? void 0 : values.can_record_session) !== true) {
             this._shutdown();
             return;
         }
+        if ((values === null || values === void 0 ? void 0 : values.passes_session_recording_targeting) === false) {
+            this._shutdown();
+            return;
+        }
         this._handleStartActiveRecording();
         this._wasStopped = false;
         client_core_1.StatsigMetadataProvider.add({ isRecordingSession: 'true' });

package/src/index.d.ts

@@ -1,5 +1,5 @@
 import { SessionReplay, StatsigSessionReplayPlugin, runStatsigSessionReplay } from './SessionReplay';
 import { SessionReplayClient } from './SessionReplayClient';
-import { StatsigTriggeredSessionReplayPlugin, startRecording, stopRecording } from './TriggeredSessionReplay';
+import { StatsigTriggeredSessionReplayPlugin, forceStartRecording, startRecording, stopRecording } from './TriggeredSessionReplay';
 export type { ReplaySessionData as ReplayData, ReplayEvent, } from './SessionReplayClient';
-export { SessionReplayClient, SessionReplay, runStatsigSessionReplay, StatsigSessionReplayPlugin, StatsigTriggeredSessionReplayPlugin, startRecording, stopRecording, };
+export { SessionReplayClient, SessionReplay, runStatsigSessionReplay, StatsigSessionReplayPlugin, StatsigTriggeredSessionReplayPlugin, startRecording, stopRecording, forceStartRecording, };

package/src/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.stopRecording = exports.startRecording = exports.StatsigTriggeredSessionReplayPlugin = exports.StatsigSessionReplayPlugin = exports.runStatsigSessionReplay = exports.SessionReplay = exports.SessionReplayClient = void 0;
+exports.forceStartRecording = exports.stopRecording = exports.startRecording = exports.StatsigTriggeredSessionReplayPlugin = exports.StatsigSessionReplayPlugin = exports.runStatsigSessionReplay = exports.SessionReplay = exports.SessionReplayClient = void 0;
 const client_core_1 = require("@statsig/client-core");
 const SessionReplay_1 = require("./SessionReplay");
 Object.defineProperty(exports, "SessionReplay", { enumerable: true, get: function () { return SessionReplay_1.SessionReplay; } });
@@ -10,6 +10,7 @@ const SessionReplayClient_1 = require("./SessionReplayClient");
 Object.defineProperty(exports, "SessionReplayClient", { enumerable: true, get: function () { return SessionReplayClient_1.SessionReplayClient; } });
 const TriggeredSessionReplay_1 = require("./TriggeredSessionReplay");
 Object.defineProperty(exports, "StatsigTriggeredSessionReplayPlugin", { enumerable: true, get: function () { return TriggeredSessionReplay_1.StatsigTriggeredSessionReplayPlugin; } });
+Object.defineProperty(exports, "forceStartRecording", { enumerable: true, get: function () { return TriggeredSessionReplay_1.forceStartRecording; } });
 Object.defineProperty(exports, "startRecording", { enumerable: true, get: function () { return TriggeredSessionReplay_1.startRecording; } });
 Object.defineProperty(exports, "stopRecording", { enumerable: true, get: function () { return TriggeredSessionReplay_1.stopRecording; } });
 Object.assign((0, client_core_1._getStatsigGlobal)(), {