@statsig/session-replay 1.0.0 → 1.0.1

package/README.md

@@ -1,7 +1,45 @@
-# Statsig Session Replay
+<h1 align="center">
+	<img src="https://github.com/statsig-io/js-client-monorepo/assets/95646168/ae5499ed-20ff-4584-bf21-8857f800d485" />
+    	<div />
+	<a href="https://statsig.com/?ref=gh_jsm">Statsig</a>
+</h1>
 
-Session Replay allows you to record users using your website or product, and play back those recorded sessions. This allows you to better understand how users use your service or website, diagnose problems, and uncover insights that help improve conversion and the overall user experience.
+<p align="center">
+	<a href="https://github.com/statsig-io/js-client-monorepo/blob/main/LICENSE">
+        	<img src="https://img.shields.io/badge/license-ISC-blue.svg?colorA=1b2528&colorB=ccfbc7&style=for-the-badge">
+    	</a>
+	<a href="https://www.npmjs.com/package/@statsig/js-client">
+        	<img src="https://img.shields.io/npm/v/@statsig/js-client.svg?colorA=1b2528&colorB=b2d3ff&style=for-the-badge">
+    	</a>
+	<a href="https://statsig.com/community?ref=gh_jsm">
+        	<img src="https://img.shields.io/badge/slack-statsig-brightgreen.svg?logo=slack&colorA=1b2528&colorB=FFF8BA&style=for-the-badge">
+    	</a>
+</p>
+
+Statsig helps you move faster with feature gates (feature flags), and/or dynamic configs. It also allows you to run A/B/n tests to validate your new features and understand their impact on your KPIs. If you're new to Statsig, check out our product and create an account at [statsig.com](https://www.statsig.com/?ref=gh_jsm).
 
 ## Getting Started
 
-Read through the [Documentation](https://docs.statsig.com/session-replay/overview) or check out the [Samples](https://github.com/statsig-io/js-client-monorepo/tree/main/samples).
+Read through the [Documentation](https://docs.statsig.com/client/javascript-sdk?ref=gh_jsm) or check out the [Samples](samples/).
+
+## Packages
+
+Clients
+
+- [Precomputed Evaluations (Recommended)](packages/js-client/README.md)
+- [On Device Evaluations](packages/js-on-device-eval-client/README.md)
+
+Product Bundles
+
+- [Session Replay](packages/session-replay/README.md)
+- [Web Analytics](packages/web-analytics/README.md)
+
+Framework Specific Bindings
+
+- [React](packages/react-bindings/README.md)
+- [React Native](packages/react-native-bindings/README.md)
+- [React Native (Expo)](packages/expo-bindings/README.md)
+
+## Community
+
+If you need any assitance or just have a question, feel free to reach out to us on [Slack](https://statsig.com/community?ref=gh_jsm).

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@statsig/session-replay",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "dependencies": {
     "rrweb": "2.0.0-alpha.12",
-    "@statsig/client-core": "1.0.0"
+    "@statsig/client-core": "1.0.1"
   },
   "devDependencies": {
     "@rrweb/types": "2.0.0-alpha.12"

package/src/SessionReplay.d.ts

@@ -1,13 +1,18 @@
 import { PrecomputedEvaluationsInterface } from '@statsig/client-core';
-export declare function runStatsigSessionReplay(client: PrecomputedEvaluationsInterface): void;
+import { RRWebConfig } from './SessionReplayClient';
+type SessionReplayOptions = {
+    rrwebConfig?: RRWebConfig;
+};
+export declare function runStatsigSessionReplay(client: PrecomputedEvaluationsInterface, options?: SessionReplayOptions): void;
 export declare class SessionReplay {
     private _client;
+    private _options?;
     private _replayer;
     private _sessionData;
     private _events;
     private _currentSessionID;
     private _errorBoundary;
-    constructor(_client: PrecomputedEvaluationsInterface);
+    constructor(_client: PrecomputedEvaluationsInterface, _options?: SessionReplayOptions | undefined);
     private _subscribeToVisibilityChanged;
     private _onVisibilityChanged;
     private _onRecordingEvent;
@@ -18,3 +23,4 @@ export declare class SessionReplay {
     private _bumpSessionIdleTimerAndLogRecording;
     private _getSessionIdFromClient;
 }
+export {};

package/src/SessionReplay.js

@@ -13,13 +13,14 @@ exports.SessionReplay = exports.runStatsigSessionReplay = void 0;
 const client_core_1 = require("@statsig/client-core");
 const SessionReplayClient_1 = require("./SessionReplayClient");
 const MAX_REPLAY_PAYLOAD_BYTES = 2048;
-function runStatsigSessionReplay(client) {
-    new SessionReplay(client);
+function runStatsigSessionReplay(client, options) {
+    new SessionReplay(client, options);
 }
 exports.runStatsigSessionReplay = runStatsigSessionReplay;
 class SessionReplay {
-    constructor(_client) {
+    constructor(_client, _options) {
         this._client = _client;
+        this._options = _options;
         this._sessionData = null;
         this._events = [];
         const { sdkKey, errorBoundary } = _client.getContext();
@@ -36,7 +37,7 @@ class SessionReplay {
         this._client.on('session_expired', () => {
             this._replayer.stop();
             client_core_1.StatsigMetadataProvider.add({ isRecordingSession: 'false' });
-            this._logRecording();
+            this._logRecording('session_expired');
             this._currentSessionID = this._getSessionIdFromClient();
         });
         this._subscribeToVisibilityChanged();
@@ -54,12 +55,13 @@ class SessionReplay {
         });
     }
     _onVisibilityChanged(visibility) {
-        if (visibility === 'background') {
-            this._logRecording();
-            this._client.flush().catch((e) => {
-                this._errorBoundary.logError('SR::visibility', e);
-            });
+        if (visibility !== 'background') {
+            return;
         }
+        this._logRecording();
+        this._client.flush().catch((e) => {
+            this._errorBoundary.logError('SR::visibility', e);
+        });
     }
     _onRecordingEvent(event, data) {
         this._sessionData = data;
@@ -75,6 +77,7 @@ class SessionReplay {
         }
     }
     _attemptToStartRecording() {
+        var _a, _b;
         const values = this._client.getContext().values;
         if ((values === null || values === void 0 ? void 0 : values.can_record_session) !== true) {
             this._shutdown();
@@ -84,7 +87,7 @@ class SessionReplay {
             return;
         }
         client_core_1.StatsigMetadataProvider.add({ isRecordingSession: 'true' });
-        this._replayer.record((e, d) => this._onRecordingEvent(e, d));
+        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 : {});
     }
     _shutdown() {
         this._replayer.stop();
@@ -94,23 +97,24 @@ class SessionReplay {
         }
         this._bumpSessionIdleTimerAndLogRecording();
     }
-    _logRecording() {
+    _logRecording(endReason) {
         if (this._events.length === 0 || this._sessionData == null) {
             return;
         }
+        endReason = (0, client_core_1._isUnloading)() ? 'is_leaving_page' : endReason;
         this._currentSessionID
-            .then((sessionID) => this._logRecordingWithSessionID(sessionID))
+            .then((sessionID) => this._logRecordingWithSessionID(sessionID, endReason))
             .catch((err) => {
             this._errorBoundary.logError('SR::flush', err);
         });
     }
-    _logRecordingWithSessionID(sessionID) {
+    _logRecordingWithSessionID(sessionID, endReason) {
         const data = this._sessionData;
         if (data === null || this._events.length === 0) {
             return;
         }
         const payload = JSON.stringify(this._events);
-        this._client.logEvent({
+        const event = {
             eventName: 'statsig::session_recording',
             value: sessionID,
             metadata: {
@@ -120,7 +124,11 @@ class SessionReplay {
                 rrweb_events: payload,
                 session_replay_sdk_version: client_core_1.SDK_VERSION,
             },
-        });
+        };
+        if (endReason) {
+            event.metadata[endReason] = 'true';
+        }
+        this._client.logEvent(event);
         this._events = [];
     }
     _bumpSessionIdleTimerAndLogRecording() {

package/src/SessionReplayClient.d.ts

@@ -1,6 +1,8 @@
 import type { eventWithTime } from '@rrweb/types';
+import * as rrweb from 'rrweb';
 import { Flatten } from '@statsig/client-core';
 export type ReplayEvent = Flatten<eventWithTime>;
+export type RRWebConfig = Omit<rrweb.recordOptions<unknown>, 'emit'>;
 export type ReplaySessionData = {
     startTime: number;
     endTime: number;
@@ -12,7 +14,7 @@ export declare class SessionReplayClient {
     private _startTimestamp;
     private _endTimestamp;
     private _clickCount;
-    record(callback: (latest: ReplayEvent, data: ReplaySessionData) => void, stopCallback?: () => void): void;
+    record(callback: (latest: ReplayEvent, data: ReplaySessionData) => void, config: RRWebConfig, stopCallback?: () => void): void;
     stop(): void;
     isRecording(): boolean;
 }

package/src/SessionReplayClient.js

@@ -10,7 +10,7 @@ class SessionReplayClient {
         this._endTimestamp = null;
         this._clickCount = 0;
     }
-    record(callback, stopCallback) {
+    record(callback, config, stopCallback) {
         if ((0, client_core_1._getDocumentSafe)() == null) {
             return;
         }
@@ -44,7 +44,7 @@ class SessionReplayClient {
                 }
             }
         };
-        this._stopFn = _minifiedAwareRecord(emit);
+        this._stopFn = _minifiedAwareRecord(emit, config);
     }
     stop() {
         if (this._stopFn) {
@@ -61,9 +61,9 @@ exports.SessionReplayClient = SessionReplayClient;
  * We do a simple concat of rrweb during minification.
  * This function ensures we handle both "npm" and "<script ..>" install options.
  */
-function _minifiedAwareRecord(emit) {
+function _minifiedAwareRecord(emit, config) {
     const record = typeof rrweb === 'function' ? rrweb : rrweb.record;
-    return record({ emit });
+    return record(Object.assign(Object.assign({}, config), { emit }));
 }
 function _isClickEvent(event) {
     // we use the raw number so we can support the minified rrweb file.