@openreplay/tracker 18.0.1 → 18.0.3

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

@@ -172,11 +172,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] }
@@ -291,6 +290,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

@@ -2386,8 +2386,44 @@ function inlineRemoteCss(node, id, baseHref, getNextID, insertRule, addOwner, fo
         })
             .catch(error => {
             console.error(`OpenReplay: Failed to fetch CSS from ${node.href}:`, error);
+            // Fetch failed (likely CORS) — retry via load event + sheet access
+            retryViaLoadEvent();
         });
     }
+    else {
+        retryViaLoadEvent();
+    }
+    function retryViaLoadEvent() {
+        const trySheet = () => {
+            const loadedSheet = node.sheet;
+            if (loadedSheet) {
+                try {
+                    const cssText = stringifyStylesheet(loadedSheet);
+                    if (cssText) {
+                        if (sendPlain && onPlain) {
+                            onPlain(cssText, fakeIdHolder++);
+                        }
+                        else {
+                            processCssText(cssText);
+                        }
+                        return;
+                    }
+                }
+                catch (e) {
+                    // cross-origin sheet — nothing more we can do
+                }
+            }
+        };
+        if (node.sheet) {
+            trySheet();
+        }
+        else {
+            node.addEventListener('load', function onLoad() {
+                node.removeEventListener('load', onLoad);
+                trySheet();
+            });
+        }
+    }
     function processCssText(cssText) {
         // Remove comments
         cssText = cssText.replace(/\/\*[\s\S]*?\*\//g, '');
@@ -2609,7 +2645,6 @@ function ConstructedStyleSheets (app) {
     if (!hasAdoptedSS(document)) {
         return;
     }
-    const styleSheetIDMap = new Map();
     const adoptedStyleSheetsOwnings = new Map();
     const sendAdoptedStyleSheetsUpdate = (root) => setTimeout(() => {
         let nodeID = app.nodes.getID(root);
@@ -2874,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);
@@ -3020,18 +3061,23 @@ 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));
-                        setTimeout(() => {
-                            this.app.send(SetCSSDataURLBased(fakeTextId, cssText, this.app.getBaseHref()));
-                        }, 10);
+                        this.app.send(SetCSSDataURLBased(fakeTextId, cssText, this.app.getBaseHref()));
                     });
                 }, 0);
                 return;
@@ -3295,6 +3341,7 @@ class Observer {
         this.observer.disconnect();
         this.clear();
         this.throttledSetNodeData.clear();
+        this.generation++;
     }
 }
 
@@ -3958,7 +4005,7 @@ class App {
         this.stopCallbacks = [];
         this.commitCallbacks = [];
         this.activityState = ActivityState.NotActive;
-        this.version = '18.0.1'; // TODO: version compatability check inside each plugin.
+        this.version = '18.0.3'; // TODO: version compatability check inside each plugin.
         this.socketMode = false;
         this.compressionThreshold = 24 * 1000;
         this.bc = null;
@@ -3980,12 +4027,19 @@ 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);
                     }
+                    if (data.id !== undefined) {
+                        this.rootId = data.id;
+                    }
                     this.allowAppStart();
                     void this.start();
                 }
@@ -4011,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 }, '*');
@@ -4119,20 +4178,41 @@ 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 };
                     if (nextCommand === proto.startIframe) {
                         message.token = this.session.getSessionToken(this.projectKey);
+                        const targetFrame = this.pageFrames.find((f) => f.contentWindow === event.source)
+                            || Array.from(document.querySelectorAll('iframe')).find((f) => f.contentWindow === event.source);
+                        if (targetFrame) {
+                            const nodeId = targetFrame[this.options.node_id];
+                            if (nodeId !== undefined) {
+                                message.id = nodeId;
+                            }
+                        }
                     }
                     // @ts-ignore
                     event.source?.postMessage(message, '*');
                     if (this.pollingQueue[nextCommand].length === 0) {
+                        delete this.pollingQueue[nextCommand];
                         this.pollingQueue.order.shift();
                     }
                 }
@@ -4146,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];
         };
@@ -4458,6 +4543,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) {
@@ -5039,6 +5134,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);
@@ -5180,8 +5278,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) {
@@ -5344,6 +5442,7 @@ class App {
                 this.canvasRecorder?.clear();
                 this.messages.length = 0;
                 this.parentActive = false;
+                this.pageFrames = [];
             }
             finally {
                 this.activityState = ActivityState.NotActive;
@@ -8873,7 +8972,7 @@ class ConstantProperties {
             user_id: this.user_id,
             distinct_id: this.deviceId,
             sdk_edition: 'web',
-            sdk_version: '18.0.1',
+            sdk_version: '18.0.3',
             timezone: getUTCOffsetString(),
             search_engine: this.searchEngine,
         };
@@ -9575,7 +9674,7 @@ class API {
         this.signalStartIssue = (reason, missingApi) => {
             const doNotTrack = this.checkDoNotTrack();
             console.log("Tracker couldn't start due to:", JSON.stringify({
-                trackerVersion: '18.0.1',
+                trackerVersion: '18.0.3',
                 projectKey: this.options.projectKey,
                 doNotTrack,
                 reason: missingApi.length ? `missing api: ${missingApi.join(',')}` : reason,