@openreplay/tracker 17.2.8 → 17.2.9

package/dist/cjs/main/app/index.d.ts

@@ -171,11 +171,10 @@ export default class App {
     parentActive: boolean;
     checkStatus: () => boolean;
     parentCrossDomainFrameListener: (event: MessageEvent) => void;
-    /**
-     * context ids for iframes,
-     * order is not so important as long as its consistent
-     * */
     trackedFrames: string[];
+    private frameLastSeen;
+    private readonly FRAME_STALE_MS;
+    private pruneStaleFrames;
     crossDomainIframeListener: (event: MessageEvent) => void;
     /**
      * { command : [remaining iframes] }
@@ -290,6 +289,7 @@ export default class App {
      * */
     uploadOfflineRecording(): Promise<void>;
     prevOpts: StartOptions;
+    private userStartCallback?;
     private _start;
     restartCanvasTracking: () => void;
     flushBuffer: (buffer: Message[]) => Promise<unknown>;

package/dist/cjs/main/app/observer/observer.d.ts

@@ -28,6 +28,12 @@ export default abstract class Observer {
     private readonly inlineRemoteCss;
     private readonly inlinerOptions;
     private readonly 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.
+     */
+    private generation;
     constructor(app: App, isTopContext?: boolean, options?: Options);
     private clear;
     /**

package/dist/lib/entry.js

@@ -2909,6 +2909,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);
@@ -3055,14 +3061,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()));
                     });
@@ -3328,6 +3341,7 @@ class Observer {
         this.observer.disconnect();
         this.clear();
         this.throttledSetNodeData.clear();
+        this.generation++;
     }
 }
 
@@ -3991,7 +4005,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.9'; // TODO: version compatability check inside each plugin.
         this.socketMode = false;
         this.compressionThreshold = 24 * 1000;
         this.bc = null;
@@ -4013,9 +4027,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);
                     }
@@ -4047,17 +4065,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 }, '*');
@@ -4155,11 +4178,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 };
@@ -4177,6 +4212,7 @@ class App {
                     // @ts-ignore
                     event.source?.postMessage(message, '*');
                     if (this.pollingQueue[nextCommand].length === 0) {
+                        delete this.pollingQueue[nextCommand];
                         this.pollingQueue.order.shift();
                     }
                 }
@@ -4190,6 +4226,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];
         };
@@ -4501,6 +4542,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) {
@@ -5051,6 +5102,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);
@@ -5190,8 +5244,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) {
@@ -5354,6 +5408,7 @@ class App {
                 this.canvasRecorder?.clear();
                 this.messages.length = 0;
                 this.parentActive = false;
+                this.pageFrames = [];
             }
             finally {
                 this.activityState = ActivityState.NotActive;
@@ -8883,7 +8938,7 @@ class ConstantProperties {
             user_id: this.user_id,
             distinct_id: this.deviceId,
             sdk_edition: 'web',
-            sdk_version: '17.2.8',
+            sdk_version: '17.2.9',
             timezone: getUTCOffsetString(),
             search_engine: this.searchEngine,
         };
@@ -9585,7 +9640,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.9',
                 projectKey: this.options.projectKey,
                 doNotTrack,
                 reason: missingApi.length ? `missing api: ${missingApi.join(',')}` : reason,