@openreplay/tracker 17.2.9 → 17.2.11

package/dist/lib/index.js

@@ -1784,6 +1784,30 @@ class CanvasRecorder {
         this.MAX_QUEUE_SIZE = 50; // ~500 images max (50 batches × 10 images)
         this.pendingBatches = [];
         this.isProcessingQueue = false;
+        /**
+         * Reacts to a runtime sanitization change on a canvas: stop capturing if it
+         * just became masked, start if it just became visible. (Already-sent frames
+         * can't be retracted — escalation only stops future capture.)
+         */
+        this.resanitizeCanvas = (node, id) => {
+            if (!hasTag(node, 'canvas')) {
+                return;
+            }
+            const isIgnored = this.app.sanitizer.isObscured(id) || this.app.sanitizer.isHidden(id);
+            if (isIgnored) {
+                if (this.snapshots[id] || this.observers.has(id)) {
+                    const observer = this.observers.get(id);
+                    if (observer) {
+                        observer.disconnect();
+                        this.observers.delete(id);
+                    }
+                    this.cleanupCanvas(id);
+                }
+            }
+            else if (!this.snapshots[id] && !this.observers.has(id)) {
+                this.captureCanvas(node);
+            }
+        };
         this.restartTracking = () => {
             this.clear();
             this.app.nodes.scanTree(this.captureCanvas);
@@ -1887,6 +1911,7 @@ class CanvasRecorder {
         setTimeout(() => {
             this.app.nodes.scanTree(this.captureCanvas);
             this.app.nodes.attachNodeCallback(this.captureCanvas);
+            this.app.attachResanitizeCallback(this.resanitizeCanvas);
         }, 125);
     }
     sendSnaps(images, canvasId, createdAt) {
@@ -2758,6 +2783,120 @@ function ConstructedStyleSheets (app) {
     });
 }
 
+var SanitizeLevel;
+(function (SanitizeLevel) {
+    SanitizeLevel[SanitizeLevel["Plain"] = 0] = "Plain";
+    SanitizeLevel[SanitizeLevel["Obscured"] = 1] = "Obscured";
+    SanitizeLevel[SanitizeLevel["Hidden"] = 2] = "Hidden";
+})(SanitizeLevel || (SanitizeLevel = {}));
+const stringWiper = (input) => input
+    .trim()
+    .replace(/[^\f\n\r\t\v\u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff\s]/g, '*');
+class Sanitizer {
+    constructor(params) {
+        // Node id -> level. Plain (0) is never stored; a missing entry means Plain.
+        // A map (not the old grow-only Sets) so levels can be raised and lowered.
+        this.levels = new Map();
+        this.app = params.app;
+        const defaultOptions = {
+            obscureTextEmails: true,
+            obscureTextNumbers: false,
+            privateMode: false,
+            domSanitizer: undefined,
+        };
+        this.privateMode = params.options?.privateMode ?? false;
+        this.options = Object.assign(defaultOptions, params.options);
+    }
+    // Pure recomputation of a node's level from the live DOM + parent level.
+    // Reading current state on every call is what lets resanitize() pick up
+    // runtime attribute/domSanitizer changes.
+    computeLevel(node, parentLevel) {
+        if (this.options.privateMode) {
+            if (isElementNode(node) && !hasOpenreplayAttribute(node, 'unmask')) {
+                return SanitizeLevel.Obscured;
+            }
+            if (isTextNode(node) && !hasOpenreplayAttribute(node.parentNode, 'unmask')) {
+                return SanitizeLevel.Obscured;
+            }
+        }
+        let level = SanitizeLevel.Plain;
+        if (parentLevel >= SanitizeLevel.Obscured ||
+            (isElementNode(node) &&
+                (hasOpenreplayAttribute(node, 'masked') || hasOpenreplayAttribute(node, 'obscured')))) {
+            level = SanitizeLevel.Obscured;
+        }
+        if (parentLevel === SanitizeLevel.Hidden ||
+            (isElementNode(node) &&
+                (hasOpenreplayAttribute(node, 'htmlmasked') || hasOpenreplayAttribute(node, 'hidden')))) {
+            level = SanitizeLevel.Hidden;
+        }
+        if (this.options.domSanitizer !== undefined && isElementNode(node)) {
+            const sanitizeLevel = this.options.domSanitizer(node);
+            if (sanitizeLevel === SanitizeLevel.Obscured && level < SanitizeLevel.Obscured) {
+                level = SanitizeLevel.Obscured;
+            }
+            if (sanitizeLevel === SanitizeLevel.Hidden) {
+                level = SanitizeLevel.Hidden;
+            }
+        }
+        return level;
+    }
+    getLevel(id) {
+        return this.levels.get(id) ?? SanitizeLevel.Plain;
+    }
+    // Sets a node's level (either direction) and returns the previous one.
+    setLevel(id, level) {
+        const prev = this.getLevel(id);
+        if (level === SanitizeLevel.Plain) {
+            this.levels.delete(id);
+        }
+        else {
+            this.levels.set(id, level);
+        }
+        return prev;
+    }
+    handleNode(id, parentID, node) {
+        const level = this.computeLevel(node, this.getLevel(parentID));
+        // Escalate-only: commits never lower a level, only resanitize/setLevel do.
+        if (level > this.getLevel(id)) {
+            this.setLevel(id, level);
+        }
+    }
+    sanitize(id, data) {
+        if (this.getLevel(id) >= SanitizeLevel.Obscured) {
+            // TODO: is it the best place to put trim() ? Might trimmed spaces be considered in layout in certain cases?
+            return stringWiper(data);
+        }
+        if (this.options.obscureTextNumbers) {
+            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)}`;
+            });
+        }
+        return data;
+    }
+    isObscured(id) {
+        return this.getLevel(id) >= SanitizeLevel.Obscured;
+    }
+    isHidden(id) {
+        return this.getLevel(id) === SanitizeLevel.Hidden;
+    }
+    getInnerTextSecure(el) {
+        const id = this.app.nodes.getID(el);
+        if (!id) {
+            return '';
+        }
+        return this.sanitize(id, el.innerText);
+    }
+    clear() {
+        this.levels.clear();
+    }
+}
+
 const iconCache = {};
 const svgUrlCache = {};
 async function parseUseEl(useElement, mode, domParser) {
@@ -3337,6 +3476,100 @@ class Observer {
         beforeCommit(this.app.nodes.getID(node));
         this.commitNodes(true);
     }
+    /**
+     * Re-evaluates sanitization for every tracked node in `root`'s subtree against
+     * the current DOM and re-emits whatever changed. Pass the highest node you
+     * changed (or the document root) so inherited levels propagate correctly.
+     */
+    resanitizeSubtree(root) {
+        if (!isObservable(root)) {
+            return;
+        }
+        const parent = root.parentNode;
+        const parentId = parent !== null ? this.app.nodes.getID(parent) : undefined;
+        const parentLevel = parentId !== undefined ? this.app.sanitizer.getLevel(parentId) : SanitizeLevel.Plain;
+        this.resanitizeNode(root, parentLevel);
+    }
+    resanitizeNode(node, parentLevel) {
+        if (isIgnored(node)) {
+            return;
+        }
+        const id = this.app.nodes.getID(node);
+        if (id === undefined) {
+            // Untracked (new, or under a hidden ancestor): the live observer handles it.
+            return;
+        }
+        const newLevel = this.app.sanitizer.computeLevel(node, parentLevel);
+        const prevLevel = this.app.sanitizer.getLevel(id);
+        const wasHidden = prevLevel === SanitizeLevel.Hidden;
+        const willHidden = newLevel === SanitizeLevel.Hidden;
+        // Crossing the hidden boundary changes the rendered structure (placeholder vs
+        // real subtree), so rebuild rather than re-emit.
+        if (wasHidden !== willHidden) {
+            this.recreateSubtree(node);
+            return;
+        }
+        if (willHidden) {
+            return;
+        }
+        // Plain <-> Obscured: same structure, only leaf content changes.
+        if (prevLevel !== newLevel) {
+            this.app.sanitizer.setLevel(id, newLevel);
+            this.reemitNode(id, node);
+        }
+        for (let child = node.firstChild; child !== null; child = child.nextSibling) {
+            this.resanitizeNode(child, newLevel);
+        }
+    }
+    // Destroys the node player-side and re-emits its subtree from scratch (new ids)
+    // so it materializes at the freshly-computed level.
+    recreateSubtree(node) {
+        const id = this.app.nodes.getID(node);
+        if (id === undefined) {
+            return;
+        }
+        this.app.send(RemoveNode(id));
+        this.clearSubtreeRegistration(node);
+        this.bindTree(node);
+        this.commitNodes();
+    }
+    clearSubtreeRegistration(node) {
+        const clearOne = (n) => {
+            const oldId = this.app.nodes.getID(n);
+            if (oldId !== undefined) {
+                this.app.sanitizer.setLevel(oldId, SanitizeLevel.Plain);
+            }
+            this.app.nodes.unregisterNode(n);
+        };
+        const walker = document.createTreeWalker(node, NodeFilter.SHOW_ELEMENT + NodeFilter.SHOW_TEXT, {
+            acceptNode: (n) => isIgnored(n) || this.app.nodes.getID(n) === undefined
+                ? NodeFilter.FILTER_REJECT
+                : NodeFilter.FILTER_ACCEPT,
+        }, 
+        // @ts-ignore
+        false);
+        // Collect first, then clear: unregistering mutates the ids the walker reads.
+        const subtree = [];
+        while (walker.nextNode()) {
+            subtree.push(walker.currentNode);
+        }
+        clearOne(node);
+        subtree.forEach(clearOne);
+    }
+    reemitNode(id, node) {
+        if (isTextNode(node)) {
+            const parent = node.parentNode;
+            if (parent !== null && isElementNode(parent)) {
+                // re-runs sanitize() at the level we just set
+                this.sendNodeData(id, parent, node.data);
+            }
+            return;
+        }
+        if (isElementNode(node)) {
+            // inputs/images/canvas re-emit their own payload via registered callbacks
+            this.app.callResanitizeCallbacks(node, id);
+        }
+    }
     disconnect() {
         this.observer.disconnect();
         this.clear();
@@ -3659,94 +3892,6 @@ class TopObserver extends Observer {
     }
 }
 
-var SanitizeLevel;
-(function (SanitizeLevel) {
-    SanitizeLevel[SanitizeLevel["Plain"] = 0] = "Plain";
-    SanitizeLevel[SanitizeLevel["Obscured"] = 1] = "Obscured";
-    SanitizeLevel[SanitizeLevel["Hidden"] = 2] = "Hidden";
-})(SanitizeLevel || (SanitizeLevel = {}));
-const stringWiper = (input) => input
-    .trim()
-    .replace(/[^\f\n\r\t\v\u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff\s]/g, '*');
-class Sanitizer {
-    constructor(params) {
-        this.obscured = new Set();
-        this.hidden = new Set();
-        this.app = params.app;
-        const defaultOptions = {
-            obscureTextEmails: true,
-            obscureTextNumbers: false,
-            privateMode: false,
-            domSanitizer: undefined,
-        };
-        this.privateMode = params.options?.privateMode ?? false;
-        this.options = Object.assign(defaultOptions, params.options);
-    }
-    handleNode(id, parentID, node) {
-        if (this.options.privateMode) {
-            if (isElementNode(node) && !hasOpenreplayAttribute(node, 'unmask')) {
-                return this.obscured.add(id);
-            }
-            if (isTextNode(node) && !hasOpenreplayAttribute(node.parentNode, 'unmask')) {
-                return this.obscured.add(id);
-            }
-        }
-        if (this.obscured.has(parentID) ||
-            (isElementNode(node) &&
-                (hasOpenreplayAttribute(node, 'masked') || hasOpenreplayAttribute(node, 'obscured')))) {
-            this.obscured.add(id);
-        }
-        if (this.hidden.has(parentID) ||
-            (isElementNode(node) &&
-                (hasOpenreplayAttribute(node, 'htmlmasked') || hasOpenreplayAttribute(node, 'hidden')))) {
-            this.hidden.add(id);
-        }
-        if (this.options.domSanitizer !== undefined && isElementNode(node)) {
-            const sanitizeLevel = this.options.domSanitizer(node);
-            if (sanitizeLevel === SanitizeLevel.Obscured) {
-                this.obscured.add(id);
-            }
-            if (sanitizeLevel === SanitizeLevel.Hidden) {
-                this.hidden.add(id);
-            }
-        }
-    }
-    sanitize(id, data) {
-        if (this.obscured.has(id)) {
-            // TODO: is it the best place to put trim() ? Might trimmed spaces be considered in layout in certain cases?
-            return stringWiper(data);
-        }
-        if (this.options.obscureTextNumbers) {
-            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)}`;
-            });
-        }
-        return data;
-    }
-    isObscured(id) {
-        return this.obscured.has(id);
-    }
-    isHidden(id) {
-        return this.hidden.has(id);
-    }
-    getInnerTextSecure(el) {
-        const id = this.app.nodes.getID(el);
-        if (!id) {
-            return '';
-        }
-        return this.sanitize(id, el.innerText);
-    }
-    clear() {
-        this.obscured.clear();
-        this.hidden.clear();
-    }
-}
-
 const tokenSeparator = '_$_';
 class Session {
     constructor(params) {
@@ -3981,12 +4126,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;
@@ -3994,6 +4143,8 @@ class App {
     constructor(projectKey, sessionToken, options, signalError, insideIframe) {
         this.signalError = signalError;
         this.insideIframe = insideIframe;
+        // Registered by input/img/canvas to re-emit a node when its level changes.
+        this.resanitizeCallbacks = [];
         this.messages = [];
         /**
          * we need 2 buffers, so we don't lose anything
@@ -4005,7 +4156,7 @@ class App {
         this.stopCallbacks = [];
         this.commitCallbacks = [];
         this.activityState = ActivityState.NotActive;
-        this.version = '17.2.9'; // TODO: version compatability check inside each plugin.
+        this.version = '17.2.11'; // TODO: version compatability check inside each plugin.
         this.socketMode = false;
         this.compressionThreshold = 24 * 1000;
         this.bc = null;
@@ -4022,10 +4173,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)
@@ -4036,6 +4241,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;
@@ -4054,6 +4260,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);
@@ -4066,14 +4273,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) {
@@ -4081,9 +4384,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');
@@ -4100,22 +4409,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);
@@ -4128,6 +4440,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) => {
@@ -4175,6 +4490,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;
                 }
@@ -4211,6 +4536,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();
@@ -4248,6 +4574,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,
@@ -4268,6 +4595,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++;
             };
@@ -4359,6 +4687,26 @@ class App {
         this.restartCanvasTracking = () => {
             this.canvasRecorder?.restartTracking();
         };
+        this.attachResanitizeCallback = (cb) => {
+            this.resanitizeCallbacks.push(cb);
+        };
+        this.callResanitizeCallbacks = (node, id) => {
+            this.resanitizeCallbacks.forEach((cb) => cb(node, id));
+        };
+        this.resanitize = (el) => {
+            const root = el ?? (IN_BROWSER ? document.documentElement : undefined);
+            if (!root) {
+                return;
+            }
+            this.observer.resanitizeSubtree(root);
+        };
+        this.checkSanitization = (el) => {
+            const id = this.nodes.getID(el);
+            if (id === undefined) {
+                return undefined;
+            }
+            return this.sanitizer.getLevel(id);
+        };
         this.flushBuffer = async (buffer) => {
             return new Promise((res, reject) => {
                 if (buffer.length === 0) {
@@ -4484,7 +4832,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();
@@ -4493,6 +4847,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({
@@ -4542,6 +4903,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) => {
@@ -4552,6 +4969,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) {
@@ -4706,7 +5162,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;
@@ -5906,6 +6364,12 @@ function Img (app) {
         sendImgAttrs(node);
         observer.observe(node, { attributes: true, attributeFilter: ['src', 'srcset'] });
     });
+    // On a runtime level change, re-evaluate placeholder vs real src for this image.
+    app.attachResanitizeCallback((node) => {
+        if (hasTag(node, 'img')) {
+            sendImgAttrs(node);
+        }
+    });
 }
 
 const INPUT_TYPES = [
@@ -6035,9 +6499,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) {
@@ -6054,6 +6520,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) => {
@@ -6068,6 +6541,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);
@@ -6077,6 +6556,13 @@ function Input (app, opts) {
         }
         app.send(InputChange(id, value, mask !== 0, label, hesitationTime, inputTime));
     }
+    // Re-emit a field's value when its sanitization level changes at runtime.
+    // getInputValue() reads the current level, so re-sending applies the new mask.
+    app.attachResanitizeCallback((node, id) => {
+        if (isTextFieldElement(node) || hasTag(node, 'select')) {
+            sendInputValue(id, node);
+        }
+    });
     app.nodes.attachNodeCallback(app.safe((node) => {
         const id = app.nodes.getID(node);
         if (id === undefined) {
@@ -6084,8 +6570,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);
@@ -7346,7 +7832,7 @@ class NetworkMessage {
             return null;
         const gqlHeader = "application/graphql-response";
         const isGraphql = messageInfo.url.includes("/graphql")
-            || Object.values(messageInfo.request.headers).some(v => v.includes(gqlHeader));
+            || Object.values(messageInfo.request.headers).some(v => v && typeof v === 'string' && 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;
@@ -7450,6 +7936,7 @@ const genStringBody = (body) => {
         }
         else if (body instanceof Blob ||
             body instanceof ReadableStream ||
+            ArrayBuffer.isView(body) ||
             body instanceof ArrayBuffer) {
             result = 'byte data';
         }
@@ -8938,7 +9425,7 @@ class ConstantProperties {
             user_id: this.user_id,
             distinct_id: this.deviceId,
             sdk_edition: 'web',
-            sdk_version: '17.2.9',
+            sdk_version: '17.2.11',
             timezone: getUTCOffsetString(),
             search_engine: this.searchEngine,
         };
@@ -9640,7 +10127,7 @@ class API {
         this.signalStartIssue = (reason, missingApi) => {
             const doNotTrack = this.checkDoNotTrack();
             console.log("Tracker couldn't start due to:", JSON.stringify({
-                trackerVersion: '17.2.9',
+                trackerVersion: '17.2.11',
                 projectKey: this.options.projectKey,
                 doNotTrack,
                 reason: missingApi.length ? `missing api: ${missingApi.join(',')}` : reason,
@@ -9652,6 +10139,31 @@ class API {
             }
             this.app.restartCanvasTracking();
         };
+        /**
+         * Re-evaluates sanitization against the current DOM and re-emits whatever
+         * changed, updating already-recorded nodes mid-session. Call after toggling
+         * `data-openreplay-*` attributes or after changing whatever your `domSanitizer`
+         * keys on (class/id/etc).
+         *
+         * @param el - the highest node you changed; omit to re-scan the whole document;
+         * scanning the entire doc is O(dom size)
+         * */
+        this.resanitize = (el) => {
+            if (this.app === null) {
+                return;
+            }
+            this.app.resanitize(el);
+        };
+        /**
+         * Returns the sanitization level the tracker currently has for a node
+         * (0 = Plain, 1 = Obscured, 2 = Hidden), or undefined if it isn't tracked.
+         * */
+        this.checkSanitization = (el) => {
+            if (this.app === null) {
+                return undefined;
+            }
+            return this.app.checkSanitization(el);
+        };
         this.getSessionURL = (options) => {
             if (this.app === null) {
                 return undefined;
@@ -9665,7 +10177,10 @@ class API {
             }
         };
         this.identify = this.setUserID;
-        this.track = this.analytics?.track;
+        // Delegates at call time: `this.analytics` is assigned in the constructor body,
+        // which runs AFTER field initializers, so binding it here directly would always
+        // capture `undefined`.
+        this.track = (eventName, properties, options) => this.analytics?.track(eventName, properties, options);
         this.userID = (id) => {
             deprecationWarn("'userID' method", "'setUserID' method", '/');
             this.setUserID(id);