@openreplay/tracker 14.0.9 → 14.0.10-beta.1

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+# 14.0.10
+
+- adjust timestamps for messages from tracker instances inside child iframes (if they were loaded later)
+- restart child trackers if parent tracker is restarted
+- fixes for general stability of crossdomain iframe tracking
+
 # 14.0.9
 
 - more stable crossdomain iframe tracking (refactored child/parent process discovery)

package/cjs/app/index.d.ts

@@ -37,6 +37,12 @@ declare const SuccessfulStart: (body: OnStartInfo) => SuccessfulStart;
 export type StartPromiseReturn = SuccessfulStart | UnsuccessfulStart;
 type StartCallback = (i: OnStartInfo) => void;
 type CommitCallback = (messages: Array<Message>) => void;
+declare enum ActivityState {
+    NotActive = 0,
+    Starting = 1,
+    Active = 2,
+    ColdStart = 3
+}
 type AppOptions = {
     revID: string;
     node_id: string;
@@ -99,7 +105,7 @@ export type Options = AppOptions & ObserverOptions & SanitizerOptions;
 export declare const DEFAULT_INGEST_POINT = "https://api.openreplay.com/ingest";
 export default class App {
     private readonly signalError;
-    private readonly insideIframe;
+    readonly insideIframe: boolean;
     readonly nodes: Nodes;
     readonly ticker: Ticker;
     readonly projectKey: string;
@@ -146,12 +152,15 @@ export default class App {
     /** used by child iframes for crossdomain only */
     parentActive: boolean;
     checkStatus: () => boolean;
-    /** used by child iframes for crossdomain only */
-    /** track app instances in crossdomain child iframes */
-    crossdomainIframesModule: () => void;
+    parentCrossDomainFrameListener: (event: MessageEvent) => void;
+    trackedFrames: number[];
+    crossDomainIframeListener: (event: MessageEvent) => void;
+    pollingQueue: string[];
+    bootChildrenFrames: () => Promise<void>;
+    killChildrenFrames: () => void;
     signalIframeTracker: () => void;
     startTimeout: ReturnType<typeof setTimeout> | null;
-    private allowAppStart;
+    allowAppStart(): void;
     private checkNodeId;
     private initWorker;
     private handleWorkerMsg;
@@ -176,9 +185,9 @@ export default class App {
     timestamp(): number;
     safe<T extends (this: any, ...args: any[]) => void>(fn: T): T;
     attachCommitCallback(cb: CommitCallback): void;
-    attachStartCallback(cb: StartCallback, useSafe?: boolean): void;
-    attachStopCallback(cb: () => any, useSafe?: boolean): void;
-    attachEventListener(target: EventTarget, type: string, listener: EventListener, useSafe?: boolean, useCapture?: boolean): void;
+    attachStartCallback: (cb: StartCallback, useSafe?: boolean) => void;
+    attachStopCallback: (cb: () => any, useSafe?: boolean) => void;
+    attachEventListener: (target: EventTarget, type: string, listener: EventListener, useSafe?: boolean, useCapture?: boolean) => void;
     checkRequiredVersion(version: string): boolean;
     private getTrackerInfo;
     getSessionInfo(): {
@@ -260,6 +269,7 @@ export default class App {
     getUxtId(): number | null;
     waitStart(): Promise<unknown>;
     waitStarted(): Promise<unknown>;
+    waitStatus(status: ActivityState): Promise<unknown>;
     /**
      * basically we ask other tabs during constructor
      * and here we just apply 10ms delay just in case

package/cjs/app/index.js

@@ -72,14 +72,14 @@ const proto = {
     resp: 'never-gonna-let-you-down',
     // regenerating id (copied other tab)
     reg: 'never-gonna-run-around-and-desert-you',
-    // tracker inside a child iframe
-    iframeSignal: 'never-gonna-make-you-cry',
-    // getting node id for child iframe
-    iframeId: 'never-gonna-say-goodbye',
-    // batch of messages from an iframe window
-    iframeBatch: 'never-gonna-tell-a-lie-and-hurt-you',
-    // signal that parent is live
-    parentAlive: 'i-dont-know-more-lines',
+    iframeSignal: 'tracker inside a child iframe',
+    iframeId: 'getting node id for child iframe',
+    iframeBatch: 'batch of messages from an iframe window',
+    parentAlive: 'signal that parent is live',
+    killIframe: 'stop tracker inside frame',
+    startIframe: 'start tracker inside frame',
+    // checking updates
+    polling: 'hello-how-are-you-im-under-the-water-please-help-me',
 };
 class App {
     constructor(projectKey, sessionToken, options, signalError, insideIframe) {
@@ -96,7 +96,7 @@ class App {
         this.stopCallbacks = [];
         this.commitCallbacks = [];
         this.activityState = ActivityState.NotActive;
-        this.version = '14.0.9'; // TODO: version compatability check inside each plugin.
+        this.version = '14.0.10-beta.1'; // TODO: version compatability check inside each plugin.
         this.socketMode = false;
         this.compressionThreshold = 24 * 1000;
         this.bc = null;
@@ -116,104 +116,144 @@ class App {
         this.checkStatus = () => {
             return this.parentActive;
         };
-        /** used by child iframes for crossdomain only */
-        /** track app instances in crossdomain child iframes */
-        this.crossdomainIframesModule = () => {
-            if (!this.insideIframe) {
-                /**
-                 * if we get a signal from child iframes, we check for their node_id and send it back,
-                 * so they can act as if it was just a same-domain iframe
-                 * */
-                let crossdomainFrameCount = 0;
-                const catchIframeMessage = (event) => {
-                    if (!this.active())
-                        return;
-                    const { data } = event;
-                    if (!data)
-                        return;
-                    if (data.line === proto.iframeSignal) {
-                        // @ts-ignore
-                        event.source?.postMessage({ ping: true, line: proto.parentAlive }, '*');
-                        const childIframeDomain = data.domain;
-                        const pageIframes = Array.from(document.querySelectorAll('iframe'));
-                        this.pageFrames = pageIframes;
-                        const signalId = async () => {
-                            const id = await this.checkNodeId(pageIframes, childIframeDomain);
-                            if (id) {
-                                try {
-                                    await this.waitStarted();
-                                    crossdomainFrameCount++;
-                                    const token = this.session.getSessionToken();
-                                    const iframeData = {
-                                        line: proto.iframeId,
-                                        context: this.contextId,
-                                        domain: childIframeDomain,
-                                        id,
-                                        token,
-                                        frameOrderNumber: crossdomainFrameCount,
-                                    };
-                                    this.debug.log('iframe_data', iframeData);
-                                    // @ts-ignore
-                                    event.source?.postMessage(iframeData, '*');
-                                }
-                                catch (e) {
-                                    console.error(e);
-                                }
-                            }
-                        };
-                        void signalId();
+        this.parentCrossDomainFrameListener = (event) => {
+            const { data } = event;
+            if (!data || event.source === window)
+                return;
+            if (data.line === proto.startIframe) {
+                if (this.active())
+                    return;
+                try {
+                    this.allowAppStart();
+                    void this.start();
+                }
+                catch (e) {
+                    console.error('children frame restart failed:', e);
+                }
+            }
+            if (data.line === proto.parentAlive) {
+                this.parentActive = true;
+            }
+            if (data.line === proto.iframeId) {
+                this.parentActive = true;
+                this.rootId = data.id;
+                this.session.setSessionToken(data.token);
+                this.frameOderNumber = data.frameOrderNumber;
+                this.debug.log('starting iframe tracking', data);
+                this.allowAppStart();
+                this.delay = data.frameTimeOffset;
+            }
+            if (data.line === proto.killIframe) {
+                if (this.active()) {
+                    this.stop();
+                }
+            }
+        };
+        this.trackedFrames = [];
+        this.crossDomainIframeListener = (event) => {
+            if (!this.active() || event.source === window)
+                return;
+            const { data } = event;
+            if (!data)
+                return;
+            if (data.line === proto.iframeSignal) {
+                // @ts-ignore
+                event.source?.postMessage({ ping: true, line: proto.parentAlive }, '*');
+                const childIframeDomain = data.domain;
+                const pageIframes = Array.from(document.querySelectorAll('iframe'));
+                this.pageFrames = pageIframes;
+                const signalId = async () => {
+                    const id = await this.checkNodeId(pageIframes, childIframeDomain);
+                    if (id && !this.trackedFrames.includes(id)) {
+                        try {
+                            this.trackedFrames.push(id);
+                            await this.waitStarted();
+                            const token = this.session.getSessionToken();
+                            const iframeData = {
+                                line: proto.iframeId,
+                                context: this.contextId,
+                                domain: childIframeDomain,
+                                id,
+                                token,
+                                frameOrderNumber: this.trackedFrames.length,
+                                frameTimeOffset: this.timestamp(),
+                            };
+                            // @ts-ignore
+                            event.source?.postMessage(iframeData, '*');
+                        }
+                        catch (e) {
+                            console.error(e);
+                        }
                     }
-                    /**
-                     * proxying messages from iframe to main body, so they can be in one batch (same indexes, etc)
-                     * plus we rewrite some of the messages to be relative to the main context/window
-                     * */
-                    if (data.line === proto.iframeBatch) {
-                        const msgBatch = data.messages;
-                        const mappedMessages = msgBatch.map((msg) => {
-                            if (msg[0] === 20 /* MType.MouseMove */) {
-                                let fixedMessage = msg;
-                                this.pageFrames.forEach((frame) => {
-                                    if (frame.dataset.domain === event.data.domain) {
-                                        const [type, x, y] = msg;
-                                        const { left, top } = frame.getBoundingClientRect();
-                                        fixedMessage = [type, x + left, y + top];
-                                    }
-                                });
-                                return fixedMessage;
+                };
+                void signalId();
+            }
+            /**
+             * proxying messages from iframe to main body, so they can be in one batch (same indexes, etc)
+             * plus we rewrite some of the messages to be relative to the main context/window
+             * */
+            if (data.line === proto.iframeBatch) {
+                const msgBatch = data.messages;
+                const mappedMessages = msgBatch.map((msg) => {
+                    if (msg[0] === 20 /* MType.MouseMove */) {
+                        let fixedMessage = msg;
+                        this.pageFrames.forEach((frame) => {
+                            if (frame.dataset.domain === event.data.domain) {
+                                const [type, x, y] = msg;
+                                const { left, top } = frame.getBoundingClientRect();
+                                fixedMessage = [type, x + left, y + top];
                             }
-                            if (msg[0] === 68 /* MType.MouseClick */) {
-                                let fixedMessage = msg;
-                                this.pageFrames.forEach((frame) => {
-                                    if (frame.dataset.domain === event.data.domain) {
-                                        const [type, id, hesitationTime, label, selector, normX, normY] = msg;
-                                        const { left, top, width, height } = frame.getBoundingClientRect();
-                                        const contentWidth = document.documentElement.scrollWidth;
-                                        const contentHeight = document.documentElement.scrollHeight;
-                                        // (normalizedX * frameWidth + frameLeftOffset)/docSize
-                                        const fullX = (normX / 100) * width + left;
-                                        const fullY = (normY / 100) * height + top;
-                                        const fixedX = fullX / contentWidth;
-                                        const fixedY = fullY / contentHeight;
-                                        fixedMessage = [
-                                            type,
-                                            id,
-                                            hesitationTime,
-                                            label,
-                                            selector,
-                                            Math.round(fixedX * 1e3) / 1e1,
-                                            Math.round(fixedY * 1e3) / 1e1,
-                                        ];
-                                    }
-                                });
-                                return fixedMessage;
+                        });
+                        return fixedMessage;
+                    }
+                    if (msg[0] === 68 /* MType.MouseClick */) {
+                        let fixedMessage = msg;
+                        this.pageFrames.forEach((frame) => {
+                            if (frame.dataset.domain === event.data.domain) {
+                                const [type, id, hesitationTime, label, selector, normX, normY] = msg;
+                                const { left, top, width, height } = frame.getBoundingClientRect();
+                                const contentWidth = document.documentElement.scrollWidth;
+                                const contentHeight = document.documentElement.scrollHeight;
+                                // (normalizedX * frameWidth + frameLeftOffset)/docSize
+                                const fullX = (normX / 100) * width + left;
+                                const fullY = (normY / 100) * height + top;
+                                const fixedX = fullX / contentWidth;
+                                const fixedY = fullY / contentHeight;
+                                fixedMessage = [
+                                    type,
+                                    id,
+                                    hesitationTime,
+                                    label,
+                                    selector,
+                                    Math.round(fixedX * 1e3) / 1e1,
+                                    Math.round(fixedY * 1e3) / 1e1,
+                                ];
                             }
-                            return msg;
                         });
-                        this.messages.push(...mappedMessages);
+                        return fixedMessage;
                     }
-                };
-                window.addEventListener('message', catchIframeMessage);
+                    return msg;
+                });
+                this.messages.push(...mappedMessages);
             }
+            if (data.line === proto.polling) {
+                if (!this.pollingQueue.length) {
+                    return;
+                }
+                while (this.pollingQueue.length) {
+                    const msg = this.pollingQueue.shift();
+                    // @ts-ignore
+                    event.source?.postMessage({ line: msg }, '*');
+                }
+            }
+        };
+        this.pollingQueue = [];
+        this.bootChildrenFrames = async () => {
+            await this.waitStarted();
+            this.pollingQueue.push(proto.startIframe);
+        };
+        this.killChildrenFrames = () => {
+            this.pollingQueue.push(proto.killIframe);
         };
         this.signalIframeTracker = () => {
             const domain = this.initialHostName;
@@ -236,6 +276,27 @@ class App {
         this.startTimeout = null;
         this.coldStartCommitN = 0;
         this.delay = 0;
+        this.attachStartCallback = (cb, useSafe = false) => {
+            if (useSafe) {
+                cb = this.safe(cb);
+            }
+            this.startCallbacks.push(cb);
+        };
+        this.attachStopCallback = (cb, useSafe = false) => {
+            if (useSafe) {
+                cb = this.safe(cb);
+            }
+            this.stopCallbacks.push(cb);
+        };
+        this.attachEventListener = (target, type, listener, useSafe = true, useCapture = true) => {
+            if (useSafe) {
+                listener = this.safe(listener);
+            }
+            const createListener = () => target ? (0, utils_js_1.createEventListener)(target, type, listener, useCapture) : null;
+            const deleteListener = () => target ? (0, utils_js_1.deleteEventListener)(target, type, listener, useCapture) : null;
+            this.attachStartCallback(createListener, useSafe);
+            this.attachStopCallback(deleteListener, useSafe);
+        };
         this.coldInterval = null;
         this.orderNumber = 0;
         this.coldStartTs = 0;
@@ -351,25 +412,24 @@ class App {
         }
         this.initWorker();
         const thisTab = this.session.getTabId();
-        const catchParentMessage = (event) => {
-            if (!this.active())
-                return;
-            const { data } = event;
-            if (!data)
-                return;
-            if (data.line === proto.parentAlive) {
-                this.parentActive = true;
-            }
-            if (data.line === proto.iframeId) {
-                this.parentActive = true;
-                this.rootId = data.id;
-                this.session.setSessionToken(data.token);
-                this.frameOderNumber = data.frameOrderNumber;
-                this.debug.log('starting iframe tracking', data);
-                this.allowAppStart();
-            }
-        };
-        window.addEventListener('message', catchParentMessage);
+        /**
+         * listen for messages from parent window, so we can signal that we're alive
+         * */
+        if (this.insideIframe) {
+            window.addEventListener('message', this.parentCrossDomainFrameListener);
+            setInterval(() => {
+                window.parent.postMessage({
+                    line: proto.polling,
+                }, '*');
+            }, 250);
+        }
+        /**
+         * if we get a signal from child iframes, we check for their node_id and send it back,
+         * so they can act as if it was just a same-domain iframe
+         * */
+        if (!this.insideIframe) {
+            window.addEventListener('message', this.crossDomainIframeListener);
+        }
         if (this.bc !== null) {
             this.bc.postMessage({
                 line: proto.ask,
@@ -378,7 +438,7 @@ class App {
             });
             this.startTimeout = setTimeout(() => {
                 this.allowAppStart();
-            }, 500);
+            }, 250);
             this.bc.onmessage = (ev) => {
                 if (ev.data.context === this.contextId) {
                     return;
@@ -634,27 +694,6 @@ class App {
     attachCommitCallback(cb) {
         this.commitCallbacks.push(cb);
     }
-    attachStartCallback(cb, useSafe = false) {
-        if (useSafe) {
-            cb = this.safe(cb);
-        }
-        this.startCallbacks.push(cb);
-    }
-    attachStopCallback(cb, useSafe = false) {
-        if (useSafe) {
-            cb = this.safe(cb);
-        }
-        this.stopCallbacks.push(cb);
-    }
-    attachEventListener(target, type, listener, useSafe = true, useCapture = true) {
-        if (useSafe) {
-            listener = this.safe(listener);
-        }
-        const createListener = () => target ? (0, utils_js_1.createEventListener)(target, type, listener, useCapture) : null;
-        const deleteListener = () => target ? (0, utils_js_1.deleteEventListener)(target, type, listener, useCapture) : null;
-        this.attachStartCallback(createListener, useSafe);
-        this.attachStopCallback(deleteListener, useSafe);
-    }
     // TODO: full correct semantic
     checkRequiredVersion(version) {
         const reqVer = version.split(/[.-]/);
@@ -1112,8 +1151,8 @@ class App {
             }
             await this.tagWatcher.fetchTags(this.options.ingestPoint, token);
             this.activityState = ActivityState.Active;
-            if (this.options.crossdomain?.enabled || this.insideIframe) {
-                this.crossdomainIframesModule();
+            if (this.options.crossdomain?.enabled && !this.insideIframe) {
+                void this.bootChildrenFrames();
             }
             if (canvasEnabled && !this.options.canvas.disableCanvas) {
                 this.canvasRecorder =
@@ -1220,9 +1259,12 @@ class App {
         });
     }
     async waitStarted() {
+        return this.waitStatus(ActivityState.Active);
+    }
+    async waitStatus(status) {
         return new Promise((resolve) => {
             const check = () => {
-                if (this.activityState === ActivityState.Active) {
+                if (this.activityState === status) {
                     resolve(true);
                 }
                 else {
@@ -1237,14 +1279,14 @@ class App {
      * and here we just apply 10ms delay just in case
      * */
     async start(...args) {
-        if (this.insideIframe) {
-            this.signalIframeTracker();
-        }
         if (this.activityState === ActivityState.Active ||
             this.activityState === ActivityState.Starting) {
             const reason = 'OpenReplay: trying to call `start()` on the instance that has been started already.';
             return Promise.resolve(UnsuccessfulStart(reason));
         }
+        if (this.insideIframe) {
+            this.signalIframeTracker();
+        }
         if (!document.hidden) {
             await this.waitStart();
             return this._start(...args);
@@ -1293,23 +1335,30 @@ class App {
     }
     stop(stopWorker = true) {
         if (this.activityState !== ActivityState.NotActive) {
+            console.trace('stopped');
             try {
+                if (!this.insideIframe && this.options.crossdomain?.enabled) {
+                    this.killChildrenFrames();
+                }
                 this.attributeSender.clear();
                 this.sanitizer.clear();
                 this.observer.disconnect();
                 this.nodes.clear();
                 this.ticker.stop();
                 this.stopCallbacks.forEach((cb) => cb());
-                this.debug.log('OpenReplay tracking stopped.');
                 this.tagWatcher.clear();
                 if (this.worker && stopWorker) {
                     this.worker.postMessage('stop');
                 }
                 this.canvasRecorder?.clear();
                 this.messages.length = 0;
+                this.trackedFrames = [];
+                this.parentActive = false;
+                this.canStart = false;
             }
             finally {
                 this.activityState = ActivityState.NotActive;
+                this.debug.log('OpenReplay tracking stopped.');
             }
         }
     }

package/cjs/index.js

@@ -98,7 +98,7 @@ class API {
             const orig = this.options.ingestPoint || index_js_1.DEFAULT_INGEST_POINT;
             req.open('POST', orig + '/v1/web/not-started');
             req.send(JSON.stringify({
-                trackerVersion: '14.0.9',
+                trackerVersion: '14.0.10-beta.1',
                 projectKey: this.options.projectKey,
                 doNotTrack,
                 reason: missingApi.length ? `missing api: ${missingApi.join(',')}` : reason,

package/cjs/modules/exception.js

@@ -69,8 +69,13 @@ function default_1(app, opts) {
                 app.send(msg);
             }
         }
-        app.attachEventListener(context, 'unhandledrejection', handler);
-        app.attachEventListener(context, 'error', handler);
+        try {
+            app.attachEventListener(context, 'unhandledrejection', handler);
+            app.attachEventListener(context, 'error', handler);
+        }
+        catch (e) {
+            console.error('Error while attaching to error proto contexts', e);
+        }
     }
     if (options.captureExceptions) {
         app.observer.attachContextCallback(patchContext); // TODO: attach once-per-iframe (?)

package/cjs/utils.js

@@ -131,9 +131,9 @@ function createEventListener(target, event, cb, capture) {
     }
     catch (e) {
         const msg = e.message;
-        console.debug(
+        console.error(
         // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
-        `Openreplay: ${msg}; if this error is caused by an IframeObserver, ignore it`);
+        `Openreplay: ${msg}; if this error is caused by an IframeObserver, ignore it`, event);
     }
 }
 exports.createEventListener = createEventListener;
@@ -144,9 +144,9 @@ function deleteEventListener(target, event, cb, capture) {
     }
     catch (e) {
         const msg = e.message;
-        console.debug(
+        console.error(
         // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
-        `Openreplay: ${msg}; if this error is caused by an IframeObserver, ignore it`);
+        `Openreplay: ${msg}; if this error is caused by an IframeObserver, ignore it`, event);
     }
 }
 exports.deleteEventListener = deleteEventListener;

package/lib/app/index.d.ts

@@ -37,6 +37,12 @@ declare const SuccessfulStart: (body: OnStartInfo) => SuccessfulStart;
 export type StartPromiseReturn = SuccessfulStart | UnsuccessfulStart;
 type StartCallback = (i: OnStartInfo) => void;
 type CommitCallback = (messages: Array<Message>) => void;
+declare enum ActivityState {
+    NotActive = 0,
+    Starting = 1,
+    Active = 2,
+    ColdStart = 3
+}
 type AppOptions = {
     revID: string;
     node_id: string;
@@ -99,7 +105,7 @@ export type Options = AppOptions & ObserverOptions & SanitizerOptions;
 export declare const DEFAULT_INGEST_POINT = "https://api.openreplay.com/ingest";
 export default class App {
     private readonly signalError;
-    private readonly insideIframe;
+    readonly insideIframe: boolean;
     readonly nodes: Nodes;
     readonly ticker: Ticker;
     readonly projectKey: string;
@@ -146,12 +152,15 @@ export default class App {
     /** used by child iframes for crossdomain only */
     parentActive: boolean;
     checkStatus: () => boolean;
-    /** used by child iframes for crossdomain only */
-    /** track app instances in crossdomain child iframes */
-    crossdomainIframesModule: () => void;
+    parentCrossDomainFrameListener: (event: MessageEvent) => void;
+    trackedFrames: number[];
+    crossDomainIframeListener: (event: MessageEvent) => void;
+    pollingQueue: string[];
+    bootChildrenFrames: () => Promise<void>;
+    killChildrenFrames: () => void;
     signalIframeTracker: () => void;
     startTimeout: ReturnType<typeof setTimeout> | null;
-    private allowAppStart;
+    allowAppStart(): void;
     private checkNodeId;
     private initWorker;
     private handleWorkerMsg;
@@ -176,9 +185,9 @@ export default class App {
     timestamp(): number;
     safe<T extends (this: any, ...args: any[]) => void>(fn: T): T;
     attachCommitCallback(cb: CommitCallback): void;
-    attachStartCallback(cb: StartCallback, useSafe?: boolean): void;
-    attachStopCallback(cb: () => any, useSafe?: boolean): void;
-    attachEventListener(target: EventTarget, type: string, listener: EventListener, useSafe?: boolean, useCapture?: boolean): void;
+    attachStartCallback: (cb: StartCallback, useSafe?: boolean) => void;
+    attachStopCallback: (cb: () => any, useSafe?: boolean) => void;
+    attachEventListener: (target: EventTarget, type: string, listener: EventListener, useSafe?: boolean, useCapture?: boolean) => void;
     checkRequiredVersion(version: string): boolean;
     private getTrackerInfo;
     getSessionInfo(): {
@@ -260,6 +269,7 @@ export default class App {
     getUxtId(): number | null;
     waitStart(): Promise<unknown>;
     waitStarted(): Promise<unknown>;
+    waitStatus(status: ActivityState): Promise<unknown>;
     /**
      * basically we ask other tabs during constructor
      * and here we just apply 10ms delay just in case

package/lib/app/index.js

@@ -43,14 +43,14 @@ const proto = {
     resp: 'never-gonna-let-you-down',
     // regenerating id (copied other tab)
     reg: 'never-gonna-run-around-and-desert-you',
-    // tracker inside a child iframe
-    iframeSignal: 'never-gonna-make-you-cry',
-    // getting node id for child iframe
-    iframeId: 'never-gonna-say-goodbye',
-    // batch of messages from an iframe window
-    iframeBatch: 'never-gonna-tell-a-lie-and-hurt-you',
-    // signal that parent is live
-    parentAlive: 'i-dont-know-more-lines',
+    iframeSignal: 'tracker inside a child iframe',
+    iframeId: 'getting node id for child iframe',
+    iframeBatch: 'batch of messages from an iframe window',
+    parentAlive: 'signal that parent is live',
+    killIframe: 'stop tracker inside frame',
+    startIframe: 'start tracker inside frame',
+    // checking updates
+    polling: 'hello-how-are-you-im-under-the-water-please-help-me',
 };
 export default class App {
     constructor(projectKey, sessionToken, options, signalError, insideIframe) {
@@ -67,7 +67,7 @@ export default class App {
         this.stopCallbacks = [];
         this.commitCallbacks = [];
         this.activityState = ActivityState.NotActive;
-        this.version = '14.0.9'; // TODO: version compatability check inside each plugin.
+        this.version = '14.0.10-beta.1'; // TODO: version compatability check inside each plugin.
         this.socketMode = false;
         this.compressionThreshold = 24 * 1000;
         this.bc = null;
@@ -87,104 +87,144 @@ export default class App {
         this.checkStatus = () => {
             return this.parentActive;
         };
-        /** used by child iframes for crossdomain only */
-        /** track app instances in crossdomain child iframes */
-        this.crossdomainIframesModule = () => {
-            if (!this.insideIframe) {
-                /**
-                 * if we get a signal from child iframes, we check for their node_id and send it back,
-                 * so they can act as if it was just a same-domain iframe
-                 * */
-                let crossdomainFrameCount = 0;
-                const catchIframeMessage = (event) => {
-                    if (!this.active())
-                        return;
-                    const { data } = event;
-                    if (!data)
-                        return;
-                    if (data.line === proto.iframeSignal) {
-                        // @ts-ignore
-                        event.source?.postMessage({ ping: true, line: proto.parentAlive }, '*');
-                        const childIframeDomain = data.domain;
-                        const pageIframes = Array.from(document.querySelectorAll('iframe'));
-                        this.pageFrames = pageIframes;
-                        const signalId = async () => {
-                            const id = await this.checkNodeId(pageIframes, childIframeDomain);
-                            if (id) {
-                                try {
-                                    await this.waitStarted();
-                                    crossdomainFrameCount++;
-                                    const token = this.session.getSessionToken();
-                                    const iframeData = {
-                                        line: proto.iframeId,
-                                        context: this.contextId,
-                                        domain: childIframeDomain,
-                                        id,
-                                        token,
-                                        frameOrderNumber: crossdomainFrameCount,
-                                    };
-                                    this.debug.log('iframe_data', iframeData);
-                                    // @ts-ignore
-                                    event.source?.postMessage(iframeData, '*');
-                                }
-                                catch (e) {
-                                    console.error(e);
-                                }
-                            }
-                        };
-                        void signalId();
+        this.parentCrossDomainFrameListener = (event) => {
+            const { data } = event;
+            if (!data || event.source === window)
+                return;
+            if (data.line === proto.startIframe) {
+                if (this.active())
+                    return;
+                try {
+                    this.allowAppStart();
+                    void this.start();
+                }
+                catch (e) {
+                    console.error('children frame restart failed:', e);
+                }
+            }
+            if (data.line === proto.parentAlive) {
+                this.parentActive = true;
+            }
+            if (data.line === proto.iframeId) {
+                this.parentActive = true;
+                this.rootId = data.id;
+                this.session.setSessionToken(data.token);
+                this.frameOderNumber = data.frameOrderNumber;
+                this.debug.log('starting iframe tracking', data);
+                this.allowAppStart();
+                this.delay = data.frameTimeOffset;
+            }
+            if (data.line === proto.killIframe) {
+                if (this.active()) {
+                    this.stop();
+                }
+            }
+        };
+        this.trackedFrames = [];
+        this.crossDomainIframeListener = (event) => {
+            if (!this.active() || event.source === window)
+                return;
+            const { data } = event;
+            if (!data)
+                return;
+            if (data.line === proto.iframeSignal) {
+                // @ts-ignore
+                event.source?.postMessage({ ping: true, line: proto.parentAlive }, '*');
+                const childIframeDomain = data.domain;
+                const pageIframes = Array.from(document.querySelectorAll('iframe'));
+                this.pageFrames = pageIframes;
+                const signalId = async () => {
+                    const id = await this.checkNodeId(pageIframes, childIframeDomain);
+                    if (id && !this.trackedFrames.includes(id)) {
+                        try {
+                            this.trackedFrames.push(id);
+                            await this.waitStarted();
+                            const token = this.session.getSessionToken();
+                            const iframeData = {
+                                line: proto.iframeId,
+                                context: this.contextId,
+                                domain: childIframeDomain,
+                                id,
+                                token,
+                                frameOrderNumber: this.trackedFrames.length,
+                                frameTimeOffset: this.timestamp(),
+                            };
+                            // @ts-ignore
+                            event.source?.postMessage(iframeData, '*');
+                        }
+                        catch (e) {
+                            console.error(e);
+                        }
                     }
-                    /**
-                     * proxying messages from iframe to main body, so they can be in one batch (same indexes, etc)
-                     * plus we rewrite some of the messages to be relative to the main context/window
-                     * */
-                    if (data.line === proto.iframeBatch) {
-                        const msgBatch = data.messages;
-                        const mappedMessages = msgBatch.map((msg) => {
-                            if (msg[0] === 20 /* MType.MouseMove */) {
-                                let fixedMessage = msg;
-                                this.pageFrames.forEach((frame) => {
-                                    if (frame.dataset.domain === event.data.domain) {
-                                        const [type, x, y] = msg;
-                                        const { left, top } = frame.getBoundingClientRect();
-                                        fixedMessage = [type, x + left, y + top];
-                                    }
-                                });
-                                return fixedMessage;
+                };
+                void signalId();
+            }
+            /**
+             * proxying messages from iframe to main body, so they can be in one batch (same indexes, etc)
+             * plus we rewrite some of the messages to be relative to the main context/window
+             * */
+            if (data.line === proto.iframeBatch) {
+                const msgBatch = data.messages;
+                const mappedMessages = msgBatch.map((msg) => {
+                    if (msg[0] === 20 /* MType.MouseMove */) {
+                        let fixedMessage = msg;
+                        this.pageFrames.forEach((frame) => {
+                            if (frame.dataset.domain === event.data.domain) {
+                                const [type, x, y] = msg;
+                                const { left, top } = frame.getBoundingClientRect();
+                                fixedMessage = [type, x + left, y + top];
                             }
-                            if (msg[0] === 68 /* MType.MouseClick */) {
-                                let fixedMessage = msg;
-                                this.pageFrames.forEach((frame) => {
-                                    if (frame.dataset.domain === event.data.domain) {
-                                        const [type, id, hesitationTime, label, selector, normX, normY] = msg;
-                                        const { left, top, width, height } = frame.getBoundingClientRect();
-                                        const contentWidth = document.documentElement.scrollWidth;
-                                        const contentHeight = document.documentElement.scrollHeight;
-                                        // (normalizedX * frameWidth + frameLeftOffset)/docSize
-                                        const fullX = (normX / 100) * width + left;
-                                        const fullY = (normY / 100) * height + top;
-                                        const fixedX = fullX / contentWidth;
-                                        const fixedY = fullY / contentHeight;
-                                        fixedMessage = [
-                                            type,
-                                            id,
-                                            hesitationTime,
-                                            label,
-                                            selector,
-                                            Math.round(fixedX * 1e3) / 1e1,
-                                            Math.round(fixedY * 1e3) / 1e1,
-                                        ];
-                                    }
-                                });
-                                return fixedMessage;
+                        });
+                        return fixedMessage;
+                    }
+                    if (msg[0] === 68 /* MType.MouseClick */) {
+                        let fixedMessage = msg;
+                        this.pageFrames.forEach((frame) => {
+                            if (frame.dataset.domain === event.data.domain) {
+                                const [type, id, hesitationTime, label, selector, normX, normY] = msg;
+                                const { left, top, width, height } = frame.getBoundingClientRect();
+                                const contentWidth = document.documentElement.scrollWidth;
+                                const contentHeight = document.documentElement.scrollHeight;
+                                // (normalizedX * frameWidth + frameLeftOffset)/docSize
+                                const fullX = (normX / 100) * width + left;
+                                const fullY = (normY / 100) * height + top;
+                                const fixedX = fullX / contentWidth;
+                                const fixedY = fullY / contentHeight;
+                                fixedMessage = [
+                                    type,
+                                    id,
+                                    hesitationTime,
+                                    label,
+                                    selector,
+                                    Math.round(fixedX * 1e3) / 1e1,
+                                    Math.round(fixedY * 1e3) / 1e1,
+                                ];
                             }
-                            return msg;
                         });
-                        this.messages.push(...mappedMessages);
+                        return fixedMessage;
                     }
-                };
-                window.addEventListener('message', catchIframeMessage);
+                    return msg;
+                });
+                this.messages.push(...mappedMessages);
             }
+            if (data.line === proto.polling) {
+                if (!this.pollingQueue.length) {
+                    return;
+                }
+                while (this.pollingQueue.length) {
+                    const msg = this.pollingQueue.shift();
+                    // @ts-ignore
+                    event.source?.postMessage({ line: msg }, '*');
+                }
+            }
+        };
+        this.pollingQueue = [];
+        this.bootChildrenFrames = async () => {
+            await this.waitStarted();
+            this.pollingQueue.push(proto.startIframe);
+        };
+        this.killChildrenFrames = () => {
+            this.pollingQueue.push(proto.killIframe);
         };
         this.signalIframeTracker = () => {
             const domain = this.initialHostName;
@@ -207,6 +247,27 @@ export default class App {
         this.startTimeout = null;
         this.coldStartCommitN = 0;
         this.delay = 0;
+        this.attachStartCallback = (cb, useSafe = false) => {
+            if (useSafe) {
+                cb = this.safe(cb);
+            }
+            this.startCallbacks.push(cb);
+        };
+        this.attachStopCallback = (cb, useSafe = false) => {
+            if (useSafe) {
+                cb = this.safe(cb);
+            }
+            this.stopCallbacks.push(cb);
+        };
+        this.attachEventListener = (target, type, listener, useSafe = true, useCapture = true) => {
+            if (useSafe) {
+                listener = this.safe(listener);
+            }
+            const createListener = () => target ? createEventListener(target, type, listener, useCapture) : null;
+            const deleteListener = () => target ? deleteEventListener(target, type, listener, useCapture) : null;
+            this.attachStartCallback(createListener, useSafe);
+            this.attachStopCallback(deleteListener, useSafe);
+        };
         this.coldInterval = null;
         this.orderNumber = 0;
         this.coldStartTs = 0;
@@ -322,25 +383,24 @@ export default class App {
         }
         this.initWorker();
         const thisTab = this.session.getTabId();
-        const catchParentMessage = (event) => {
-            if (!this.active())
-                return;
-            const { data } = event;
-            if (!data)
-                return;
-            if (data.line === proto.parentAlive) {
-                this.parentActive = true;
-            }
-            if (data.line === proto.iframeId) {
-                this.parentActive = true;
-                this.rootId = data.id;
-                this.session.setSessionToken(data.token);
-                this.frameOderNumber = data.frameOrderNumber;
-                this.debug.log('starting iframe tracking', data);
-                this.allowAppStart();
-            }
-        };
-        window.addEventListener('message', catchParentMessage);
+        /**
+         * listen for messages from parent window, so we can signal that we're alive
+         * */
+        if (this.insideIframe) {
+            window.addEventListener('message', this.parentCrossDomainFrameListener);
+            setInterval(() => {
+                window.parent.postMessage({
+                    line: proto.polling,
+                }, '*');
+            }, 250);
+        }
+        /**
+         * if we get a signal from child iframes, we check for their node_id and send it back,
+         * so they can act as if it was just a same-domain iframe
+         * */
+        if (!this.insideIframe) {
+            window.addEventListener('message', this.crossDomainIframeListener);
+        }
         if (this.bc !== null) {
             this.bc.postMessage({
                 line: proto.ask,
@@ -349,7 +409,7 @@ export default class App {
             });
             this.startTimeout = setTimeout(() => {
                 this.allowAppStart();
-            }, 500);
+            }, 250);
             this.bc.onmessage = (ev) => {
                 if (ev.data.context === this.contextId) {
                     return;
@@ -605,27 +665,6 @@ export default class App {
     attachCommitCallback(cb) {
         this.commitCallbacks.push(cb);
     }
-    attachStartCallback(cb, useSafe = false) {
-        if (useSafe) {
-            cb = this.safe(cb);
-        }
-        this.startCallbacks.push(cb);
-    }
-    attachStopCallback(cb, useSafe = false) {
-        if (useSafe) {
-            cb = this.safe(cb);
-        }
-        this.stopCallbacks.push(cb);
-    }
-    attachEventListener(target, type, listener, useSafe = true, useCapture = true) {
-        if (useSafe) {
-            listener = this.safe(listener);
-        }
-        const createListener = () => target ? createEventListener(target, type, listener, useCapture) : null;
-        const deleteListener = () => target ? deleteEventListener(target, type, listener, useCapture) : null;
-        this.attachStartCallback(createListener, useSafe);
-        this.attachStopCallback(deleteListener, useSafe);
-    }
     // TODO: full correct semantic
     checkRequiredVersion(version) {
         const reqVer = version.split(/[.-]/);
@@ -1083,8 +1122,8 @@ export default class App {
             }
             await this.tagWatcher.fetchTags(this.options.ingestPoint, token);
             this.activityState = ActivityState.Active;
-            if (this.options.crossdomain?.enabled || this.insideIframe) {
-                this.crossdomainIframesModule();
+            if (this.options.crossdomain?.enabled && !this.insideIframe) {
+                void this.bootChildrenFrames();
             }
             if (canvasEnabled && !this.options.canvas.disableCanvas) {
                 this.canvasRecorder =
@@ -1191,9 +1230,12 @@ export default class App {
         });
     }
     async waitStarted() {
+        return this.waitStatus(ActivityState.Active);
+    }
+    async waitStatus(status) {
         return new Promise((resolve) => {
             const check = () => {
-                if (this.activityState === ActivityState.Active) {
+                if (this.activityState === status) {
                     resolve(true);
                 }
                 else {
@@ -1208,14 +1250,14 @@ export default class App {
      * and here we just apply 10ms delay just in case
      * */
     async start(...args) {
-        if (this.insideIframe) {
-            this.signalIframeTracker();
-        }
         if (this.activityState === ActivityState.Active ||
             this.activityState === ActivityState.Starting) {
             const reason = 'OpenReplay: trying to call `start()` on the instance that has been started already.';
             return Promise.resolve(UnsuccessfulStart(reason));
         }
+        if (this.insideIframe) {
+            this.signalIframeTracker();
+        }
         if (!document.hidden) {
             await this.waitStart();
             return this._start(...args);
@@ -1264,23 +1306,30 @@ export default class App {
     }
     stop(stopWorker = true) {
         if (this.activityState !== ActivityState.NotActive) {
+            console.trace('stopped');
             try {
+                if (!this.insideIframe && this.options.crossdomain?.enabled) {
+                    this.killChildrenFrames();
+                }
                 this.attributeSender.clear();
                 this.sanitizer.clear();
                 this.observer.disconnect();
                 this.nodes.clear();
                 this.ticker.stop();
                 this.stopCallbacks.forEach((cb) => cb());
-                this.debug.log('OpenReplay tracking stopped.');
                 this.tagWatcher.clear();
                 if (this.worker && stopWorker) {
                     this.worker.postMessage('stop');
                 }
                 this.canvasRecorder?.clear();
                 this.messages.length = 0;
+                this.trackedFrames = [];
+                this.parentActive = false;
+                this.canStart = false;
             }
             finally {
                 this.activityState = ActivityState.NotActive;
+                this.debug.log('OpenReplay tracking stopped.');
             }
         }
     }

package/lib/index.js

@@ -67,7 +67,7 @@ export default class API {
             const orig = this.options.ingestPoint || DEFAULT_INGEST_POINT;
             req.open('POST', orig + '/v1/web/not-started');
             req.send(JSON.stringify({
-                trackerVersion: '14.0.9',
+                trackerVersion: '14.0.10-beta.1',
                 projectKey: this.options.projectKey,
                 doNotTrack,
                 reason: missingApi.length ? `missing api: ${missingApi.join(',')}` : reason,

package/lib/modules/exception.js

@@ -61,8 +61,13 @@ export default function (app, opts) {
                 app.send(msg);
             }
         }
-        app.attachEventListener(context, 'unhandledrejection', handler);
-        app.attachEventListener(context, 'error', handler);
+        try {
+            app.attachEventListener(context, 'unhandledrejection', handler);
+            app.attachEventListener(context, 'error', handler);
+        }
+        catch (e) {
+            console.error('Error while attaching to error proto contexts', e);
+        }
     }
     if (options.captureExceptions) {
         app.observer.attachContextCallback(patchContext); // TODO: attach once-per-iframe (?)

package/lib/utils.js

@@ -116,9 +116,9 @@ export function createEventListener(target, event, cb, capture) {
     }
     catch (e) {
         const msg = e.message;
-        console.debug(
+        console.error(
         // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
-        `Openreplay: ${msg}; if this error is caused by an IframeObserver, ignore it`);
+        `Openreplay: ${msg}; if this error is caused by an IframeObserver, ignore it`, event);
     }
 }
 export function deleteEventListener(target, event, cb, capture) {
@@ -128,9 +128,9 @@ export function deleteEventListener(target, event, cb, capture) {
     }
     catch (e) {
         const msg = e.message;
-        console.debug(
+        console.error(
         // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
-        `Openreplay: ${msg}; if this error is caused by an IframeObserver, ignore it`);
+        `Openreplay: ${msg}; if this error is caused by an IframeObserver, ignore it`, event);
     }
 }
 class FIFOTaskScheduler {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@openreplay/tracker",
   "description": "The OpenReplay tracker main package",
-  "version": "14.0.9",
+  "version": "14.0.10-beta.1",
   "keywords": [
     "logging",
     "replay"