@openreplay/tracker 14.0.7 → 14.0.9-beta.1

package/CHANGELOG.md

@@ -1,3 +1,8 @@
+# 14.0.8
+
+- use separate library to handle network requests ([@openreplay/network-proxy](https://www.npmjs.com/package/@openreplay/network-proxy))
+- fixes for window.message listeners
+
 # 14.0.7
 
 - check for stopping status during restarts

package/cjs/app/canvas.js

@@ -106,10 +106,8 @@ class CanvasRecorder {
     startTracking() {
         setTimeout(() => {
             this.app.nodes.scanTree(this.captureCanvas);
-            this.app.nodes.attachNodeCallback((node) => {
-                this.captureCanvas(node);
-            });
-        }, 500);
+            this.app.nodes.attachNodeCallback(this.captureCanvas);
+        }, 250);
     }
     sendSnaps(images, canvasId, createdAt) {
         if (Object.keys(this.snapshots).length === 0) {

package/cjs/app/index.d.ts

@@ -143,6 +143,13 @@ export default class App {
     private readonly initialHostName;
     private features;
     constructor(projectKey: string, sessionToken: string | undefined, options: Partial<Options>, signalError: (error: string, apis: string[]) => void, insideIframe: boolean);
+    /** 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;
+    signalIframeTracker: () => void;
     startTimeout: ReturnType<typeof setTimeout> | null;
     private allowAppStart;
     private checkNodeId;

package/cjs/app/index.js

@@ -78,6 +78,8 @@ const proto = {
     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',
 };
 class App {
     constructor(projectKey, sessionToken, options, signalError, insideIframe) {
@@ -94,7 +96,7 @@ class App {
         this.stopCallbacks = [];
         this.commitCallbacks = [];
         this.activityState = ActivityState.NotActive;
-        this.version = '14.0.7'; // TODO: version compatability check inside each plugin.
+        this.version = '14.0.9-beta.1'; // TODO: version compatability check inside each plugin.
         this.socketMode = false;
         this.compressionThreshold = 24 * 1000;
         this.bc = null;
@@ -109,6 +111,129 @@ class App {
             'feature-flags': true,
             'usability-test': true,
         };
+        /** used by child iframes for crossdomain only */
+        this.parentActive = false;
+        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) => {
+                    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();
+                    }
+                    /**
+                     * 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;
+                            }
+                            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 msg;
+                        });
+                        this.messages.push(...mappedMessages);
+                    }
+                };
+                window.addEventListener('message', catchIframeMessage);
+                this.attachStopCallback(() => {
+                    window.removeEventListener('message', catchIframeMessage);
+                });
+            }
+        };
+        this.signalIframeTracker = () => {
+            const domain = this.initialHostName;
+            const thisTab = this.session.getTabId();
+            const signalToParent = (n) => {
+                window.parent.postMessage({
+                    line: proto.iframeSignal,
+                    source: thisTab,
+                    context: this.contextId,
+                    domain,
+                }, this.options.crossdomain?.parentDomain ?? '*');
+                setTimeout(() => {
+                    if (!this.checkStatus() && n < 100) {
+                        void signalToParent(n + 1);
+                    }
+                }, 250);
+            };
+            void signalToParent(1);
+        };
         this.startTimeout = null;
         this.coldStartCommitN = 0;
         this.delay = 0;
@@ -227,129 +352,26 @@ class App {
         }
         this.initWorker();
         const thisTab = this.session.getTabId();
-        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) => {
-                const { data } = event;
-                if (data.line === proto.iframeSignal) {
-                    const childIframeDomain = data.domain;
-                    const pageIframes = Array.from(document.querySelectorAll('iframe'));
-                    this.pageFrames = pageIframes;
-                    const signalId = async () => {
-                        let tries = 0;
-                        while (tries < 10) {
-                            const id = this.checkNodeId(pageIframes, childIframeDomain);
-                            if (id) {
-                                this.waitStarted()
-                                    .then(() => {
-                                    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(console.error);
-                                tries = 10;
-                                break;
-                            }
-                            tries++;
-                            await delay(100);
-                        }
-                    };
-                    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];
-                                }
-                            });
-                            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 fixedMessage;
-                        }
-                        return msg;
-                    });
-                    this.messages.push(...mappedMessages);
-                }
-            };
-            window.addEventListener('message', catchIframeMessage);
-            this.attachStopCallback(() => {
-                window.removeEventListener('message', catchIframeMessage);
-            });
-        }
-        else {
-            const catchParentMessage = (event) => {
-                const { data } = event;
-                if (data.line !== proto.iframeId) {
-                    return;
-                }
+        const catchParentMessage = (event) => {
+            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);
-            this.attachStopCallback(() => {
-                window.removeEventListener('message', catchParentMessage);
-            });
-            // communicating with parent window,
-            // even if its crossdomain is possible via postMessage api
-            const domain = this.initialHostName;
-            window.parent.postMessage({
-                line: proto.iframeSignal,
-                source: thisTab,
-                context: this.contextId,
-                domain,
-            }, '*');
-        }
+            }
+        };
+        window.addEventListener('message', catchParentMessage);
+        this.attachStopCallback(() => {
+            window.removeEventListener('message', catchParentMessage);
+        });
         if (this.bc !== null) {
             this.bc.postMessage({
                 line: proto.ask,
@@ -395,11 +417,29 @@ class App {
             this.startTimeout = null;
         }
     }
-    checkNodeId(iframes, domain) {
+    async checkNodeId(iframes, domain) {
         for (const iframe of iframes) {
             if (iframe.dataset.domain === domain) {
-                // @ts-ignore
-                return iframe[this.options.node_id];
+                /**
+                 * Here we're trying to get node id from the iframe (which is kept in observer)
+                 * because of async nature of dom initialization, we give 100 retries with 100ms delay each
+                 * which equals to 10 seconds. This way we have a period where we give app some time to load
+                 * and tracker some time to parse the initial DOM tree even on slower devices
+                 * */
+                let tries = 0;
+                while (tries < 100) {
+                    // @ts-ignore
+                    const potentialId = iframe[this.options.node_id];
+                    if (potentialId !== undefined) {
+                        tries = 100;
+                        return potentialId;
+                    }
+                    else {
+                        tries++;
+                        await delay(100);
+                    }
+                }
+                return null;
             }
         }
         return null;
@@ -524,7 +564,7 @@ class App {
                 line: proto.iframeBatch,
                 messages: this.messages,
                 domain: this.initialHostName,
-            }, '*');
+            }, this.options.crossdomain?.parentDomain ?? '*');
             this.commitCallbacks.forEach((cb) => cb(this.messages));
             this.messages.length = 0;
             return;
@@ -609,7 +649,6 @@ class App {
         }
         this.stopCallbacks.push(cb);
     }
-    // Use  app.nodes.attachNodeListener for registered nodes instead
     attachEventListener(target, type, listener, useSafe = true, useCapture = true) {
         if (useSafe) {
             listener = this.safe(listener);
@@ -1076,6 +1115,9 @@ class App {
             }
             await this.tagWatcher.fetchTags(this.options.ingestPoint, token);
             this.activityState = ActivityState.Active;
+            if (this.options.crossdomain?.enabled || this.insideIframe) {
+                this.crossdomainIframesModule();
+            }
             if (canvasEnabled && !this.options.canvas.disableCanvas) {
                 this.canvasRecorder =
                     this.canvasRecorder ??
@@ -1086,7 +1128,6 @@ class App {
                             fixedScaling: this.options.canvas.fixedCanvasScaling,
                             useAnimationFrame: this.options.canvas.useAnimationFrame,
                         });
-                this.canvasRecorder.startTracking();
             }
             /** --------------- COLD START BUFFER ------------------*/
             if (isColdStart) {
@@ -1109,8 +1150,11 @@ class App {
                 }
                 this.ticker.start();
             }
+            this.canvasRecorder?.startTracking();
             if (this.features['usability-test']) {
-                this.uxtManager = this.uxtManager ? this.uxtManager : new index_js_1.default(this, uxtStorageKey);
+                this.uxtManager = this.uxtManager
+                    ? this.uxtManager
+                    : new index_js_1.default(this, uxtStorageKey);
                 let uxtId;
                 const savedUxtTag = this.localStorage.getItem(uxtStorageKey);
                 if (savedUxtTag) {
@@ -1191,6 +1235,9 @@ 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.';

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.7',
+                trackerVersion: '14.0.9-beta.1',
                 projectKey: this.options.projectKey,
                 doNotTrack,
                 reason: missingApi.length ? `missing api: ${missingApi.join(',')}` : reason,

package/cjs/modules/network.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const messages_gen_js_1 = require("../app/messages.gen.js");
 const utils_js_1 = require("../utils.js");
 const axiosSpy_js_1 = __importDefault(require("./axiosSpy.js"));
-const index_js_1 = __importDefault(require("./Network/index.js"));
+const network_proxy_1 = __importDefault(require("@openreplay/network-proxy"));
 function getXHRRequestDataObject(xhr) {
     // @ts-ignore  this is 3x faster than using Map<XHR, XHRRequestData>
     if (!xhr.__or_req_data__) {
@@ -79,7 +79,9 @@ function default_1(app, opts = {}) {
     const patchWindow = (context) => {
         /* ====== modern way ====== */
         if (options.useProxy) {
-            return (0, index_js_1.default)(context, options.ignoreHeaders, setSessionTokenHeader, sanitize, (message) => app.send(message), (url) => app.isServiceURL(url), options.tokenUrlMatcher);
+            return (0, network_proxy_1.default)(context, options.ignoreHeaders, setSessionTokenHeader, sanitize, (message) => {
+                app.send((0, messages_gen_js_1.NetworkRequest)(message.requestType, message.method, message.url, message.request, message.response, message.status, message.startTime + (0, utils_js_1.getTimeOrigin)(), message.duration, message.responseSize));
+            }, (url) => app.isServiceURL(url), { xhr: true, fetch: true, beacon: true }, options.tokenUrlMatcher);
         }
         /* ====== Fetch ====== */
         const origFetch = context.fetch.bind(context);

package/lib/app/canvas.js

@@ -104,10 +104,8 @@ class CanvasRecorder {
     startTracking() {
         setTimeout(() => {
             this.app.nodes.scanTree(this.captureCanvas);
-            this.app.nodes.attachNodeCallback((node) => {
-                this.captureCanvas(node);
-            });
-        }, 500);
+            this.app.nodes.attachNodeCallback(this.captureCanvas);
+        }, 250);
     }
     sendSnaps(images, canvasId, createdAt) {
         if (Object.keys(this.snapshots).length === 0) {

package/lib/app/index.d.ts

@@ -143,6 +143,13 @@ export default class App {
     private readonly initialHostName;
     private features;
     constructor(projectKey: string, sessionToken: string | undefined, options: Partial<Options>, signalError: (error: string, apis: string[]) => void, insideIframe: boolean);
+    /** 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;
+    signalIframeTracker: () => void;
     startTimeout: ReturnType<typeof setTimeout> | null;
     private allowAppStart;
     private checkNodeId;