@openreplay/tracker 14.0.9 → 14.0.10-beta.2

package/cjs/app/nodes.js

@@ -2,8 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const utils_js_1 = require("../utils.js");
 class Nodes {
-    constructor(node_id) {
+    constructor(node_id, angularMode) {
         this.node_id = node_id;
+        this.angularMode = angularMode;
         this.nodes = [];
         this.totalNodeAmount = 0;
         this.nodeCallbacks = [];
@@ -12,9 +13,22 @@ class Nodes {
         this.scanTree = (cb) => {
             this.nodes.forEach((node) => cb(node));
         };
+        this.attachNodeListener = (node, type, listener, useCapture = true) => {
+            const id = this.getID(node);
+            if (id === undefined) {
+                return;
+            }
+            (0, utils_js_1.createEventListener)(node, type, listener, useCapture, this.angularMode);
+            let listeners = this.elementListeners.get(id);
+            if (listeners === undefined) {
+                listeners = [];
+                this.elementListeners.set(id, listeners);
+            }
+            listeners.push([type, listener, useCapture]);
+        };
     }
     syntheticMode(frameOrder) {
-        const maxSafeNumber = 9007199254740900;
+        const maxSafeNumber = Number.MAX_SAFE_INTEGER;
         const placeholderSize = 99999999;
         const nextFrameId = placeholderSize * frameOrder;
         // I highly doubt that this will ever happen,
@@ -28,19 +42,6 @@ class Nodes {
     attachNodeCallback(nodeCallback) {
         this.nodeCallbacks.push(nodeCallback);
     }
-    attachNodeListener(node, type, listener, useCapture = true) {
-        const id = this.getID(node);
-        if (id === undefined) {
-            return;
-        }
-        (0, utils_js_1.createEventListener)(node, type, listener, useCapture);
-        let listeners = this.elementListeners.get(id);
-        if (listeners === undefined) {
-            listeners = [];
-            this.elementListeners.set(id, listeners);
-        }
-        listeners.push([type, listener, useCapture]);
-    }
     registerNode(node) {
         let id = node[this.node_id];
         const isNew = id === undefined;
@@ -63,7 +64,7 @@ class Nodes {
             const listeners = this.elementListeners.get(id);
             if (listeners !== undefined) {
                 this.elementListeners.delete(id);
-                listeners.forEach((listener) => (0, utils_js_1.deleteEventListener)(node, listener[0], listener[1], listener[2]));
+                listeners.forEach((listener) => (0, utils_js_1.deleteEventListener)(node, listener[0], listener[1], listener[2], this.angularMode));
             }
             this.totalNodeAmount--;
         }

package/cjs/app/observer/iframe_observer.d.ts

@@ -1,5 +1,5 @@
 import Observer from './observer.js';
 export default class IFrameObserver extends Observer {
     observe(iframe: HTMLIFrameElement): void;
-    syntheticObserve(selfId: number, doc: Document): void;
+    syntheticObserve(rootNodeId: number, doc: Document): void;
 }

package/cjs/app/observer/iframe_observer.js

@@ -22,13 +22,13 @@ class IFrameObserver extends observer_js_1.default {
             this.app.send((0, messages_gen_js_1.CreateIFrameDocument)(hostID, docID));
         });
     }
-    syntheticObserve(selfId, doc) {
+    syntheticObserve(rootNodeId, doc) {
         this.observeRoot(doc, (docID) => {
             if (docID === undefined) {
                 this.app.debug.log('OpenReplay: Iframe document not bound');
                 return;
             }
-            this.app.send((0, messages_gen_js_1.CreateIFrameDocument)(selfId, docID));
+            this.app.send((0, messages_gen_js_1.CreateIFrameDocument)(rootNodeId, docID));
         });
     }
 }

package/cjs/app/observer/observer.d.ts

@@ -10,6 +10,10 @@ export default abstract class Observer {
     private readonly textSet;
     constructor(app: App, isTopContext?: boolean);
     private clear;
+    /**
+     * Unbinds the removed nodes in case of iframe src change.
+     */
+    private handleIframeSrcChange;
     private sendNodeAttribute;
     private sendNodeData;
     private bindNode;

package/cjs/app/observer/observer.js

@@ -57,7 +57,6 @@ class Observer {
                 }
                 if (type === 'childList') {
                     for (let i = 0; i < mutation.removedNodes.length; i++) {
-                        // Should be the same as bindTree(mutation.removedNodes[i]), but logic needs to be be untied
                         if (isObservable(mutation.removedNodes[i])) {
                             this.bindNode(mutation.removedNodes[i]);
                         }
@@ -79,6 +78,9 @@ class Observer {
                     if (name === null) {
                         continue;
                     }
+                    if (target instanceof HTMLIFrameElement && name === 'src') {
+                        this.handleIframeSrcChange(target);
+                    }
                     let attr = this.attributesMap.get(id);
                     if (attr === undefined) {
                         this.attributesMap.set(id, (attr = new Set()));
@@ -88,11 +90,10 @@ class Observer {
                 }
                 if (type === 'characterData') {
                     this.textSet.add(id);
-                    continue;
                 }
             }
             this.commitNodes();
-        }));
+        }), this.app.options.angularMode);
     }
     clear() {
         this.commited.length = 0;
@@ -101,10 +102,40 @@ class Observer {
         this.attributesMap.clear();
         this.textSet.clear();
     }
+    /**
+     * Unbinds the removed nodes in case of iframe src change.
+     */
+    handleIframeSrcChange(iframe) {
+        const oldContentDocument = iframe.contentDocument;
+        if (oldContentDocument) {
+            const id = this.app.nodes.getID(oldContentDocument);
+            if (id !== undefined) {
+                const walker = document.createTreeWalker(oldContentDocument, NodeFilter.SHOW_ELEMENT + NodeFilter.SHOW_TEXT, {
+                    acceptNode: (node) => isIgnored(node) || this.app.nodes.getID(node) === undefined
+                        ? NodeFilter.FILTER_REJECT
+                        : NodeFilter.FILTER_ACCEPT,
+                }, 
+                // @ts-ignore
+                false);
+                let removed = 0;
+                const totalBeforeRemove = this.app.nodes.getNodeCount();
+                while (walker.nextNode()) {
+                    if (!iframe.contentDocument.contains(walker.currentNode)) {
+                        removed += 1;
+                        this.app.nodes.unregisterNode(walker.currentNode);
+                    }
+                }
+                const removedPercent = Math.floor((removed / totalBeforeRemove) * 100);
+                if (removedPercent > 30) {
+                    this.app.send((0, messages_gen_js_1.UnbindNodes)(removedPercent));
+                }
+            }
+        }
+    }
     sendNodeAttribute(id, node, name, value) {
         if ((0, guards_js_1.isSVGElement)(node)) {
-            if (name.substr(0, 6) === 'xlink:') {
-                name = name.substr(6);
+            if (name.substring(0, 6) === 'xlink:') {
+                name = name.substring(6);
             }
             if (value === null) {
                 this.app.send((0, messages_gen_js_1.RemoveNodeAttribute)(id, name));
@@ -125,7 +156,7 @@ class Observer {
             name === 'integrity' ||
             name === 'crossorigin' ||
             name === 'autocomplete' ||
-            name.substr(0, 2) === 'on') {
+            name.substring(0, 2) === 'on') {
             return;
         }
         if (name === 'value' &&

package/cjs/app/observer/top_observer.d.ts

@@ -19,7 +19,7 @@ export default class TopObserver extends Observer {
     private shadowRootObservers;
     private handleShadowRoot;
     observe(): void;
-    crossdomainObserve(selfId: number, frameOder: number): void;
+    crossdomainObserve(rootNodeId: number, frameOder: number): void;
     disconnect(): void;
 }
 export {};

package/cjs/app/observer/top_observer.js

@@ -107,7 +107,7 @@ class TopObserver extends observer_js_1.default {
             this.app.nodes.callNodeCallbacks(document, true);
         }, window.document.documentElement);
     }
-    crossdomainObserve(selfId, frameOder) {
+    crossdomainObserve(rootNodeId, frameOder) {
         const observer = this;
         Element.prototype.attachShadow = function () {
             // eslint-disable-next-line
@@ -119,7 +119,7 @@ class TopObserver extends observer_js_1.default {
         this.app.nodes.syntheticMode(frameOder);
         const iframeObserver = new iframe_observer_js_1.default(this.app);
         this.iframeObservers.push(iframeObserver);
-        iframeObserver.syntheticObserve(selfId, window.document);
+        iframeObserver.syntheticObserve(rootNodeId, window.document);
     }
     disconnect() {
         this.iframeOffsets.clear();

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.2',
                 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/modules/img.js

@@ -93,7 +93,7 @@ function default_1(app) {
                 }
             }
         }
-    }));
+    }), app.options.angularMode);
     app.attachStopCallback(() => {
         observer.disconnect();
     });

package/cjs/utils.d.ts

@@ -22,8 +22,8 @@ export declare function inIframe(): boolean | null;
  * we need to use this to achieve safe behavior
  * */
 export declare function ngSafeBrowserMethod(method: string): string;
-export declare function createMutationObserver(cb: MutationCallback): MutationObserver;
-export declare function createEventListener(target: EventTarget, event: string, cb: EventListenerOrEventListenerObject, capture?: boolean): void;
-export declare function deleteEventListener(target: EventTarget, event: string, cb: EventListenerOrEventListenerObject, capture?: boolean): void;
+export declare function createMutationObserver(cb: MutationCallback, angularMode?: boolean): MutationObserver;
+export declare function createEventListener(target: EventTarget, event: string, cb: EventListenerOrEventListenerObject, capture?: boolean, angularMode?: boolean): void;
+export declare function deleteEventListener(target: EventTarget, event: string, cb: EventListenerOrEventListenerObject, capture?: boolean, angularMode?: boolean): void;
 export declare function requestIdleCb(callback: () => void): void;
 export declare function simpleMerge<T>(defaultObj: T, givenObj: Partial<T>): T;

package/cjs/utils.js

@@ -119,34 +119,53 @@ function ngSafeBrowserMethod(method) {
         : method;
 }
 exports.ngSafeBrowserMethod = ngSafeBrowserMethod;
-function createMutationObserver(cb) {
-    const mObserver = ngSafeBrowserMethod('MutationObserver');
-    return new window[mObserver](cb);
+function createMutationObserver(cb, angularMode) {
+    if (angularMode) {
+        const mObserver = ngSafeBrowserMethod('MutationObserver');
+        return new window[mObserver](cb);
+    }
+    else {
+        return new MutationObserver(cb);
+    }
 }
 exports.createMutationObserver = createMutationObserver;
-function createEventListener(target, event, cb, capture) {
-    const safeAddEventListener = ngSafeBrowserMethod('addEventListener');
+function createEventListener(target, event, cb, capture, angularMode) {
+    let safeAddEventListener;
+    if (angularMode) {
+        safeAddEventListener = ngSafeBrowserMethod('addEventListener');
+    }
+    else {
+        safeAddEventListener = 'addEventListener';
+    }
     try {
         target[safeAddEventListener](event, cb, capture);
+        target.addEventListener(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, target);
     }
 }
 exports.createEventListener = createEventListener;
-function deleteEventListener(target, event, cb, capture) {
-    const safeRemoveEventListener = ngSafeBrowserMethod('removeEventListener');
+function deleteEventListener(target, event, cb, capture, angularMode) {
+    let safeRemoveEventListener;
+    if (angularMode) {
+        safeRemoveEventListener = ngSafeBrowserMethod('removeEventListener');
+    }
+    else {
+        safeRemoveEventListener = 'removeEventListener';
+    }
     try {
         target[safeRemoveEventListener](event, cb, capture);
+        target.removeEventListener(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, target);
     }
 }
 exports.deleteEventListener = deleteEventListener;

package/lib/app/index.d.ts

@@ -18,6 +18,12 @@ export interface StartOptions {
     forceNew?: boolean;
     sessionHash?: string;
     assistOnly?: boolean;
+    /**
+     * @deprecated We strongly advise to use .start().then instead.
+     *
+     * This method is kept for snippet compatibility only
+     * */
+    startCallback?: (result: StartPromiseReturn) => void;
 }
 interface OnStartInfo {
     sessionID: string;
@@ -37,6 +43,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;
@@ -94,12 +106,18 @@ type AppOptions = {
         parentDomain?: string;
     };
     network?: NetworkOptions;
+    /**
+     * use this flag if you're using Angular
+     * basically goes around window.Zone api changes to mutation observer
+     * and event listeners
+     * */
+    angularMode?: boolean;
 } & WebworkerOptions & SessOptions;
 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;
@@ -140,18 +158,29 @@ export default class App {
     private rootId;
     private pageFrames;
     private frameOderNumber;
-    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;
+    parentCrossDomainFrameListener: (event: MessageEvent) => void;
+    /**
+     * context ids for iframes,
+     * order is not so important as long as its consistent
+     * */
+    trackedFrames: string[];
+    crossDomainIframeListener: (event: MessageEvent) => void;
+    /**
+     * { command : [remaining iframes] }
+     * + order of commands
+     **/
+    pollingQueue: Record<string, any>;
+    private readonly addCommand;
+    bootChildrenFrames: () => Promise<void>;
+    killChildrenFrames: () => void;
     signalIframeTracker: () => void;
     startTimeout: ReturnType<typeof setTimeout> | null;
-    private allowAppStart;
+    allowAppStart(): void;
     private checkNodeId;
     private initWorker;
     private handleWorkerMsg;
@@ -176,9 +205,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 +289,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