userlens-session-recorder 2.1.0 → 2.2.0

package/dist/index.d.ts

@@ -8,7 +8,7 @@ export default class SessionRecorder {
     private TIMEOUT;
     private BUFFER_SIZE;
     private maskingOptions;
-    private sessionUuid;
+    private sessionManager;
     private sessionEvents;
     private bufferBytes;
     private rrwebStop;

package/dist/index.esm.js

@@ -12184,6 +12184,8 @@ var n$1;
 !function(t2) {
   t2[t2.NotStarted = 0] = "NotStarted", t2[t2.Running = 1] = "Running", t2[t2.Stopped = 2] = "Stopped";
 }(n$1 || (n$1 = {}));
+const { addCustomEvent } = record;
+const { freezePage } = record;
 const { takeFullSnapshot } = record;
 
 var __defProp = Object.defineProperty;
@@ -20588,7 +20590,7 @@ function generateUuid() {
 function saveWriteCode(writeCode) {
     window.localStorage.setItem("$ul_WRITE_CODE", btoa(`${writeCode}:`));
 }
-const getWriteCode = () => {
+function getWriteCode() {
     try {
         const raw = window.localStorage.getItem("$ul_WRITE_CODE");
         if (raw == null)
@@ -20604,37 +20606,6 @@ const getWriteCode = () => {
     catch {
         return null;
     }
-};
-const STATE_KEY = "userlensSessionRec";
-function readSessionState() {
-    try {
-        const raw = window.sessionStorage.getItem(STATE_KEY);
-        if (!raw)
-            return null;
-        const parsed = JSON.parse(raw);
-        if (typeof parsed !== "object" || parsed === null ||
-            typeof parsed.session_uuid !== "string" ||
-            typeof parsed.last_active !== "number" ||
-            typeof parsed.chunk_seq !== "number" ||
-            typeof parsed.initial_url !== "string")
-            return null;
-        return parsed;
-    }
-    catch {
-        return null;
-    }
-}
-function writeSessionState(state) {
-    try {
-        window.sessionStorage.setItem(STATE_KEY, JSON.stringify(state));
-    }
-    catch { }
-}
-function clearSessionState() {
-    try {
-        window.sessionStorage.removeItem(STATE_KEY);
-    }
-    catch { }
 }
 
 const INGEST_BASE_URL = "https://ul-ingest.userlens.io";
@@ -20646,15 +20617,13 @@ const uploadSessionEvents = async (args) => {
     }
     const body = {
         session_uuid: args.session_uuid,
+        window_id: args.window_id,
         chunk_seq: args.chunk_seq,
         chunk_start_ts: args.chunk_start_ts,
         chunk_end_ts: args.chunk_end_ts,
         user_id: args.user_id,
         events: args.events,
     };
-    if (args.initial_url !== undefined) {
-        body.initial_url = args.initial_url;
-    }
     const res = await fetch(`${INGEST_BASE_URL}/session-recording`, {
         method: "POST",
         headers: {
@@ -20669,7 +20638,224 @@ const uploadSessionEvents = async (args) => {
     return "ok";
 };
 
-var _SessionRecorder_instances, _SessionRecorder_uploading, _SessionRecorder_uploadingMaxTs, _SessionRecorder_bufferTimer, _SessionRecorder_log, _SessionRecorder_initRecorder, _SessionRecorder_isUserInteraction, _SessionRecorder_handleEvent, _SessionRecorder_armBufferTimer, _SessionRecorder_flushBuffer, _SessionRecorder_resetSession, _SessionRecorder_createSession, _SessionRecorder_handlePageHide, _SessionRecorder_initListeners, _SessionRecorder_trackEvents, _SessionRecorder_clearEvents;
+const SHARED_KEY = "userlensSession";
+const WINDOW_KEY = "userlensWindow";
+// Set in sessionStorage on construct, cleared on pagehide. If we read it on
+// init and it's already set, sessionStorage was cloned (Cmd+click, duplicate,
+// window.open) — discard inherited window_id and mint a fresh one.
+const PRIMARY_WINDOW_KEY = "userlensPrimaryWindow";
+function readSharedSessionState() {
+    try {
+        const raw = window.localStorage.getItem(SHARED_KEY);
+        if (!raw)
+            return null;
+        const parsed = JSON.parse(raw);
+        if (typeof parsed !== "object" || parsed === null ||
+            typeof parsed.session_uuid !== "string" ||
+            typeof parsed.last_active !== "number")
+            return null;
+        return parsed;
+    }
+    catch {
+        return null;
+    }
+}
+function writeSharedSessionState(state) {
+    try {
+        window.localStorage.setItem(SHARED_KEY, JSON.stringify(state));
+    }
+    catch { }
+}
+function clearSharedSessionState() {
+    try {
+        window.localStorage.removeItem(SHARED_KEY);
+    }
+    catch { }
+}
+function readWindowState() {
+    try {
+        const raw = window.sessionStorage.getItem(WINDOW_KEY);
+        if (!raw)
+            return null;
+        const parsed = JSON.parse(raw);
+        if (typeof parsed !== "object" || parsed === null ||
+            typeof parsed.window_id !== "string" ||
+            typeof parsed.chunk_seq !== "number")
+            return null;
+        return parsed;
+    }
+    catch {
+        return null;
+    }
+}
+function writeWindowState(state) {
+    try {
+        window.sessionStorage.setItem(WINDOW_KEY, JSON.stringify(state));
+    }
+    catch { }
+}
+function clearWindowState() {
+    try {
+        window.sessionStorage.removeItem(WINDOW_KEY);
+    }
+    catch { }
+}
+function wasPrimaryWindowFlagAlreadySet() {
+    try {
+        return window.sessionStorage.getItem(PRIMARY_WINDOW_KEY) === "1";
+    }
+    catch {
+        return false;
+    }
+}
+function markPrimaryWindow() {
+    try {
+        window.sessionStorage.setItem(PRIMARY_WINDOW_KEY, "1");
+    }
+    catch { }
+}
+function clearPrimaryWindowFlag() {
+    try {
+        window.sessionStorage.removeItem(PRIMARY_WINDOW_KEY);
+    }
+    catch { }
+}
+
+var _SessionManager_instances, _SessionManager_initWindow, _SessionManager_joinOrStartSession, _SessionManager_startFresh;
+/**
+ * Owns the (session_uuid, window_id, chunk_seq, last_active) lifecycle.
+ *
+ * Two storage scopes:
+ *   - shared (localStorage): session_uuid + last_active — visible to every tab
+ *     of the same origin so tabs can adopt one logical session and a single
+ *     idle timeout governs the whole user.
+ *   - per-tab (sessionStorage): window_id + chunk_seq — independent per tab so
+ *     concurrent tabs can upload chunks without colliding on chunk_seq.
+ *
+ * The recorder talks to this class instead of touching storage directly.
+ */
+class SessionManager {
+    constructor(timeoutMs) {
+        _SessionManager_instances.add(this);
+        this.timeoutMs = timeoutMs;
+    }
+    initialize() {
+        __classPrivateFieldGet(this, _SessionManager_instances, "m", _SessionManager_initWindow).call(this);
+        __classPrivateFieldGet(this, _SessionManager_instances, "m", _SessionManager_joinOrStartSession).call(this);
+    }
+    get sessionUuid() {
+        return this._sessionUuid;
+    }
+    get windowId() {
+        return this._windowId;
+    }
+    /**
+     * Reconciles in-memory session_uuid with whatever shared storage says.
+     * Called on every event so cross-tab session changes are picked up quickly.
+     *
+     * Returns:
+     *   "expired" — shared session has been idle past timeout; we rotated.
+     *   "rotated" — another tab rotated the session_uuid; we adopted it.
+     *   "none"    — no change, business as usual.
+     *
+     * Caller takes a fresh full snapshot on "expired" or "rotated" so this
+     * window's first chunk in the new session is replayable on its own.
+     */
+    syncWithSharedState(now) {
+        const shared = readSharedSessionState();
+        if (shared && now - shared.last_active > this.timeoutMs) {
+            __classPrivateFieldGet(this, _SessionManager_instances, "m", _SessionManager_startFresh).call(this, now);
+            return "expired";
+        }
+        if (shared && shared.session_uuid !== this._sessionUuid) {
+            this._sessionUuid = shared.session_uuid;
+            writeWindowState({ window_id: this._windowId, chunk_seq: 0 });
+            return "rotated";
+        }
+        return "none";
+    }
+    /** Bump shared last_active. Call only on real user interactions. */
+    bumpActivity(now) {
+        const latest = readSharedSessionState();
+        if (latest) {
+            writeSharedSessionState({ ...latest, last_active: now });
+        }
+    }
+    /** Read this window's current chunk_seq for a pending upload. */
+    currentChunkSeq() {
+        var _a, _b;
+        return (_b = (_a = readWindowState()) === null || _a === void 0 ? void 0 : _a.chunk_seq) !== null && _b !== void 0 ? _b : null;
+    }
+    /**
+     * Mark a chunk_seq as committed after a successful upload. No-ops if the
+     * stored seq has moved on (e.g. a session rotation reset it to 0 mid-flight).
+     */
+    commitChunkSeq(uploadedSeq) {
+        const after = readWindowState();
+        if (after && after.window_id === this._windowId && after.chunk_seq === uploadedSeq) {
+            writeWindowState({ window_id: this._windowId, chunk_seq: uploadedSeq + 1 });
+        }
+    }
+    /**
+     * Reserve and return the current chunk_seq for a pagehide flush, advancing
+     * storage so the next normal upload uses seq+1. Returns null if window state
+     * is missing.
+     */
+    reserveChunkSeq() {
+        const win = readWindowState();
+        if (!win)
+            return null;
+        writeWindowState({ window_id: this._windowId, chunk_seq: win.chunk_seq + 1 });
+        return win.chunk_seq;
+    }
+    /** Hard reset: wipe shared session and start a fresh one. */
+    reset() {
+        clearSharedSessionState();
+        __classPrivateFieldGet(this, _SessionManager_instances, "m", _SessionManager_joinOrStartSession).call(this);
+    }
+    /**
+     * Called from pagehide. Lets a future reload of the same tab reuse the
+     * window_id (because the flag is gone), while a cloned tab still sees the
+     * flag set in its inherited sessionStorage and treats itself as a duplicate.
+     */
+    notifyPageHide() {
+        clearPrimaryWindowFlag();
+    }
+    /** Full teardown — call on stop(). */
+    dispose() {
+        clearSharedSessionState();
+        clearWindowState();
+        clearPrimaryWindowFlag();
+    }
+}
+_SessionManager_instances = new WeakSet(), _SessionManager_initWindow = function _SessionManager_initWindow() {
+    const cloned = wasPrimaryWindowFlagAlreadySet();
+    const existing = readWindowState();
+    if (existing && !cloned) {
+        this._windowId = existing.window_id;
+    }
+    else {
+        this._windowId = generateUuid();
+        writeWindowState({ window_id: this._windowId, chunk_seq: 0 });
+    }
+    markPrimaryWindow();
+}, _SessionManager_joinOrStartSession = function _SessionManager_joinOrStartSession() {
+    const now = Date.now();
+    const shared = readSharedSessionState();
+    if (!shared || now - shared.last_active > this.timeoutMs) {
+        __classPrivateFieldGet(this, _SessionManager_instances, "m", _SessionManager_startFresh).call(this, now);
+    }
+    else {
+        this._sessionUuid = shared.session_uuid;
+        writeSharedSessionState({ ...shared, last_active: now });
+    }
+}, _SessionManager_startFresh = function _SessionManager_startFresh(now) {
+    this._sessionUuid = generateUuid();
+    writeSharedSessionState({ session_uuid: this._sessionUuid, last_active: now });
+    writeWindowState({ window_id: this._windowId, chunk_seq: 0 });
+};
+
+var _SessionRecorder_instances, _SessionRecorder_uploading, _SessionRecorder_uploadingMaxTs, _SessionRecorder_bufferTimer, _SessionRecorder_log, _SessionRecorder_initRecorder, _SessionRecorder_isUserInteraction, _SessionRecorder_handleEvent, _SessionRecorder_armBufferTimer, _SessionRecorder_flushBuffer, _SessionRecorder_handlePageHide, _SessionRecorder_handleVisibilityChange, _SessionRecorder_initListeners, _SessionRecorder_trackEvents, _SessionRecorder_clearEvents;
 const BUFFER_TIMEOUT_MS = 2000;
 const MAX_BUFFER_BYTES = 900 * 1024;
 function estimateEventSize(event) {
@@ -20693,6 +20879,7 @@ class SessionRecorder {
         _SessionRecorder_bufferTimer.set(this, null);
         _SessionRecorder_handlePageHide.set(this, () => {
             try {
+                this.sessionManager.notifyPageHide();
                 if (this.sessionEvents.length === 0)
                     return;
                 let events;
@@ -20704,24 +20891,21 @@ class SessionRecorder {
                 }
                 if (events.length === 0)
                     return;
-                const state = readSessionState();
-                if (!state)
+                const chunk_seq = this.sessionManager.reserveChunkSeq();
+                if (chunk_seq === null)
                     return;
-                const chunk_seq = __classPrivateFieldGet(this, _SessionRecorder_uploading, "f") ? state.chunk_seq + 1 : state.chunk_seq;
-                writeSessionState({ ...state, chunk_seq: chunk_seq + 1 });
                 const start_ts_ms = events[0].timestamp;
                 const end_ts_ms = events[events.length - 1].timestamp;
-                const initial_url = chunk_seq === 0 ? state.initial_url : undefined;
                 const chunk_start_ts = new Date(start_ts_ms).toISOString();
                 const chunk_end_ts = new Date(end_ts_ms).toISOString();
                 if (this.mode === "manual") {
                     try {
                         void this.onEvents({
-                            session_uuid: this.sessionUuid,
+                            session_uuid: this.sessionManager.sessionUuid,
+                            window_id: this.sessionManager.windowId,
                             chunk_seq,
                             chunk_start_ts,
                             chunk_end_ts,
-                            initial_url,
                             events,
                             keepalive: true,
                         });
@@ -20733,11 +20917,11 @@ class SessionRecorder {
                 else {
                     uploadSessionEvents({
                         user_id: this.userId,
-                        session_uuid: this.sessionUuid,
+                        session_uuid: this.sessionManager.sessionUuid,
+                        window_id: this.sessionManager.windowId,
                         chunk_seq,
                         chunk_start_ts,
                         chunk_end_ts,
-                        initial_url,
                         events,
                         keepalive: true,
                     }).catch(() => { });
@@ -20749,6 +20933,19 @@ class SessionRecorder {
                 __classPrivateFieldGet(this, _SessionRecorder_instances, "m", _SessionRecorder_log).call(this, "Page hide handling failed", err);
             }
         });
+        // Player groups multi-tab recordings into segments by which tab was visible
+        // when. Without these markers it has to guess from chunk timestamps and
+        // active-source heuristics, which is unreliable when two tabs overlap.
+        _SessionRecorder_handleVisibilityChange.set(this, () => {
+            try {
+                if (typeof document === "undefined" || !document.visibilityState)
+                    return;
+                record.addCustomEvent("window " + document.visibilityState, {});
+            }
+            catch (err) {
+                __classPrivateFieldGet(this, _SessionRecorder_instances, "m", _SessionRecorder_log).call(this, "Visibility change handling failed", err);
+            }
+        });
         try {
             if (typeof window === "undefined")
                 return;
@@ -20793,6 +20990,7 @@ class SessionRecorder {
             this.maskingOptions = maskingOptions;
             this.recordCrossOriginIframes = recordCrossOriginIframes;
             this.sessionEvents = [];
+            this.sessionManager = new SessionManager(this.TIMEOUT);
             __classPrivateFieldGet(this, _SessionRecorder_instances, "m", _SessionRecorder_initRecorder).call(this);
         }
         catch (err) {
@@ -20801,7 +20999,8 @@ class SessionRecorder {
         }
     }
     getSessionId() {
-        return this.sessionUuid;
+        var _a;
+        return (_a = this.sessionManager) === null || _a === void 0 ? void 0 : _a.sessionUuid;
     }
     stop() {
         try {
@@ -20811,15 +21010,16 @@ class SessionRecorder {
             this.rrwebStop();
             this.rrwebStop = null;
             __classPrivateFieldGet(this, _SessionRecorder_instances, "m", _SessionRecorder_clearEvents).call(this);
-            clearSessionState();
+            this.sessionManager.dispose();
             window.removeEventListener("pagehide", __classPrivateFieldGet(this, _SessionRecorder_handlePageHide, "f"));
+            document.removeEventListener("visibilitychange", __classPrivateFieldGet(this, _SessionRecorder_handleVisibilityChange, "f"));
         }
         catch (err) {
             __classPrivateFieldGet(this, _SessionRecorder_instances, "m", _SessionRecorder_log).call(this, "Stop failed", err);
         }
     }
 }
-_SessionRecorder_uploading = new WeakMap(), _SessionRecorder_uploadingMaxTs = new WeakMap(), _SessionRecorder_bufferTimer = new WeakMap(), _SessionRecorder_handlePageHide = new WeakMap(), _SessionRecorder_instances = new WeakSet(), _SessionRecorder_log = function _SessionRecorder_log(message, error) {
+_SessionRecorder_uploading = new WeakMap(), _SessionRecorder_uploadingMaxTs = new WeakMap(), _SessionRecorder_bufferTimer = new WeakMap(), _SessionRecorder_handlePageHide = new WeakMap(), _SessionRecorder_handleVisibilityChange = new WeakMap(), _SessionRecorder_instances = new WeakSet(), _SessionRecorder_log = function _SessionRecorder_log(message, error) {
     if (!this.debug)
         return;
     if (error) {
@@ -20831,7 +21031,7 @@ _SessionRecorder_uploading = new WeakMap(), _SessionRecorder_uploadingMaxTs = ne
 }, _SessionRecorder_initRecorder = function _SessionRecorder_initRecorder() {
     if (this.rrwebStop)
         return;
-    __classPrivateFieldGet(this, _SessionRecorder_instances, "m", _SessionRecorder_createSession).call(this);
+    this.sessionManager.initialize();
     this.rrwebStop = record({
         emit: (event, isCheckout) => {
             __classPrivateFieldGet(this, _SessionRecorder_instances, "m", _SessionRecorder_handleEvent).call(this, event, isCheckout);
@@ -20855,16 +21055,16 @@ _SessionRecorder_uploading = new WeakMap(), _SessionRecorder_uploadingMaxTs = ne
 }, _SessionRecorder_handleEvent = function _SessionRecorder_handleEvent(event, _isCheckout) {
     try {
         const now = Date.now();
-        const state = readSessionState();
-        if (state && now - state.last_active > this.TIMEOUT) {
-            __classPrivateFieldGet(this, _SessionRecorder_instances, "m", _SessionRecorder_resetSession).call(this);
+        const change = this.sessionManager.syncWithSharedState(now);
+        if (change === "expired") {
+            __classPrivateFieldGet(this, _SessionRecorder_instances, "m", _SessionRecorder_clearEvents).call(this);
+            takeFullSnapshot(true);
+        }
+        else if (change === "rotated") {
             takeFullSnapshot(true);
         }
         if (__classPrivateFieldGet(this, _SessionRecorder_instances, "m", _SessionRecorder_isUserInteraction).call(this, event)) {
-            const latest = readSessionState();
-            if (latest) {
-                writeSessionState({ ...latest, last_active: now });
-            }
+            this.sessionManager.bumpActivity(now);
         }
         this.sessionEvents.push(event);
         this.bufferBytes += estimateEventSize(event);
@@ -20890,30 +21090,13 @@ _SessionRecorder_uploading = new WeakMap(), _SessionRecorder_uploadingMaxTs = ne
         __classPrivateFieldSet(this, _SessionRecorder_bufferTimer, null, "f");
     }
     void __classPrivateFieldGet(this, _SessionRecorder_instances, "m", _SessionRecorder_trackEvents).call(this);
-}, _SessionRecorder_resetSession = function _SessionRecorder_resetSession() {
-    clearSessionState();
-    __classPrivateFieldGet(this, _SessionRecorder_instances, "m", _SessionRecorder_clearEvents).call(this);
-    __classPrivateFieldGet(this, _SessionRecorder_instances, "m", _SessionRecorder_createSession).call(this);
-}, _SessionRecorder_createSession = function _SessionRecorder_createSession() {
-    const now = Date.now();
-    const state = readSessionState();
-    const isExpired = !state || now - state.last_active > this.TIMEOUT;
-    if (!state || isExpired) {
-        this.sessionUuid = generateUuid();
-        const initial_url = typeof window !== "undefined" ? window.location.href : "";
-        writeSessionState({
-            session_uuid: this.sessionUuid,
-            last_active: now,
-            chunk_seq: 0,
-            initial_url,
-        });
-    }
-    else {
-        this.sessionUuid = state.session_uuid;
-        writeSessionState({ ...state, last_active: now });
-    }
 }, _SessionRecorder_initListeners = function _SessionRecorder_initListeners() {
     window.addEventListener("pagehide", __classPrivateFieldGet(this, _SessionRecorder_handlePageHide, "f"));
+    document.addEventListener("visibilitychange", __classPrivateFieldGet(this, _SessionRecorder_handleVisibilityChange, "f"));
+    // Emit the initial state so the player knows whether this tab started
+    // visible or hidden (a tab opened in the background never fires
+    // visibilitychange until the user focuses it).
+    __classPrivateFieldGet(this, _SessionRecorder_handleVisibilityChange, "f").call(this);
 }, _SessionRecorder_trackEvents = async function _SessionRecorder_trackEvents() {
     if (__classPrivateFieldGet(this, _SessionRecorder_uploading, "f"))
         return;
@@ -20926,45 +21109,38 @@ _SessionRecorder_uploading = new WeakMap(), _SessionRecorder_uploadingMaxTs = ne
         __classPrivateFieldSet(this, _SessionRecorder_uploadingMaxTs, events[events.length - 1].timestamp, "f");
         const start_ts_ms = events[0].timestamp;
         const end_ts_ms = events[events.length - 1].timestamp;
-        const state = readSessionState();
-        if (!state) {
-            __classPrivateFieldGet(this, _SessionRecorder_instances, "m", _SessionRecorder_log).call(this, "No session state during upload — skipping chunk");
+        const chunk_seq = this.sessionManager.currentChunkSeq();
+        if (chunk_seq === null) {
+            __classPrivateFieldGet(this, _SessionRecorder_instances, "m", _SessionRecorder_log).call(this, "No window state during upload — skipping chunk");
             return;
         }
-        const chunk_seq = state.chunk_seq;
-        const initial_url = chunk_seq === 0 ? state.initial_url : undefined;
         const chunk_start_ts = new Date(start_ts_ms).toISOString();
         const chunk_end_ts = new Date(end_ts_ms).toISOString();
         if (this.mode === "manual") {
             await this.onEvents({
-                session_uuid: this.sessionUuid,
+                session_uuid: this.sessionManager.sessionUuid,
+                window_id: this.sessionManager.windowId,
                 chunk_seq,
                 chunk_start_ts,
                 chunk_end_ts,
-                initial_url,
                 events,
             });
         }
         else {
             await uploadSessionEvents({
                 user_id: this.userId,
-                session_uuid: this.sessionUuid,
+                session_uuid: this.sessionManager.sessionUuid,
+                window_id: this.sessionManager.windowId,
                 chunk_seq,
                 chunk_start_ts,
                 chunk_end_ts,
-                initial_url,
                 events,
             });
         }
         const removedBytes = events.reduce((sum, e) => sum + estimateEventSize(e), 0);
         this.sessionEvents = this.sessionEvents.slice(snapshot_count);
         this.bufferBytes = Math.max(0, this.bufferBytes - removedBytes);
-        const after = readSessionState();
-        if (after &&
-            after.session_uuid === state.session_uuid &&
-            after.chunk_seq === chunk_seq) {
-            writeSessionState({ ...after, chunk_seq: chunk_seq + 1 });
-        }
+        this.sessionManager.commitChunkSeq(chunk_seq);
     }
     catch (err) {
         __classPrivateFieldGet(this, _SessionRecorder_instances, "m", _SessionRecorder_log).call(this, "Event tracking failed", err);