@statsig/session-replay 3.3.0-beta.3 → 3.4.0

package/package.json

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

package/src/SessionReplay.js

@@ -12,7 +12,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SessionReplay = exports.runStatsigSessionReplay = exports.StatsigSessionReplayPlugin = void 0;
 const client_core_1 = require("@statsig/client-core");
 const SessionReplayClient_1 = require("./SessionReplayClient");
-const MAX_REPLAY_PAYLOAD_BYTES = 2048;
+const SizeOf_1 = require("./SizeOf");
+const REPLAY_ENQUEUE_TRIGGER_BYTES = 1024 * 10; // 10 KB
+const REPLAY_SLICE_BYTES = 1024 * 1024; // 1 MB
+const MAX_INDIVIDUAL_EVENT_BYTES = 1024 * 1024 * 10; // 10 MB
 class StatsigSessionReplayPlugin {
     constructor(options) {
         this.options = options;
@@ -79,15 +82,22 @@ class SessionReplay {
     }
     _onRecordingEvent(event, data) {
         this._sessionData = data;
+        const eventApproxSize = (0, SizeOf_1._fastApproxSizeOf)(event, MAX_INDIVIDUAL_EVENT_BYTES);
+        if (eventApproxSize > MAX_INDIVIDUAL_EVENT_BYTES) {
+            client_core_1.Log.warn(`SessionReplay event is too large (~${eventApproxSize} bytes) and will not be logged`, event);
+            return;
+        }
+        const approxArraySizeBefore = (0, SizeOf_1._fastApproxSizeOf)(this._events, REPLAY_ENQUEUE_TRIGGER_BYTES);
         this._events.push(event);
-        const payload = JSON.stringify(this._events);
-        if (payload.length > MAX_REPLAY_PAYLOAD_BYTES) {
-            if ((0, client_core_1._isCurrentlyVisible)()) {
-                this._bumpSessionIdleTimerAndLogRecording();
-            }
-            else {
-                this._logRecording();
-            }
+        if (approxArraySizeBefore + eventApproxSize <
+            REPLAY_ENQUEUE_TRIGGER_BYTES) {
+            return;
+        }
+        if ((0, client_core_1._isCurrentlyVisible)()) {
+            this._bumpSessionIdleTimerAndLogRecording();
+        }
+        else {
+            this._logRecording();
         }
     }
     _attemptToStartRecording(force = false) {
@@ -128,22 +138,24 @@ class SessionReplay {
             return;
         }
         const payload = JSON.stringify(this._events);
-        const event = {
-            eventName: 'statsig::session_recording',
-            value: sessionID,
-            metadata: {
-                session_start_ts: String(data.startTime),
-                session_end_ts: String(data.endTime),
-                clicks_captured_cumulative: String(data.clickCount),
-                rrweb_events: payload,
-                rrweb_payload_size: String(payload.length),
-                session_replay_sdk_version: client_core_1.SDK_VERSION,
-            },
-        };
-        if (endReason) {
-            event.metadata[endReason] = 'true';
+        const parts = _slicePayload(payload);
+        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 = _makeLoggableRrwebEvent(slice, payload, sessionID, data);
+            if (slicedID != null) {
+                _appendSlicedMetadata(event.metadata, slicedID, i, parts.length, slice.length);
+            }
+            if (endReason) {
+                event.metadata[endReason] = 'true';
+            }
+            this._client.logEvent(event);
+            if (slicedID != null) {
+                this._client.flush().catch((e) => {
+                    client_core_1.Log.error(e);
+                });
+            }
         }
-        this._client.logEvent(event);
         this._events = [];
     }
     _bumpSessionIdleTimerAndLogRecording() {
@@ -157,3 +169,31 @@ class SessionReplay {
     }
 }
 exports.SessionReplay = SessionReplay;
+function _slicePayload(payload) {
+    const parts = [];
+    for (let i = 0; i < payload.length; i += REPLAY_SLICE_BYTES) {
+        parts.push(payload.slice(i, i + REPLAY_SLICE_BYTES));
+    }
+    return parts;
+}
+function _makeLoggableRrwebEvent(slice, payload, sessionID, data) {
+    const metadata = {
+        session_start_ts: String(data.startTime),
+        session_end_ts: String(data.endTime),
+        clicks_captured_cumulative: String(data.clickCount),
+        rrweb_events: slice,
+        rrweb_payload_size: String(payload.length),
+        session_replay_sdk_version: client_core_1.SDK_VERSION,
+    };
+    return {
+        eventName: 'statsig::session_recording',
+        value: sessionID,
+        metadata,
+    };
+}
+function _appendSlicedMetadata(metadata, slicedID, sliceIndex, sliceCount, sliceByteSize) {
+    metadata.sliced_id = slicedID;
+    metadata.slice_index = String(sliceIndex);
+    metadata.slice_count = String(sliceCount);
+    metadata.slice_byte_size = String(sliceByteSize);
+}

package/src/SizeOf.d.ts

@@ -0,0 +1 @@
+export declare const _fastApproxSizeOf: (obj: Record<string, unknown> | Array<unknown>, max: number) => number;

package/src/SizeOf.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports._fastApproxSizeOf = void 0;
+const CURLY_AND_SQUARE_BRACKET_SIZE = 2; // [] for array, {} for object
+const APPROX_ADDITIONAL_SIZE = 1; // additional size for comma and stuff
+const _fastApproxSizeOf = (obj, max) => {
+    let size = 0;
+    const keys = Object.keys(obj);
+    for (let i = 0; i < keys.length; i++) {
+        const key = keys[i];
+        const value = obj[key];
+        size += key.length;
+        if (typeof value === 'object' && value !== null) {
+            size += (0, exports._fastApproxSizeOf)(value, max) + CURLY_AND_SQUARE_BRACKET_SIZE;
+        }
+        else {
+            size += String(value).length + APPROX_ADDITIONAL_SIZE;
+        }
+        if (size >= max) {
+            // exit early if we've exceeded the max
+            return size;
+        }
+    }
+    return size;
+};
+exports._fastApproxSizeOf = _fastApproxSizeOf;