@openreplay/tracker 17.2.8 → 17.2.10

package/dist/cjs/entry.js

@@ -2913,6 +2913,12 @@ class Observer {
         this.inlineRemoteCss = false;
         this.inlinerOptions = undefined;
         this.domParser = new DOMParser();
+        /**
+         * Bumped on every disconnect(). Stale async CSS-inlining callbacks from a
+         * previous session (e.g. agent reload → tracker restart) compare against
+         * this and bail instead of sending messages that reference vanished node ids.
+         */
+        this.generation = 0;
         this.throttling = true;
         this.throttledSetNodeData = throttleWithTrailing((id, parentElement, data) => this.sendNodeData(id, parentElement, data), 30);
         this.throttling = !Boolean(options.disableThrottling);
@@ -3059,14 +3065,21 @@ class Observer {
         }
         if (name === 'style' || (name === 'href' && hasTag(node, 'link'))) {
             if ('rel' in node && node.rel === 'stylesheet' && this.inlineRemoteCss) {
+                const gen = this.generation;
                 setTimeout(() => {
                     inlineRemoteCss(
                     // @ts-ignore
                     node, id, this.app.getBaseHref(), nextID, (id, cssText, index, baseHref) => {
+                        if (this.generation !== gen)
+                            return;
                         this.app.send(AdoptedSSInsertRuleURLBased(id, cssText, index, baseHref));
                     }, (sheetId, ownerId) => {
+                        if (this.generation !== gen)
+                            return;
                         this.app.send(AdoptedSSAddOwner(sheetId, ownerId));
                     }, this.inlinerOptions?.forceFetch, this.inlinerOptions?.forcePlain, (cssText, fakeTextId) => {
+                        if (this.generation !== gen)
+                            return;
                         this.app.send(CreateTextNode(fakeTextId, id, 0));
                         this.app.send(SetCSSDataURLBased(fakeTextId, cssText, this.app.getBaseHref()));
                     });
@@ -3332,6 +3345,7 @@ class Observer {
         this.observer.disconnect();
         this.clear();
         this.throttledSetNodeData.clear();
+        this.generation++;
     }
 }
 
@@ -3995,7 +4009,7 @@ class App {
         this.stopCallbacks = [];
         this.commitCallbacks = [];
         this.activityState = ActivityState.NotActive;
-        this.version = '17.2.8'; // TODO: version compatability check inside each plugin.
+        this.version = '17.2.10'; // TODO: version compatability check inside each plugin.
         this.socketMode = false;
         this.compressionThreshold = 24 * 1000;
         this.bc = null;
@@ -4017,9 +4031,13 @@ class App {
             if (!data || event.source === window)
                 return;
             if (data.line === proto.startIframe) {
-                if (this.active())
+                // Avoid corrupting an in-flight start; let it complete.
+                if (this.activityState === ActivityState.Starting)
                     return;
                 try {
+                    if (this.active()) {
+                        this.stop();
+                    }
                     if (data.token) {
                         this.session.setSessionToken(data.token, this.projectKey);
                     }
@@ -4051,17 +4069,22 @@ class App {
                 }
             }
         };
-        /**
-         * context ids for iframes,
-         * order is not so important as long as its consistent
-         * */
         this.trackedFrames = [];
+        this.frameLastSeen = new Map();
+        this.FRAME_STALE_MS = 1500;
         this.crossDomainIframeListener = (event) => {
-            if (!this.active() || event.source === window)
+            if (event.source === window)
                 return;
             const { data } = event;
             if (!data)
                 return;
+            // Record liveness regardless of our own active state so the queue can prune
+            // stale contexts reliably once we resume dispatching commands after a cycle.
+            if ((data.line === proto.polling || data.line === proto.iframeSignal) && data.context) {
+                this.frameLastSeen.set(data.context, Date.now());
+            }
+            if (!this.active())
+                return;
             if (data.line === proto.iframeSignal) {
                 // @ts-ignore
                 event.source?.postMessage({ ping: true, line: proto.parentAlive }, '*');
@@ -4159,11 +4182,23 @@ class App {
                 if (!this.pollingQueue.order.length) {
                     return;
                 }
-                const nextCommand = this.pollingQueue.order[0];
-                if (nextCommand && this.pollingQueue[nextCommand].length === 0) {
-                    this.pollingQueue.order = this.pollingQueue.order.filter((c) => c !== nextCommand);
+                this.pruneStaleFrames();
+                const liveSet = new Set(this.trackedFrames);
+                while (this.pollingQueue.order.length > 0) {
+                    const head = this.pollingQueue.order[0];
+                    this.pollingQueue[head] = this.pollingQueue[head].filter((ctx) => liveSet.has(ctx));
+                    if (this.pollingQueue[head].length === 0) {
+                        delete this.pollingQueue[head];
+                        this.pollingQueue.order.shift();
+                    }
+                    else {
+                        break;
+                    }
+                }
+                if (!this.pollingQueue.order.length) {
                     return;
                 }
+                const nextCommand = this.pollingQueue.order[0];
                 if (this.pollingQueue[nextCommand].includes(data.context)) {
                     this.pollingQueue[nextCommand] = this.pollingQueue[nextCommand].filter((c) => c !== data.context);
                     const message = { line: nextCommand };
@@ -4181,6 +4216,7 @@ class App {
                     // @ts-ignore
                     event.source?.postMessage(message, '*');
                     if (this.pollingQueue[nextCommand].length === 0) {
+                        delete this.pollingQueue[nextCommand];
                         this.pollingQueue.order.shift();
                     }
                 }
@@ -4194,6 +4230,11 @@ class App {
             order: [],
         };
         this.addCommand = (cmd) => {
+            this.pruneStaleFrames();
+            if (this.pollingQueue[cmd]) {
+                this.pollingQueue[cmd] = Array.from(new Set([...this.pollingQueue[cmd], ...this.trackedFrames]));
+                return;
+            }
             this.pollingQueue.order.push(cmd);
             this.pollingQueue[cmd] = [...this.trackedFrames];
         };
@@ -4505,6 +4546,16 @@ class App {
             };
         }
     }
+    pruneStaleFrames() {
+        const staleAfter = Date.now() - this.FRAME_STALE_MS;
+        this.trackedFrames = this.trackedFrames.filter((ctx) => {
+            const last = this.frameLastSeen.get(ctx);
+            if (last !== undefined && last >= staleAfter)
+                return true;
+            this.frameLastSeen.delete(ctx);
+            return false;
+        });
+    }
     allowAppStart() {
         this.canStart = true;
         if (this.startTimeout) {
@@ -5055,6 +5106,9 @@ class App {
         if (Object.keys(startOpts).length !== 0) {
             this.prevOpts = startOpts;
         }
+        if (startOpts.startCallback) {
+            this.userStartCallback = startOpts.startCallback;
+        }
         const isColdStart = this.activityState === ActivityState.ColdStart;
         if (isColdStart && this.coldInterval) {
             clearInterval(this.coldInterval);
@@ -5194,8 +5248,8 @@ class App {
             // TODO: start as early as possible (before receiving the token)
             /** after start */
             this.startCallbacks.forEach((cb) => cb(onStartInfo)); // MBTODO: callbacks after DOM "mounted" (observed)
-            if (startOpts.startCallback) {
-                startOpts.startCallback(SuccessfulStart(onStartInfo));
+            if (this.userStartCallback) {
+                this.userStartCallback(SuccessfulStart(onStartInfo));
             }
             this.activityState = ActivityState.Active;
             if (this.options.crossdomain?.enabled) {
@@ -5358,6 +5412,7 @@ class App {
                 this.canvasRecorder?.clear();
                 this.messages.length = 0;
                 this.parentActive = false;
+                this.pageFrames = [];
             }
             finally {
                 this.activityState = ActivityState.NotActive;
@@ -5984,9 +6039,11 @@ function Input (app, opts) {
     }
     const inputValues = new Map();
     const checkboxValues = new Map();
+    const selectValues = new Map();
     app.attachStopCallback(() => {
         inputValues.clear();
         checkboxValues.clear();
+        selectValues.clear();
         tagSelectorMap.clear();
     });
     function trackInputValue(id, node) {
@@ -6003,6 +6060,13 @@ function Input (app, opts) {
         checkboxValues.set(id, value);
         app.send(SetInputChecked(id, value));
     }
+    function trackSelectValue(id, node) {
+        if (selectValues.get(id) === node.value) {
+            return;
+        }
+        selectValues.set(id, node.value);
+        sendInputValue(id, node);
+    }
     // The only way (to our knowledge) to track all kinds of input changes, including those made by JS
     app.ticker.attach(() => {
         inputValues.forEach((value, id) => {
@@ -6017,6 +6081,12 @@ function Input (app, opts) {
                 return checkboxValues.delete(id);
             trackCheckboxValue(id, node.checked);
         });
+        selectValues.forEach((_, id) => {
+            const node = app.nodes.getNode(id);
+            if (!node)
+                return selectValues.delete(id);
+            trackSelectValue(id, node);
+        });
     }, 3);
     function sendInputChange(id, node, hesitationTime, inputTime) {
         const { value, mask } = getInputValue(id, node);
@@ -6033,8 +6103,8 @@ function Input (app, opts) {
         }
         // TODO: support multiple select (?): use selectedOptions;
         if (hasTag(node, 'select')) {
-            sendInputValue(id, node);
-            app.nodes.attachNodeListener(node, 'change', () => sendInputValue(id, node));
+            trackSelectValue(id, node);
+            app.nodes.attachNodeListener(node, 'change', () => trackSelectValue(id, node));
         }
         if (isTextFieldElement(node)) {
             trackInputValue(id, node);
@@ -8887,7 +8957,7 @@ class ConstantProperties {
             user_id: this.user_id,
             distinct_id: this.deviceId,
             sdk_edition: 'web',
-            sdk_version: '17.2.8',
+            sdk_version: '17.2.10',
             timezone: getUTCOffsetString(),
             search_engine: this.searchEngine,
         };
@@ -9589,7 +9659,7 @@ class API {
         this.signalStartIssue = (reason, missingApi) => {
             const doNotTrack = this.checkDoNotTrack();
             console.log("Tracker couldn't start due to:", JSON.stringify({
-                trackerVersion: '17.2.8',
+                trackerVersion: '17.2.10',
                 projectKey: this.options.projectKey,
                 doNotTrack,
                 reason: missingApi.length ? `missing api: ${missingApi.join(',')}` : reason,