@openreplay/tracker 18.0.11 → 18.0.12-beta.1

package/dist/cjs/index.js

@@ -2715,9 +2715,15 @@ function ConstructedStyleSheets (app) {
                     app.send(AdoptedSSAddOwner(sheetID, nodeID));
                 }
                 if (init) {
-                    const rules = s.cssRules;
-                    for (let i = 0; i < rules.length; i++) {
-                        app.send(AdoptedSSInsertRuleURLBased(sheetID, rules[i].cssText, i, app.getBaseHref()));
+                    try {
+                        const rules = s.cssRules;
+                        for (let i = 0; i < rules.length; i++) {
+                            app.send(AdoptedSSInsertRuleURLBased(sheetID, rules[i].cssText, i, app.getBaseHref()));
+                        }
+                    }
+                    catch (e) {
+                        app.debug.log('Couldnt access adopted stylesheet', e);
+                        // Skip inaccessible (cross-origin) stylesheet
                     }
                 }
                 nowOwning.push(sheetID);
@@ -4028,12 +4034,16 @@ const proto = {
     parentAlive: 'signal that parent is live',
     killIframe: 'stop tracker inside frame',
     startIframe: 'start tracker inside frame',
+    // child -> parent: once-per-minute encoded debug snapshot from inside an iframe
+    iframeDebug: 'iframe debug snapshot',
     // checking updates
     polling: 'hello-how-are-you-im-under-the-water-please-help-me',
     // happens if tab is old and has outdated token but
     // not communicating with backend to update it (for whatever reason)
     reset: 'reset-your-session-please',
 };
+/** reverse map proto value -> short readable key, for the crossdomain debug log */
+const protoLabel = Object.fromEntries(Object.entries(proto).map(([k, v]) => [v, k]));
 class App {
     get tagMatcher() {
         return this.tagWatcher.matcher;
@@ -4052,7 +4062,7 @@ class App {
         this.stopCallbacks = [];
         this.commitCallbacks = [];
         this.activityState = ActivityState.NotActive;
-        this.version = '18.0.11'; // TODO: version compatability check inside each plugin.
+        this.version = '18.0.12-beta.1'; // TODO: version compatability check inside each plugin.
         this.socketMode = false;
         this.compressionThreshold = 24 * 1000;
         this.bc = null;
@@ -4069,10 +4079,64 @@ class App {
         this.checkStatus = () => {
             return this.parentActive;
         };
+        /** child-side crossdomain debug state (only meaningful when insideIframe) */
+        this.lastTokenReceived = null;
+        this.lastParentMsgAt = 0;
+        this.lastSentToParentAt = 0;
+        this.iframeDebugInterval = null;
+        /**
+         * Child-side counterpart of emitCrossdomainDebug: once per minute an iframe posts an
+         * encoded snapshot of its own tracking state up to the parent, which records it as a
+         * console log. Posted directly (not via this.send) so it is reported even when the
+         * child is NOT active — an inactive/orphaned child is exactly what we want to catch.
+         */
+        this.emitIframeDebug = () => {
+            if (!this.insideIframe || !this.options.crossdomain?.enabled)
+                return;
+            const now = Date.now();
+            const rel = (t) => (t ? now - t : null);
+            const payload = {
+                ctx: this.contextId,
+                active: this.active(),
+                state: ActivityState[this.activityState],
+                parentActive: this.parentActive,
+                rootId: this.rootId,
+                frameOrder: this.frameOderNumber,
+                // when and what token we last received from the parent (token truncated)
+                token: this.lastTokenReceived
+                    ? { tok: this.lastTokenReceived.tok, agoMs: now - this.lastTokenReceived.at }
+                    : null,
+                // last two-way communication with the parent
+                lastParentMsgAgoMs: rel(this.lastParentMsgAt),
+                lastSentToParentAgoMs: rel(this.lastSentToParentAt),
+            };
+            const json = JSON.stringify(payload);
+            let encoded;
+            try {
+                encoded = btoa(json);
+            }
+            catch {
+                encoded = json;
+            }
+            try {
+                window.parent.postMessage({ line: proto.iframeDebug, context: this.contextId, debug: encoded }, this.options.crossdomain?.parentDomain ?? '*');
+                this.markSentToParent();
+            }
+            catch (e) {
+                this.debug.error('iframe debug post failed', e);
+            }
+        };
         this.parentCrossDomainFrameListener = (event) => {
             const { data } = event;
             if (!data || event.source === window)
                 return;
+            // Debug: remember the last time the parent talked to us.
+            if (data.line === proto.startIframe ||
+                data.line === proto.parentAlive ||
+                data.line === proto.iframeId ||
+                data.line === proto.killIframe) {
+                this.lastParentMsgAt = Date.now();
+            }
             if (data.line === proto.startIframe) {
                 // Avoid corrupting an in-flight start; let it complete.
                 if (this.activityState === ActivityState.Starting)
@@ -4083,6 +4147,7 @@ class App {
                     }
                     if (data.token) {
                         this.session.setSessionToken(data.token, this.projectKey);
+                        this.lastTokenReceived = { tok: String(data.token).slice(-8), at: Date.now() };
                     }
                     if (data.id !== undefined) {
                         this.rootId = data.id;
@@ -4101,6 +4166,7 @@ class App {
                 this.parentActive = true;
                 this.rootId = data.id;
                 this.session.setSessionToken(data.token, this.projectKey);
+                this.lastTokenReceived = { tok: String(data.token).slice(-8), at: Date.now() };
                 this.frameOderNumber = data.frameOrderNumber;
                 this.frameLevel = data.frameLevel;
                 this.debug.log('starting iframe tracking', data);
@@ -4113,14 +4179,110 @@ class App {
             }
         };
         this.trackedFrames = [];
+        /** every context that has been enrolled at least once, to tell an orphan (re-adopt) apart
+         *  from a brand-new child still mid-enrollment (leave alone). */
+        this.everTrackedFrames = new Set();
         this.frameLastSeen = new Map();
+        /** crossdomain debug diagnostics, reported once per minute as an encoded console log */
+        this.frameOrigin = new Map();
+        this.frameAnyLastSeen = new Map();
+        this.frameBatchLastSeen = new Map();
+        this.frameLastSent = new Map();
+        this.xdomainDebugInterval = null;
+        /** last time we re-adopted a given orphaned context, to avoid restart spam */
+        this.reAdoptCooldown = new Map();
+        this.RE_ADOPT_COOLDOWN_MS = 2000;
+        /**
+         * Stable, collision-free frame-order allocation. Node ids are partitioned by
+         * (frameLevel, frameOrder) via pack() — every (level, order) owns its own id block, so
+         * two simultaneously-live frames sharing an order at the same level corrupt each other's
+         * node trees and one stops rendering. The previous `trackedFrames.findIndex+1` derived
+         * order from a mutable array index, and pruneStaleFrames()'s .filter() shifts those
+         * indices, so a newly enrolled frame could be handed an order still in use by a live
+         * (but pruned) frame. We instead assign each context a persistent order, unique among all
+         * non-recycled contexts at its level, freed only when the context is GC'd (truly gone).
+         */
+        this.frameAlloc = new Map();
+        this.usedOrdersByLevel = new Map();
         this.FRAME_STALE_MS = 1500;
+        /**
+         * Once per minute: emit an encoded console log from the parent tracker describing every
+         * tracked child iframe and the freshness of our two-way communication with it. Lets us
+         * see in replay which crossdomain iframe went silent and on which leg of the handshake.
+         */
+        /** drop debug entries for contexts we have neither heard from nor messaged in this long */
+        this.XDOMAIN_DEBUG_RETENTION_MS = 10 * 60000;
+        this.emitCrossdomainDebug = () => {
+            if (this.insideIframe || !this.options.crossdomain?.enabled || !this.active())
+                return;
+            const now = Date.now();
+            const rel = (t) => (t === undefined ? null : now - t);
+            // Report the union of currently-tracked frames and every context we have any debug
+            // record for: a frame that broke and stopped polling gets pruned from trackedFrames,
+            // but it is exactly the one we want to surface (with a large lastAnyMsgAgoMs).
+            const tracked = new Set(this.trackedFrames);
+            const contexts = new Set([
+                ...this.trackedFrames,
+                ...this.frameAnyLastSeen.keys(),
+                ...this.frameLastSent.keys(),
+            ]);
+            const frames = Array.from(contexts).map((ctx, i) => {
+                const sent = this.frameLastSent.get(ctx);
+                const alloc = this.frameAlloc.get(ctx);
+                return {
+                    // the actual allocated (level, order) node-id partition, else an enumeration index
+                    n: alloc ? alloc.order : i + 1,
+                    level: alloc ? alloc.level : null,
+                    // identify by domain if we have it, otherwise the context id, otherwise the number
+                    id: this.frameOrigin.get(ctx) || ctx || `#${i + 1}`,
+                    tracked: tracked.has(ctx),
+                    lastAnyMsgAgoMs: rel(this.frameAnyLastSeen.get(ctx)),
+                    lastBatchAgoMs: rel(this.frameBatchLastSeen.get(ctx)),
+                    lastSent: sent ? { line: sent.line, agoMs: now - sent.t } : null,
+                };
+            });
+            // GC: forget contexts that have been silent and un-messaged past the retention window.
+            const cutoff = now - this.XDOMAIN_DEBUG_RETENTION_MS;
+            for (const ctx of contexts) {
+                if (tracked.has(ctx))
+                    continue;
+                const seen = this.frameAnyLastSeen.get(ctx) ?? 0;
+                const sentT = this.frameLastSent.get(ctx)?.t ?? 0;
+                if (Math.max(seen, sentT) < cutoff) {
+                    this.frameOrigin.delete(ctx);
+                    this.frameAnyLastSeen.delete(ctx);
+                    this.frameBatchLastSeen.delete(ctx);
+                    this.frameLastSent.delete(ctx);
+                    this.reAdoptCooldown.delete(ctx);
+                    this.everTrackedFrames.delete(ctx);
+                    this.freeFrameOrder(ctx);
+                }
+            }
+            const payload = { t: now, count: frames.length, frames };
+            const json = JSON.stringify(payload);
+            let encoded;
+            try {
+                // payload is ASCII (base36 contexts, URL origins, numbers), so plain base64 is safe
+                encoded = btoa(json);
+            }
+            catch {
+                encoded = json;
+            }
+            this.send(ConsoleLog('info', `[OR_XDOMAIN_DEBUG] ${encoded}`));
+        };
         this.crossDomainIframeListener = (event) => {
             if (event.source === window)
                 return;
             const { data } = event;
             if (!data)
                 return;
+            // Debug: remember when we last heard *anything* from this context, and its domain.
+            if (data.context) {
+                this.frameAnyLastSeen.set(data.context, Date.now());
+                if (event.origin && !this.frameOrigin.has(data.context)) {
+                    this.frameOrigin.set(data.context, event.origin);
+                }
+            }
             // 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) {
@@ -4128,9 +4290,15 @@ class App {
             }
             if (!this.active())
                 return;
+            if (data.line === proto.iframeDebug) {
+                // A child posted its once-per-minute snapshot; surface it in our recorded console.
+                this.send(ConsoleLog('info', `[OR_XDOMAIN_IFRAME_DEBUG] ${data.debug}`));
+                return;
+            }
             if (data.line === proto.iframeSignal) {
                 // @ts-ignore
                 event.source?.postMessage({ ping: true, line: proto.parentAlive }, '*');
+                this.recordSentToFrame(data.context, proto.parentAlive);
                 const signalId = async () => {
                     if (event.source === null) {
                         return console.error('Couldnt connect to event.source for child iframe tracking');
@@ -4147,22 +4315,25 @@ class App {
                         else {
                             this.trackedFrames.push(data.context);
                         }
+                        this.everTrackedFrames.add(data.context);
                         await this.waitStarted();
                         const token = this.session.getSessionToken(this.projectKey);
-                        const order = this.trackedFrames.findIndex((f) => f === data.context) + 1;
-                        if (order === 0) {
-                            this.debug.error('Couldnt get order number for iframe', data.context, this.trackedFrames);
-                        }
+                        // Persistent, collision-free order (NOT the shifting array index). A restart of the
+                        // same context keeps its order/id-block for continuity; distinct live frames at the
+                        // same level never share one.
+                        const frameLevel = this.frameLevel + 1;
+                        const order = this.allocateFrameOrder(data.context, frameLevel);
                         const iframeData = {
                             line: proto.iframeId,
                             id,
                             token,
                             frameOrderNumber: order,
-                            frameLevel: this.frameLevel + 1,
+                            frameLevel,
                         };
                         this.debug.log('Got child frame signal; nodeId', id, event.source, iframeData);
                         // @ts-ignore
                         event.source?.postMessage(iframeData, '*');
+                        this.recordSentToFrame(data.context, proto.iframeId);
                     }
                     catch (e) {
                         console.error(e);
@@ -4175,6 +4346,9 @@ class App {
              * plus we rewrite some of the messages to be relative to the main context/window
              * */
             if (data.line === proto.iframeBatch) {
+                if (data.context) {
+                    this.frameBatchLastSeen.set(data.context, Date.now());
+                }
                 const msgBatch = data.messages;
                 const mappedMessages = [];
                 msgBatch.forEach((msg) => {
@@ -4222,6 +4396,16 @@ class App {
                 this.messages.push(...mappedMessages);
             }
             if (data.line === proto.polling) {
+                // Self-heal: a live child that was enrolled before but fell out of trackedFrames
+                // (pruned during a stop/start gap) keeps polling yet never re-signals. Re-adopt it
+                // so it restarts and re-enrolls. We require everTrackedFrames so a brand-new child
+                // still mid-enrollment (iframeSignal/checkNodeId in flight) is left alone.
+                if (data.context &&
+                    this.everTrackedFrames.has(data.context) &&
+                    !this.trackedFrames.includes(data.context)) {
+                    this.reAdoptOrphanFrame(event, data.context);
+                    return;
+                }
                 if (!this.pollingQueue.order.length) {
                     return;
                 }
@@ -4258,6 +4442,7 @@ class App {
                     }
                     // @ts-ignore
                     event.source?.postMessage(message, '*');
+                    this.recordSentToFrame(data.context, nextCommand);
                     if (this.pollingQueue[nextCommand].length === 0) {
                         delete this.pollingQueue[nextCommand];
                         this.pollingQueue.order.shift();
@@ -4295,6 +4480,7 @@ class App {
                 source: thisTab,
                 context: this.contextId,
             }, this.options.crossdomain?.parentDomain ?? '*');
+            this.markSentToParent();
             /**
              * since we need to wait uncertain amount of time
              * and I don't want to have recursion going on,
@@ -4315,6 +4501,7 @@ class App {
                     source: thisTab,
                     context: this.contextId,
                 }, this.options.crossdomain?.parentDomain ?? '*');
+                this.markSentToParent();
                 this.debug.info('Trying to signal to parent, attempt:', retries + 1);
                 retries++;
             };
@@ -4532,7 +4719,13 @@ class App {
                     line: proto.polling,
                     context: this.contextId,
                 }, options.crossdomain?.parentDomain ?? '*');
+                this.markSentToParent();
             }, 250);
+            // Child-only: once per minute, post an encoded snapshot of our own tracking state
+            // (active?, token received, last comms) up to the parent so it lands in the replay.
+            if (this.iframeDebugInterval)
+                clearInterval(this.iframeDebugInterval);
+            this.iframeDebugInterval = setInterval(this.emitIframeDebug, 60000);
         }
         else {
             this.initWorker();
@@ -4541,6 +4734,13 @@ class App {
              * so they can act as if it was just a same-domain iframe
              * */
             window.addEventListener('message', this.crossDomainIframeListener);
+            // Parent-only: once per minute, log an encoded snapshot of every tracked child
+            // iframe and the freshness of our two-way comms, to debug iframes that go silent.
+            if (this.options.crossdomain?.enabled) {
+                if (this.xdomainDebugInterval)
+                    clearInterval(this.xdomainDebugInterval);
+                this.xdomainDebugInterval = setInterval(this.emitCrossdomainDebug, 60000);
+            }
         }
         if (this.bc !== null) {
             this.bc.postMessage({
@@ -4590,6 +4790,62 @@ class App {
             };
         }
     }
+    /** stamp every outbound post to the parent window, for the child debug snapshot */
+    markSentToParent() {
+        this.lastSentToParentAt = Date.now();
+    }
+    allocateFrameOrder(ctx, level) {
+        const existing = this.frameAlloc.get(ctx);
+        if (existing !== undefined)
+            return existing.order;
+        let used = this.usedOrdersByLevel.get(level);
+        if (!used) {
+            used = new Set();
+            this.usedOrdersByLevel.set(level, used);
+        }
+        let order = -1;
+        for (let n = 1; n <= MASK_ORDER; n++) {
+            if (!used.has(n)) {
+                order = n;
+                break;
+            }
+        }
+        if (order === -1) {
+            // Overflow (>127 live frames at one level): evict the least-recently-seen context at
+            // this level that is not currently tracked, and reuse its slot rather than failing.
+            let lru = null;
+            let lruSeen = Infinity;
+            const trackedSet = new Set(this.trackedFrames);
+            this.frameAlloc.forEach((alloc, c) => {
+                if (alloc.level !== level || trackedSet.has(c))
+                    return;
+                const seen = this.frameAnyLastSeen.get(c) ?? 0;
+                if (seen < lruSeen) {
+                    lruSeen = seen;
+                    lru = c;
+                }
+            });
+            if (lru !== null) {
+                order = this.frameAlloc.get(lru).order;
+                this.frameAlloc.delete(lru);
+                this.debug.error('OR: frame order space exhausted, evicting', lru, 'for', ctx);
+            }
+            else {
+                order = MASK_ORDER;
+                this.debug.error('OR: frame order overflow, reusing max order for', ctx);
+            }
+        }
+        used.add(order);
+        this.frameAlloc.set(ctx, { order, level });
+        return order;
+    }
+    freeFrameOrder(ctx) {
+        const alloc = this.frameAlloc.get(ctx);
+        if (!alloc)
+            return;
+        this.frameAlloc.delete(ctx);
+        this.usedOrdersByLevel.get(alloc.level)?.delete(alloc.order);
+    }
     pruneStaleFrames() {
         const staleAfter = Date.now() - this.FRAME_STALE_MS;
         this.trackedFrames = this.trackedFrames.filter((ctx) => {
@@ -4600,6 +4856,45 @@ class App {
             return false;
         });
     }
+    /** records the last command/signal we posted to a given child iframe context (debug) */
+    recordSentToFrame(ctx, line) {
+        if (!ctx)
+            return;
+        this.frameLastSent.set(ctx, { line: protoLabel[line] ?? line, t: Date.now() });
+    }
+    /**
+     * Self-heal for the "kill-then-prune orphan" race: a live child can fall out of
+     * `trackedFrames` (its 250ms poll was delayed past FRAME_STALE_MS during the parent's
+     * stop/start NotActive gap, so pruneStaleFrames evicted it). It keeps polling but the
+     * only re-enrollment path is an `iframeSignal`, which a stopped/active-but-orphaned
+     * child never re-emits — so it would record nothing forever. When we (the parent) are
+     * active and see a poll from an un-tracked context, push a `startIframe` so the child
+     * restarts, re-runs the full handshake and re-observes with a fresh rootId. Cooldowned
+     * so we don't spam restarts during the child's start window.
+     */
+    reAdoptOrphanFrame(event, ctx) {
+        const now = Date.now();
+        const last = this.reAdoptCooldown.get(ctx) ?? 0;
+        if (now - last < this.RE_ADOPT_COOLDOWN_MS)
+            return;
+        this.reAdoptCooldown.set(ctx, now);
+        const message = {
+            line: proto.startIframe,
+            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, '*');
+        this.recordSentToFrame(ctx, proto.startIframe);
+        this.debug.log('Re-adopting orphaned crossdomain iframe', ctx);
+    }
     allowAppStart() {
         this.canStart = true;
         if (this.startTimeout) {
@@ -4765,7 +5060,9 @@ class App {
             window.parent.postMessage({
                 line: proto.iframeBatch,
                 messages: this.messages,
+                context: this.contextId,
             }, this.options.crossdomain?.parentDomain ?? '*');
+            this.markSentToParent();
             this.commitCallbacks.forEach((cb) => cb(this.messages));
             this.messages.length = 0;
             return;
@@ -7021,15 +7318,28 @@ function CSSRules (app, opts) {
         if (!nodeID)
             return;
         const sheet = node.sheet;
+        // Accessing cssRules on a cross-origin stylesheet (e.g. injected by a
+        // browser extension) throws a SecurityError. Probe it before registering
+        // the sheet so an inaccessible sheet is skipped instead of aborting start.
+        let rules;
+        try {
+            rules = sheet.cssRules;
+        }
+        catch (e) {
+            // Skip inaccessible (cross-origin) stylesheet
+            app.debug.log('Couldnt access stylesheet during initial scan', e);
+            return;
+        }
         const sheetID = nextID();
         styleSheetIDMap.set(sheet, sheetID);
         app.send(AdoptedSSAddOwner(sheetID, nodeID));
-        for (let i = 0; i < sheet.cssRules.length; i++) {
+        for (let i = 0; i < rules.length; i++) {
             try {
-                sendInsertDeleteRule(sheet, i, sheet.cssRules[i].cssText);
+                sendInsertDeleteRule(sheet, i, rules[i].cssText);
             }
             catch (e) {
                 // Skip inaccessible rules
+                app.debug.log('Couldnt access stylesheet rule during initial scan', e);
             }
         }
     });
@@ -7458,7 +7768,7 @@ class NetworkMessage {
             return null;
         const gqlHeader = "application/graphql-response";
         const isGraphql = messageInfo.url.includes("/graphql")
-            || Object.values(messageInfo.request.headers).some(v => v && typeof v === 'string' && v.includes(gqlHeader));
+            || Object.values(messageInfo.request.headers).some(v => v.includes(gqlHeader));
         if (isGraphql && messageInfo.response.body && typeof messageInfo.response.body === 'string') {
             const isError = messageInfo.response.body.includes("errors");
             messageInfo.status = isError ? 400 : 200;
@@ -7562,7 +7872,6 @@ const genStringBody = (body) => {
         }
         else if (body instanceof Blob ||
             body instanceof ReadableStream ||
-            ArrayBuffer.isView(body) ||
             body instanceof ArrayBuffer) {
             result = 'byte data';
         }
@@ -9051,7 +9360,7 @@ class ConstantProperties {
             user_id: this.user_id,
             distinct_id: this.deviceId,
             sdk_edition: 'web',
-            sdk_version: '18.0.11',
+            sdk_version: '18.0.12-beta.1',
             timezone: getUTCOffsetString(),
             search_engine: this.searchEngine,
         };
@@ -9753,7 +10062,7 @@ class API {
         this.signalStartIssue = (reason, missingApi) => {
             const doNotTrack = this.checkDoNotTrack();
             console.log("Tracker couldn't start due to:", JSON.stringify({
-                trackerVersion: '18.0.11',
+                trackerVersion: '18.0.12-beta.1',
                 projectKey: this.options.projectKey,
                 doNotTrack,
                 reason: missingApi.length ? `missing api: ${missingApi.join(',')}` : reason,