@statsig/session-replay 3.30.2 → 3.31.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@statsig/session-replay",
-  "version": "3.30.2",
+  "version": "3.31.1",
   "license": "ISC",
   "homepage": "https://github.com/statsig-io/js-client-monorepo",
   "repository": {
@@ -11,7 +11,7 @@
   "dependencies": {
     "rrweb": "2.0.0-alpha.17",
     "@rrweb/record": "2.0.0-alpha.17",
-    "@statsig/client-core": "3.30.2"
+    "@statsig/client-core": "3.31.1"
   },
   "devDependencies": {
     "@rrweb/types": "2.0.0-alpha.16"

package/src/SessionReplay.js

@@ -38,11 +38,11 @@ class SessionReplay extends SessionReplayBase_1.SessionReplayBase {
         super._shutdownImpl(endReason);
     }
     _attemptToStartRecording(force = false) {
-        var _a, _b;
+        var _a, _b, _c, _d, _e;
         if (this._totalLogs >= SessionReplayUtils_1.MAX_LOGS) {
             return;
         }
-        const values = this._client.getContext().values;
+        const values = this._client.getContextHandle().values;
         if ((values === null || values === void 0 ? void 0 : values.recording_blocked) === true) {
             this._shutdown();
             return;
@@ -58,9 +58,17 @@ class SessionReplay extends SessionReplayBase_1.SessionReplayBase {
         if (this._replayer.isRecording()) {
             return;
         }
+        const usePrivacySettings = (values === null || values === void 0 ? void 0 : values.session_recording_privacy_settings) &&
+            ((values === null || values === void 0 ? void 0 : values.session_recording_privacy_settings.privacy_mode) !== 'min' ||
+                (values === null || values === void 0 ? void 0 : values.session_recording_privacy_settings.blocked_elements) ||
+                (values === null || values === void 0 ? void 0 : values.session_recording_privacy_settings.masked_elements) ||
+                (values === null || values === void 0 ? void 0 : values.session_recording_privacy_settings.unmasked_elements));
+        const newRRWebConfig = usePrivacySettings
+            ? (0, SessionReplayUtils_1.getNewRRWebConfigWithPrivacySettings)((_b = (_a = this._options) === null || _a === void 0 ? void 0 : _a.rrwebConfig) !== null && _b !== void 0 ? _b : {}, (_c = values === null || values === void 0 ? void 0 : values.session_recording_privacy_settings) !== null && _c !== void 0 ? _c : {})
+            : (_e = (_d = this._options) === null || _d === void 0 ? void 0 : _d.rrwebConfig) !== null && _e !== void 0 ? _e : {};
         this._wasStopped = false;
         client_core_1.StatsigMetadataProvider.add({ isRecordingSession: 'true' });
-        this._replayer.record((e, d) => this._onRecordingEvent(e, d), (_b = (_a = this._options) === null || _a === void 0 ? void 0 : _a.rrwebConfig) !== null && _b !== void 0 ? _b : {}, () => {
+        this._replayer.record((e, d) => this._onRecordingEvent(e, d), newRRWebConfig, () => {
             this._shutdown();
         });
     }

package/src/SessionReplayBase.d.ts

@@ -30,7 +30,7 @@ export declare abstract class SessionReplayBase {
     protected _subscribeToVisibilityChanged(): void;
     protected _logRecordingWithSessionID(sessionID: string, endReason?: EndReason): void;
     protected _bumpSessionIdleTimerAndLogRecording(): void;
-    protected _getSessionIdFromClient(): string;
+    protected _getSessionIdFromClient(bumpSession?: boolean): string;
     protected abstract _shutdown(endReason?: EndReason): void;
     protected _shutdownImpl(endReason?: EndReason): void;
     private _makeEmptySessionData;

package/src/SessionReplayBase.js

@@ -39,7 +39,7 @@ class SessionReplayBase {
         this._totalLogs = 0;
         this._client = client;
         this._options = options;
-        const { sdkKey, errorBoundary } = this._client.getContext();
+        const { sdkKey, errorBoundary } = this._client.getContextHandle();
         this._errorBoundary = errorBoundary;
         this._errorBoundary.wrap(this);
         this._replayer = new SessionReplayClient_1.SessionReplayClient();
@@ -91,7 +91,7 @@ class SessionReplayBase {
     }
     _subscribeToVisibilityChanged() {
         // Note: this exists as a separate function to ensure closure scope only contains `sdkKey`
-        const { sdkKey } = this._client.getContext();
+        const { sdkKey } = this._client.getContextHandle();
         (0, client_core_1._subscribeToVisiblityChanged)((vis) => {
             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];
@@ -110,7 +110,7 @@ class SessionReplayBase {
         const slicedID = parts.length > 1 ? (0, client_core_1.getUUID)() : null;
         for (let i = 0; i < parts.length; i++) {
             const slice = parts[i];
-            const event = (0, SessionReplayUtils_1._makeLoggableRrwebEvent)(slice, payload, sessionID, data, this._client.getContext().sdkInstanceID);
+            const event = (0, SessionReplayUtils_1._makeLoggableRrwebEvent)(slice, payload, sessionID, data, this._client.getContextHandle().sdkInstanceID);
             if (slicedID != null) {
                 (0, SessionReplayUtils_1._appendSlicedMetadata)(event.metadata, slicedID, i, parts.length, slice.length);
             }
@@ -134,8 +134,9 @@ class SessionReplayBase {
         this._getSessionIdFromClient();
         this._logRecording();
     }
-    _getSessionIdFromClient() {
-        return this._client.getContext().session.data.sessionID;
+    _getSessionIdFromClient(bumpSession) {
+        return this._client.getContextHandle().getSession(bumpSession).data
+            .sessionID;
     }
     _shutdownImpl(endReason) {
         if (this._replayer.isRecording()) {
@@ -170,7 +171,7 @@ class SessionReplayBase {
     }
     _onRecordingEvent(event, data) {
         // The session has expired so we should stop recording
-        if (this._currentSessionID !== this._getSessionIdFromClient()) {
+        if (this._currentSessionID !== this._getSessionIdFromClient(false)) {
             this._shutdown('session_expired');
             return;
         }

package/src/SessionReplayUtils.d.ts

@@ -1,5 +1,5 @@
-import { StatsigEvent } from '@statsig/client-core';
-import { ReplaySessionData } from './SessionReplayClient';
+import { SessionReplayPrivacySettings, StatsigEvent } from '@statsig/client-core';
+import { RRWebConfig, ReplaySessionData } from './SessionReplayClient';
 export type RRWebPayload = {
     session_start_ts: string;
     session_end_ts: string;
@@ -23,3 +23,4 @@ export declare function _makeLoggableRrwebEvent(slice: string, payload: string,
 };
 export declare function _slicePayload(payload: string): string[];
 export declare function _appendSlicedMetadata(metadata: RRWebPayload, slicedID: string, sliceIndex: number, sliceCount: number, sliceByteSize: number): void;
+export declare function getNewRRWebConfigWithPrivacySettings(originalOptions: RRWebConfig, privacySettings: SessionReplayPrivacySettings): RRWebConfig;

package/src/SessionReplayUtils.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports._appendSlicedMetadata = exports._slicePayload = exports._makeLoggableRrwebEvent = exports.MAX_LOGS = exports.MAX_INDIVIDUAL_EVENT_BYTES = exports.REPLAY_ENQUEUE_TRIGGER_BYTES = void 0;
+exports.getNewRRWebConfigWithPrivacySettings = 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
@@ -38,3 +38,52 @@ function _appendSlicedMetadata(metadata, slicedID, sliceIndex, sliceCount, slice
     metadata.slice_byte_size = String(sliceByteSize);
 }
 exports._appendSlicedMetadata = _appendSlicedMetadata;
+function getNewRRWebConfigWithPrivacySettings(originalOptions, privacySettings) {
+    const maskValue = (value) => {
+        return value.replace(/./g, '*');
+    };
+    function getNearestPrivacyMatch(element, maskedSelectors = [], unmaskedSelectors = []) {
+        let current = element;
+        while (current !== null) {
+            if (maskedSelectors.some((sel) => current === null || current === void 0 ? void 0 : current.matches(sel))) {
+                return 'masked';
+            }
+            if (unmaskedSelectors.some((sel) => current === null || current === void 0 ? void 0 : current.matches(sel))) {
+                return 'unmasked';
+            }
+            current = current.parentElement;
+        }
+        return null;
+    }
+    const blockSelector = privacySettings.blocked_elements
+        ? privacySettings.blocked_elements.join(', ')
+        : undefined;
+    const maskTextFn = (value, element) => {
+        if (!element) {
+            return privacySettings.privacy_mode === 'max' ? maskValue(value) : value;
+        }
+        const nearest = getNearestPrivacyMatch(element, privacySettings.masked_elements, privacySettings.unmasked_elements);
+        if (nearest === 'masked') {
+            return maskValue(value);
+        }
+        if (nearest === 'unmasked') {
+            return value;
+        }
+        return privacySettings.privacy_mode === 'max' ? maskValue(value) : value;
+    };
+    const maskInputFn = (value, element) => {
+        var _a, _b;
+        if ((_a = privacySettings.masked_elements) === null || _a === void 0 ? void 0 : _a.some((sel) => element.closest(sel))) {
+            return maskValue(value);
+        }
+        if ((_b = privacySettings.unmasked_elements) === null || _b === void 0 ? void 0 : _b.some((sel) => element.closest(sel))) {
+            return value;
+        }
+        return privacySettings.privacy_mode === 'max' ||
+            privacySettings.privacy_mode === 'input'
+            ? maskValue(value)
+            : value;
+    };
+    return Object.assign(Object.assign({}, originalOptions), { maskTextFn: maskTextFn, maskInputFn, maskTextSelector: '*', maskAllInputs: true, maskInputOptions: undefined, blockSelector });
+}
+exports.getNewRRWebConfigWithPrivacySettings = getNewRRWebConfigWithPrivacySettings;

package/src/TriggeredSessionReplay.d.ts

@@ -1,7 +1,7 @@
 import { PrecomputedEvaluationsInterface, StatsigPlugin } from '@statsig/client-core';
 import { EndReason, SessionReplayBase } from './SessionReplayBase';
 import { RRWebConfig, ReplayEvent, ReplaySessionData } from './SessionReplayClient';
-type SessionReplayOptions = {
+export type SessionReplayOptions = {
     rrwebConfig?: RRWebConfig;
     forceRecording?: boolean;
 };
@@ -15,7 +15,7 @@ export declare class StatsigTriggeredSessionReplayPlugin implements StatsigPlugi
     constructor(options?: TriggeredSessionReplayOptions | undefined);
     bind(client: PrecomputedEvaluationsInterface): void;
 }
-export declare function runStatsigTriggeredSessionReplay(client: PrecomputedEvaluationsInterface, options?: SessionReplayOptions): void;
+export declare function runStatsigTriggeredSessionReplay(client: PrecomputedEvaluationsInterface, options?: TriggeredSessionReplayOptions): void;
 export declare class TriggeredSessionReplay extends SessionReplayBase {
     private _runningEventData;
     private _isActiveRecording;
@@ -34,4 +34,3 @@ export declare class TriggeredSessionReplay extends SessionReplayBase {
     protected _attemptToStartRollingWindow(): void;
     protected _attemptToStartRecording(force?: boolean): void;
 }
-export {};

package/src/TriggeredSessionReplay.js

@@ -59,7 +59,7 @@ class TriggeredSessionReplay extends SessionReplayBase_1.SessionReplayBase {
             if (this._wasStopped) {
                 return;
             }
-            const values = this._client.getContext().values;
+            const values = this._client.getContextHandle().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) {
@@ -99,7 +99,7 @@ class TriggeredSessionReplay extends SessionReplayBase_1.SessionReplayBase {
         if (this._wasStopped) {
             return;
         }
-        const values = this._client.getContext().values;
+        const values = this._client.getContextHandle().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) {
@@ -196,7 +196,7 @@ class TriggeredSessionReplay extends SessionReplayBase_1.SessionReplayBase {
     }
     _attemptToStartRollingWindow() {
         var _a, _b;
-        const values = this._client.getContext().values;
+        const values = this._client.getContextHandle().values;
         if ((values === null || values === void 0 ? void 0 : values.passes_session_recording_targeting) === false) {
             this._shutdown();
             return;
@@ -209,11 +209,11 @@ class TriggeredSessionReplay extends SessionReplayBase_1.SessionReplayBase {
         }, true);
     }
     _attemptToStartRecording(force = false) {
-        var _a, _b;
+        var _a, _b, _c, _d, _e;
         if (this._totalLogs >= SessionReplayUtils_1.MAX_LOGS) {
             return;
         }
-        const values = this._client.getContext().values;
+        const values = this._client.getContextHandle().values;
         if ((values === null || values === void 0 ? void 0 : values.recording_blocked) === true) {
             this._shutdown();
             return;
@@ -232,7 +232,15 @@ class TriggeredSessionReplay extends SessionReplayBase_1.SessionReplayBase {
         if (this._replayer.isRecording()) {
             return;
         }
-        this._replayer.record((e, d, isCheckOut) => this._onRecordingEvent(e, d, isCheckOut), (_b = (_a = this._options) === null || _a === void 0 ? void 0 : _a.rrwebConfig) !== null && _b !== void 0 ? _b : {}, () => {
+        const usePrivacySettings = (values === null || values === void 0 ? void 0 : values.session_recording_privacy_settings) &&
+            ((values === null || values === void 0 ? void 0 : values.session_recording_privacy_settings.privacy_mode) !== 'min' ||
+                (values === null || values === void 0 ? void 0 : values.session_recording_privacy_settings.blocked_elements) ||
+                (values === null || values === void 0 ? void 0 : values.session_recording_privacy_settings.masked_elements) ||
+                (values === null || values === void 0 ? void 0 : values.session_recording_privacy_settings.unmasked_elements));
+        const newRRWebConfig = usePrivacySettings
+            ? (0, SessionReplayUtils_1.getNewRRWebConfigWithPrivacySettings)((_b = (_a = this._options) === null || _a === void 0 ? void 0 : _a.rrwebConfig) !== null && _b !== void 0 ? _b : {}, (_c = values === null || values === void 0 ? void 0 : values.session_recording_privacy_settings) !== null && _c !== void 0 ? _c : {})
+            : (_e = (_d = this._options) === null || _d === void 0 ? void 0 : _d.rrwebConfig) !== null && _e !== void 0 ? _e : {};
+        this._replayer.record((e, d, isCheckOut) => this._onRecordingEvent(e, d, isCheckOut), newRRWebConfig, () => {
             this._shutdown();
         });
     }