@statsig/session-replay 0.0.1-beta.30 → 0.0.1-beta.32

package/README.md

@@ -1,11 +1,7 @@
-# session-replay
+# Statsig Session Replay
 
-This library was generated with [Nx](https://nx.dev).
+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.
 
-## Building
+## Getting Started
 
-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).
+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).

package/package.json

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

package/src/SessionReplay.d.ts

@@ -6,13 +6,14 @@ export declare class SessionReplay {
     private _replayer;
     private _sessionData;
     private _events;
-    private _sessionID;
+    private _currentSessionID;
     constructor(_client: PrecomputedEvaluationsInterface);
     private _onVisibilityChanged;
     private _onRecordingEvent;
     private _attemptToStartRecording;
     private _shutdown;
-    private _flushWithSessionID;
-    private _logRecordingEvent;
-    private _flushAndRefreshSessionID;
+    private _logRecording;
+    private _logRecordingWithSessionID;
+    private _bumpSessionIdleTimerAndLogRecording;
+    private _getSessionIdFromClient;
 }

package/src/SessionReplay.js

@@ -1,4 +1,13 @@
 "use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SessionReplay = exports.runStatsigSessionReplay = void 0;
 const client_core_1 = require("@statsig/client-core");
@@ -13,44 +22,31 @@ class SessionReplay {
         this._client = _client;
         this._sessionData = null;
         this._events = [];
-        this._sessionID = '';
         const { sdkKey } = _client.getContext();
         this._errorBoundary = new client_core_1.ErrorBoundary(sdkKey);
         (0, client_core_1.monitorClass)(this._errorBoundary, this);
-        const statsigGlobal = (0, client_core_1._getStatsigGlobal)();
-        statsigGlobal.srInstances = Object.assign(Object.assign({}, statsigGlobal.srInstances), { [sdkKey]: this });
+        if ((0, client_core_1._isBrowserEnv)()) {
+            const statsigGlobal = (0, client_core_1._getStatsigGlobal)();
+            statsigGlobal.srInstances = Object.assign(Object.assign({}, statsigGlobal.srInstances), { [sdkKey]: this });
+        }
+        this._currentSessionID = this._getSessionIdFromClient();
         this._replayer = new SessionReplayClient_1.SessionReplayClient();
         this._client.__on('pre_shutdown', () => this._shutdown());
         this._client.__on('values_updated', () => this._attemptToStartRecording());
-        this._client.__on('session_expired', () => {
+        _client.on('session_expired', () => {
             this._replayer.stop();
             client_core_1.StatsigMetadataProvider.add({ isRecordingSession: 'false' });
-            this._flushWithSessionID(this._sessionID);
-            this._client
-                .getAsyncContext()
-                .then((context) => {
-                this._sessionID = context.sessionID;
-            })
-                .catch((err) => {
-                client_core_1.Log.error(err);
-            });
+            this._logRecording();
+            this._currentSessionID = this._getSessionIdFromClient();
         });
         (0, client_core_1._subscribeToVisiblityChanged)(this._onVisibilityChanged.bind(this));
-        this._client
-            .getAsyncContext()
-            .then((context) => {
-            this._sessionID = context.sessionID;
-            this._attemptToStartRecording();
-        })
-            .catch((err) => {
-            client_core_1.Log.error(err);
-        });
+        this._attemptToStartRecording();
     }
     _onVisibilityChanged(visibility) {
         if (visibility === 'background') {
-            this._flushWithSessionID(this._sessionID);
+            this._logRecording();
             this._client.flush().catch((e) => {
-                client_core_1.Log.error(e);
+                this._errorBoundary.logError('SR::visibility', e);
             });
         }
     }
@@ -60,10 +56,10 @@ class SessionReplay {
         const payload = JSON.stringify(this._events);
         if (payload.length > MAX_REPLAY_PAYLOAD_BYTES) {
             if ((0, client_core_1._isCurrentlyVisible)()) {
-                this._flushAndRefreshSessionID();
+                this._bumpSessionIdleTimerAndLogRecording();
             }
             else {
-                this._flushWithSessionID(this._sessionID);
+                this._logRecording();
             }
         }
     }
@@ -85,15 +81,19 @@ class SessionReplay {
         if (this._events.length === 0 || this._sessionData == null) {
             return;
         }
-        this._flushAndRefreshSessionID();
+        this._bumpSessionIdleTimerAndLogRecording();
     }
-    _flushWithSessionID(sessionID) {
+    _logRecording() {
         if (this._events.length === 0 || this._sessionData == null) {
             return;
         }
-        this._logRecordingEvent(sessionID);
+        this._currentSessionID
+            .then((sessionID) => this._logRecordingWithSessionID(sessionID))
+            .catch((err) => {
+            this._errorBoundary.logError('SR::flush', err);
+        });
     }
-    _logRecordingEvent(sessionID) {
+    _logRecordingWithSessionID(sessionID) {
         const data = this._sessionData;
         if (data === null || this._events.length === 0) {
             return;
@@ -112,14 +112,14 @@ class SessionReplay {
         });
         this._events = [];
     }
-    _flushAndRefreshSessionID() {
-        this._client
-            .getAsyncContext()
-            .then((context) => {
-            this._logRecordingEvent(context.sessionID);
-        })
-            .catch((err) => {
-            client_core_1.Log.error(err);
+    _bumpSessionIdleTimerAndLogRecording() {
+        this._currentSessionID = this._getSessionIdFromClient();
+        this._logRecording();
+    }
+    _getSessionIdFromClient() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const ctx = yield this._client.getAsyncContext();
+            return ctx.sessionID;
         });
     }
 }

package/src/SessionReplayClient.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 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
 class SessionReplayClient {
     constructor() {
@@ -10,7 +11,7 @@ class SessionReplayClient {
         this._clickCount = 0;
     }
     record(callback, stopCallback) {
-        if (typeof window === 'undefined') {
+        if ((0, client_core_1._getDocumentSafe)() == null) {
             return;
         }
         // Always reset session id and tracking fields for a new recording