@openreplay/tracker 18.0.17 → 18.1.0

package/dist/cjs/index.js

@@ -78,7 +78,7 @@ class ConditionsManager {
                 return resultCondition;
             }
         };
-        this.durationInt = null;
+        this.durationInts = [];
     }
     setConditions(conditions) {
         this.conditions = conditions;
@@ -171,18 +171,22 @@ class ConditionsManager {
             });
         }
     }
+    clearDurationInt(int) {
+        clearInterval(int);
+        this.durationInts = this.durationInts.filter((i) => i !== int);
+    }
     processDuration(durationMs, condName) {
-        this.durationInt = setInterval(() => {
-            const sessionLength = performance.now();
-            if (sessionLength > durationMs) {
+        // Track each interval independently: with more than one duration condition a
+        // single shared field would leak every interval but the last, and the timer
+        // would keep firing after it triggered.
+        const int = setInterval(() => {
+            if (performance.now() > durationMs) {
+                this.clearDurationInt(int);
                 this.trigger(condName);
             }
         }, 1000);
-        this.app.attachStopCallback(() => {
-            if (this.durationInt) {
-                clearInterval(this.durationInt);
-            }
-        });
+        this.durationInts.push(int);
+        this.app.attachStopCallback(() => this.clearDurationInt(int));
     }
     networkRequest(message) {
         // method - 2, url - 3, status - 6, duration - 8
@@ -701,13 +705,18 @@ function throttleWithTrailing(fn, interval) {
                 timeouts.delete(key);
             }
             lastCalls.set(key, now);
+            // args are consumed now; don't retain them keyed by every id we ever saw
+            lastArgs.delete(key);
             fn(key, ...args);
         }
         else if (!timeouts.has(key)) {
             const timeoutId = setTimeout(() => {
-                lastCalls.set(key, Date.now());
                 timeouts.delete(key);
                 const finalArgs = lastArgs.get(key);
+                // Trailing call closes the throttle window for this key: drop its
+                // bookkeeping so the maps don't grow one permanent entry per key.
+                lastArgs.delete(key);
+                lastCalls.delete(key);
                 fn(key, ...finalArgs);
             }, remaining);
             timeouts.set(key, timeoutId);
@@ -2954,10 +2963,18 @@ class Sanitizer {
             data = data.replace(/\d/g, '0');
         }
         if (this.options.obscureTextEmails) {
-            data = data.replace(/^\w+([+.-]\w+)*@\w+([.-]\w+)*\.\w{2,3}$/g, (email) => {
-                const [name, domain] = email.split('@');
-                const [domainName, host] = domain.split('.');
-                return `${stars(name)}@${stars(domainName)}.${stars(host)}`;
+            // Match every email-like substring anywhere in the text (not just when the
+            // whole node is a single email), and preserve every domain label including
+            // multi-part TLDs (e.g. .co.uk) so nothing leaks through unmasked.
+            data = data.replace(/[^\s@]+@[^\s@]+\.[^\s@]+/g, (email) => {
+                const atIdx = email.lastIndexOf('@');
+                const name = email.slice(0, atIdx);
+                const domain = email.slice(atIdx + 1);
+                const maskedDomain = domain
+                    .split('.')
+                    .map((part) => stars(part))
+                    .join('.');
+                return `${stars(name)}@${maskedDomain}`;
             });
         }
         return data;
@@ -2994,8 +3011,14 @@ async function parseUseEl(useElement, mode, domParser) {
             console.warn('Openreplay: Invalid xlink:href or href found on <use>.');
             return;
         }
-        if (iconCache[symbolId]) {
-            return iconCache[symbolId];
+        // Key the cache by url + symbol + mode: the same symbol id lives in different
+        // sprite files, and different modes store different value shapes (object vs
+        // string vs data-url), so keying by symbolId alone returns the wrong asset.
+        // Namespace remote vs in-document sprites so a relative sprite file literally
+        // named "local" can't collide with the in-document bucket.
+        const cacheKey = url ? `url:${url}#${symbolId}#${mode}` : `doc:${symbolId}#${mode}`;
+        if (iconCache[cacheKey]) {
+            return iconCache[cacheKey];
         }
         // happens if svg spritemap is local, fastest case for us
         if (!url && symbolId) {
@@ -3014,7 +3037,7 @@ async function parseUseEl(useElement, mode, domParser) {
           ${symbol.innerHTML}
         </svg>
       `;
-                iconCache[symbolId] = inlineSvg;
+                iconCache[cacheKey] = inlineSvg;
                 return inlineSvg;
             }
             else {
@@ -3049,10 +3072,21 @@ async function parseUseEl(useElement, mode, domParser) {
         }
         else {
             svgUrlCache[url] = 1;
-            const response = await fetch(url);
-            const svgText = await response.text();
-            svgDoc = domParser.parseFromString(svgText, 'image/svg+xml');
-            svgUrlCache[url] = svgDoc;
+            try {
+                const response = await fetch(url);
+                const svgText = await response.text();
+                svgDoc = domParser.parseFromString(svgText, 'image/svg+xml');
+                svgUrlCache[url] = svgDoc;
+            }
+            catch (e) {
+                // Clear the in-flight sentinel so a failed fetch doesn't wedge every
+                // future <use> for this url into a 10s poll-then-give-up loop.
+                delete svgUrlCache[url];
+                throw e;
+            }
+        }
+        if (!svgDoc) {
+            return;
         }
         // @ts-ignore
         const symbol = svgDoc.getElementById(symbolId);
@@ -3067,7 +3101,7 @@ async function parseUseEl(useElement, mode, domParser) {
           ${symbol.innerHTML}
         </svg>
       `;
-            iconCache[symbolId] = inlineSvg;
+            iconCache[cacheKey] = inlineSvg;
             return inlineSvg;
         }
         if (mode === 'dataurl') ;
@@ -3253,6 +3287,7 @@ class Observer {
             }
             if (value === null) {
                 this.app.send(RemoveNodeAttribute(id, name));
+                return;
             }
             if (isUseElement(node) && name === 'href' && !this.disableSprites) {
                 parseUseEl(node, 'svgtext', this.domParser)
@@ -4276,7 +4311,7 @@ class App {
         this.stopCallbacks = [];
         this.commitCallbacks = [];
         this.activityState = ActivityState.NotActive;
-        this.version = '18.0.17'; // TODO: version compatability check inside each plugin.
+        this.version = '18.1.0'; // TODO: version compatability check inside each plugin.
         this.socketMode = false;
         this.compressionThreshold = 24 * 1000;
         this.bc = null;
@@ -4288,6 +4323,7 @@ class App {
         this.frameOderNumber = 0;
         this.frameLevel = 0;
         this.emptyBatchCounter = 0;
+        this.lastHiddenAt = null;
         /** used by child iframes for crossdomain only */
         this.parentActive = false;
         this.checkStatus = () => {
@@ -4732,12 +4768,18 @@ class App {
             }
         };
         this.startTimeout = null;
-        this.restart = () => {
+        this.restart = (forceNew = false) => {
             this.stop(false);
             this.waitStatus(ActivityState.NotActive).then(() => {
                 this.allowAppStart();
-                this.start(this.prevOpts, true)
+                // Force a brand-new session when asked (e.g. a stale bfcache restore) without
+                // letting forceNew leak into later restarts through prevOpts.
+                const startOpts = forceNew ? { ...this.prevOpts, forceNew: true } : this.prevOpts;
+                this.start(startOpts, true)
                     .then((r) => {
+                    if (forceNew) {
+                        this.prevOpts = { ...this.prevOpts, forceNew: false };
+                    }
                     this.debug.info('Session restart', r);
                 })
                     .catch((e) => {
@@ -4745,6 +4787,34 @@ class App {
                 });
             });
         };
+        this.handlePageShow = (e) => {
+            // Only back-forward cache restores set persisted === true; a normal navigation is false.
+            if (!e || !e.persisted) {
+                return;
+            }
+            // Don't resurrect a tracker that was intentionally stopped.
+            if (this.activityState === ActivityState.NotActive) {
+                return;
+            }
+            try {
+                const frozenMs = this.lastHiddenAt != null ? Date.now() - this.lastHiddenAt : null;
+                this.lastHiddenAt = null;
+                const threshold = this.options.bfcacheRestartThreshold ?? 30 * 60 * 1000;
+                // If we couldn't measure the freeze, or it outlasted the threshold, the session has
+                // likely expired server-side - start a fresh one (forceNew). Otherwise let the
+                // resumed page continue on the existing session (preserving continuity).
+                if (frozenMs === null || frozenMs >= threshold) {
+                    this.debug.info('OpenReplay: restarting session after bfcache restore', { frozenMs });
+                    this.restart(true);
+                }
+                else {
+                    this.debug.info('OpenReplay: resuming session after bfcache restore', { frozenMs });
+                }
+            }
+            catch (err) {
+                this._debug('bfcache_restore', err);
+            }
+        };
         this.send = (message, urgent = false) => {
             if (this.activityState === ActivityState.NotActive) {
                 return;
@@ -4872,6 +4942,7 @@ class App {
             localStorage: null,
             sessionStorage: null,
             forceSingleTab: false,
+            bfcacheRestartThreshold: 30 * 60 * 1000,
             assistSocketHost: '',
             captureIFrames: true,
             obscureTextEmails: false,
@@ -5193,7 +5264,16 @@ class App {
                 }
             };
             this.attachEventListener(document.body, 'mouseleave', alertWorker, false, false);
-            this.attachEventListener(window, 'pagehide', alertWorker, false, false);
+            this.attachEventListener(window, 'pagehide', () => {
+                // pagehide is the entry point into the back-forward cache; remember when
+                // it fired so pageshow can measure how long the page stayed frozen.
+                this.lastHiddenAt = Date.now();
+                alertWorker();
+            }, false, false);
+            // Detect restores from the back-forward cache. Registered through
+            // attachEventListener so it's removed on stop (no leak) and a tracker that was
+            // intentionally stopped does not resurrect itself on a back/forward restore.
+            this.attachEventListener(window, 'pageshow', this.handlePageShow, false, false);
             // TODO: stop session after inactivity timeout (make configurable)
             this.attachEventListener(document, 'visibilitychange', (e) => document.visibilityState === 'hidden' && alertWorker(), false);
         }
@@ -5483,9 +5563,12 @@ class App {
             this.sessionStorage.removeItem(this.options.session_reset_key);
         }
     }
+    getSessionVersionHash() {
+        const PROTO_VERSION = '2';
+        return `${PROTO_VERSION}x${this.version}`;
+    }
     checkSessionToken(forceNew) {
-        const PROTO_VERSION = "2";
-        const versionHash = `${PROTO_VERSION}x${this.version}`;
+        const versionHash = this.getSessionVersionHash();
         const needReset = this.sessionStorage.getItem(this.options.session_reset_key) !== null;
         let needNewSessionID = forceNew || needReset;
         const sessionToken = this.session.getSessionToken(this.projectKey);
@@ -5816,6 +5899,7 @@ class App {
             }
             this.delay = delay;
             this.session.setSessionToken(token, this.projectKey);
+            this.sessionStorage.setItem(`${this.options.session_token_key}_version`, this.getSessionVersionHash());
             if (sessionToken && sessionToken !== token) {
                 this.bc?.postMessage({
                     type: proto.reset,
@@ -6155,6 +6239,9 @@ function Console (app, opts) {
     };
     app.attachStartCallback(reset);
     app.ticker.attach(reset, 33, false);
+    // Restorers for every method we patch, so we can put the host's console back
+    // when the session stops instead of leaving it proxied for the page's lifetime.
+    const restores = [];
     const patchConsole = (console, ctx) => {
         const handler = {
             apply: function (target, thisArg, argumentsList) {
@@ -6175,10 +6262,30 @@ function Console (app, opts) {
             }
             const fn = ctx.console[method];
             console[method] = new Proxy(fn, handler);
+            restores.push(() => {
+                console[method] = fn;
+            });
         });
     };
     const patchContext = app.safe((context) => patchConsole(context.console, context));
-    patchContext(window);
+    let patched = false;
+    const startPatching = () => {
+        if (patched) {
+            return;
+        }
+        patched = true;
+        patchContext(window);
+    };
+    // Patch immediately, and re-patch on any later start; restore on stop so the
+    // host console isn't left wrapped for the page's lifetime and capture is
+    // re-established symmetrically across a stop/restart.
+    startPatching();
+    app.attachStartCallback(startPatching);
+    app.attachStopCallback(() => {
+        patched = false;
+        restores.forEach((restore) => restore());
+        restores.length = 0;
+    });
     app.observer.attachContextCallback(patchContext);
 }
 
@@ -6499,7 +6606,7 @@ function Img (app) {
                 const target = mutation.target;
                 const id = app.nodes.getID(target);
                 if (id === undefined) {
-                    return;
+                    continue;
                 }
                 if (mutation.attributeName === 'src') {
                     sendSrc(id, target);
@@ -7439,15 +7546,12 @@ function CSSRules (app, opts) {
                 if (!sheetID)
                     continue;
                 if (options.checkLimit) {
-                    if (!checkIterations[sheetID]) {
-                        checkIterations[sheetID] = 0;
-                    }
-                    else {
-                        checkIterations[sheetID]++;
-                    }
+                    checkIterations[sheetID] = (checkIterations[sheetID] ?? 0) + 1;
                     if (checkIterations[sheetID] > options.checkLimit) {
                         trackedSheets.delete(sheet);
-                        return;
+                        // continue, not return: skipping one exhausted sheet must not
+                        // abandon the remaining tracked sheets in this scan.
+                        continue;
                     }
                 }
                 for (let j = 0; j < sheet.cssRules.length; j++) {
@@ -9243,7 +9347,7 @@ function webAnimations(app, options = {}) {
 /**
  * Detects client browser, OS, and device information
  */
-function uaParse(sWindow) {
+function uaParse(sWindow, onOsVersionUpdate) {
     const unknown = '-';
     // Screen detection
     let width = 0;
@@ -9402,7 +9506,11 @@ function uaParse(sWindow) {
                         .getHighEntropyValues(['platformVersion'])
                         .then((ua) => {
                         const version = parseInt(ua.platformVersion.split('.')[0], 10);
-                        osVersion = version < 13 ? '10' : '11';
+                        // uaParse has already returned by the time this resolves, so a local
+                        // assignment would be lost - notify the caller to update its state.
+                        const refined = version < 13 ? '10' : '11';
+                        osVersion = refined;
+                        onOsVersionUpdate?.(refined);
                     })
                         .catch(() => {
                         // ignore errors and keep osVersion as is
@@ -9578,7 +9686,12 @@ class ConstantProperties {
         this.clearSuperProperties = () => {
             this.localStorage.setItem(superPropKey, JSON.stringify({}));
         };
-        const { width, height, browser, browserVersion, browserMajorVersion, os, osVersion, mobile } = uaParse(win);
+        const { width, height, browser, browserVersion, browserMajorVersion, os, osVersion, mobile } = uaParse(win, (refinedOsVersion) => {
+            // Windows 10/11 are indistinguishable from the UA string; the async
+            // high-entropy result lands after construction, so update it live here.
+            // `all` is a getter, so later events pick up the corrected value.
+            this.osVersion = refinedOsVersion;
+        });
         const storedUserId = this.sessionStorage.getItem(userIdKey);
         if (storedUserId) {
             this.user_id = storedUserId;
@@ -9611,7 +9724,7 @@ class ConstantProperties {
             user_id: this.user_id,
             distinct_id: this.deviceId,
             sdk_edition: 'web',
-            sdk_version: '18.0.17',
+            sdk_version: '18.1.0',
             timezone: getUTCOffsetString(),
             search_engine: this.searchEngine,
         };
@@ -9961,7 +10074,15 @@ class Batcher {
         this.stopped = false;
         this.paused = false;
         this.onVisibilityChange = () => {
-            this.paused = document.hidden;
+            if (document.hidden) {
+                // The tab may be closing; flush now with keepalive so buffered events
+                // survive the transition instead of waiting for the (paused) interval.
+                this.flush(true);
+                this.paused = true;
+            }
+            else {
+                this.paused = false;
+            }
         };
     }
     getBatches() {
@@ -10046,8 +10167,9 @@ class Batcher {
         }
         return Array.from(uniqueEventsByType.values());
     }
-    sendBatch(batch) {
+    sendBatch(batch, keepalive = false, onTerminalFailure) {
         if (this.stopped) {
+            onTerminalFailure?.();
             return;
         }
         const sentBatch = batch;
@@ -10055,11 +10177,14 @@ class Batcher {
         const send = () => {
             const token = this.getToken();
             if (!token) {
+                // No token yet: keep the events so they go out once one is available.
+                onTerminalFailure?.();
                 return;
             }
             attempts++;
             return fetch(`${this.backendUrl}${this.apiEdp}`, {
                 method: 'POST',
+                keepalive,
                 headers: {
                     'Content-Type': 'application/json',
                     Authorization: `Bearer ${token}`,
@@ -10078,6 +10203,7 @@ class Batcher {
                             send();
                         });
                     }
+                    onTerminalFailure?.();
                     return;
                 }
                 if (response.status === 403) {
@@ -10086,6 +10212,7 @@ class Batcher {
                             send();
                         });
                     }
+                    onTerminalFailure?.();
                     return;
                 }
                 if (!response.ok) {
@@ -10096,6 +10223,9 @@ class Batcher {
                 if (attempts < this.retryLimit) {
                     setTimeout(() => void send(), this.retryTimeout);
                 }
+                else {
+                    onTerminalFailure?.();
+                }
             });
         };
         void send();
@@ -10112,16 +10242,38 @@ class Batcher {
             }
         }, this.autosendInterval);
     }
-    flush() {
-        const categories = Object.keys(this.batch);
-        const isEmpty = categories.every((category) => this.batch[category].length === 0);
+    flush(keepalive = false) {
+        const cats = Object.keys(this.batch);
+        const isEmpty = cats.every((category) => this.batch[category].length === 0);
         if (isEmpty) {
             return;
         }
-        this.sendBatch(this.getBatches());
-        categories.forEach((key) => {
+        const batches = this.getBatches();
+        // Snapshot what we're about to send so we can restore it if the request
+        // ultimately fails, instead of dropping events the moment we clear the buffer.
+        const snapshot = {
+            [categories.people]: [...batches.data[categories.people]],
+            [categories.events]: [...batches.data[categories.events]],
+        };
+        cats.forEach((key) => {
             this.batch[key] = [];
         });
+        this.sendBatch(batches, keepalive, () => this.requeue(snapshot));
+    }
+    requeue(snapshot) {
+        if (this.stopped) {
+            return;
+        }
+        // Put the failed events back at the front, ahead of anything queued since,
+        // so they're retried on the next flush rather than lost.
+        this.batch[categories.people] = [
+            ...snapshot[categories.people],
+            ...this.batch[categories.people],
+        ];
+        this.batch[categories.events] = [
+            ...snapshot[categories.events],
+            ...this.batch[categories.events],
+        ];
     }
     stop() {
         this.flush();
@@ -10313,7 +10465,7 @@ class API {
         this.signalStartIssue = (reason, missingApi) => {
             const doNotTrack = this.checkDoNotTrack();
             console.log("Tracker couldn't start due to:", JSON.stringify({
-                trackerVersion: '18.0.17',
+                trackerVersion: '18.1.0',
                 projectKey: this.options.projectKey,
                 doNotTrack,
                 reason: missingApi.length ? `missing api: ${missingApi.join(',')}` : reason,