npm - @openreplay/tracker - Versions diffs - 3.4.13 → 3.4.14 - Mend

@openreplay/tracker 3.4.13 → 3.4.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (23) hide show

package/cjs/app/index.d.ts +2 -2
package/cjs/app/index.js +3 -3
package/cjs/app/observer/iframe_observer.d.ts +4 -0
package/cjs/app/observer/iframe_observer.js +22 -0
package/cjs/app/{observer.d.ts → observer/observer.d.ts} +17 -14
package/cjs/app/{observer.js → observer/observer.js} +128 -142
package/cjs/app/observer/shadow_root_observer.d.ts +4 -0
package/cjs/app/observer/shadow_root_observer.js +21 -0
package/cjs/app/observer/top_observer.d.ts +15 -0
package/cjs/app/observer/top_observer.js +86 -0
package/cjs/index.js +1 -1
package/lib/app/index.d.ts +2 -2
package/lib/app/index.js +2 -2
package/lib/app/observer/iframe_observer.d.ts +4 -0
package/lib/app/observer/iframe_observer.js +19 -0
package/lib/app/{observer.d.ts → observer/observer.d.ts} +17 -14
package/lib/app/{observer.js → observer/observer.js} +126 -142
package/lib/app/observer/shadow_root_observer.d.ts +4 -0
package/lib/app/observer/shadow_root_observer.js +18 -0
package/lib/app/observer/top_observer.d.ts +15 -0
package/lib/app/observer/top_observer.js +83 -0
package/lib/index.js +1 -1
package/package.json +1 -1

package/cjs/index.js CHANGED Viewed

@@ -115,7 +115,7 @@ class API {
             // no-cors issue only with text/plain or not-set Content-Type
             // req.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
             req.send(JSON.stringify({
-                trackerVersion: '3.4.13',
+                trackerVersion: '3.4.14',
                 projectKey: options.projectKey,
                 doNotTrack,
                 // TODO: add precise reason (an exact API missing)

package/lib/app/index.d.ts CHANGED Viewed

@@ -1,8 +1,8 @@
 import Message from "../messages/message.js";
 import Nodes from "./nodes.js";
-import Observer from "./observer.js";
+import Observer from "./observer/top_observer.js";
 import Ticker from "./ticker.js";
-import type { Options as ObserverOptions } from "./observer.js";
+import type { Options as ObserverOptions } from "./observer/top_observer.js";
 import type { Options as WebworkerOptions } from "../messages/webworker.js";
 export interface OnStartInfo {
     sessionID: string;

package/lib/app/index.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { timestamp, log, warn } from "../utils.js";
 import { Timestamp } from "../messages/index.js";
 import Nodes from "./nodes.js";
-import Observer from "./observer.js";
+import Observer from "./observer/top_observer.js";
 import Ticker from "./ticker.js";
 import { deviceMemory, jsHeapSizeLimit } from "../modules/performance.js";
 // TODO: use backendHost only
@@ -14,7 +14,7 @@ export default class App {
         this.commitCallbacks = [];
         this._sessionID = null;
         this.isActive = false;
-        this.version = '3.4.13';
+        this.version = '3.4.14';
         this.projectKey = projectKey;
         this.options = Object.assign({
             revID: '',

package/lib/app/observer/iframe_observer.d.ts ADDED Viewed

@@ -0,0 +1,4 @@
+import Observer from "./observer.js";
+export default class IFrameObserver extends Observer {
+    observe(iframe: HTMLIFrameElement): void;
+}

package/lib/app/observer/iframe_observer.js ADDED Viewed

@@ -0,0 +1,19 @@
+import Observer from "./observer.js";
+import { CreateIFrameDocument } from "../../messages/index.js";
+export default class IFrameObserver extends Observer {
+    observe(iframe) {
+        const doc = iframe.contentDocument;
+        const hostID = this.app.nodes.getID(iframe);
+        if (!doc || hostID === undefined) {
+            return;
+        } //log TODO common app.logger
+        // Have to observe document, because the inner <html> might be changed
+        this.observeRoot(doc, (docID) => {
+            if (docID === undefined) {
+                console.log("OpenReplay: Iframe document not bound");
+                return;
+            }
+            this.app.send(CreateIFrameDocument(hostID, docID));
+        });
+    }
+}

package/lib/app/{observer.d.ts → observer/observer.d.ts} RENAMED Viewed

@@ -1,5 +1,5 @@
-import App from "./index.js";
-interface Window extends WindowProxy {
+import App from "../index.js";
+export interface Window extends globalThis.Window {
     HTMLInputElement: typeof HTMLInputElement;
     HTMLLinkElement: typeof HTMLLinkElement;
     HTMLStyleElement: typeof HTMLStyleElement;
@@ -7,27 +7,33 @@ interface Window extends WindowProxy {
     HTMLIFrameElement: typeof HTMLIFrameElement;
     Text: typeof Text;
     Element: typeof Element;
+    ShadowRoot: typeof ShadowRoot;
 }
+declare type WindowConstructor = Document | Element | Text | ShadowRoot | HTMLInputElement | HTMLLinkElement | HTMLStyleElement | HTMLIFrameElement;
+declare type Constructor<T> = {
+    new (...args: any[]): T;
+    name: string;
+};
+export declare function isInstance<T extends WindowConstructor>(node: Node, constr: Constructor<T>): node is T;
 export interface Options {
     obscureTextEmails: boolean;
     obscureTextNumbers: boolean;
-    captureIFrames: boolean;
 }
-export default class Observer {
-    private readonly app;
-    private readonly options;
-    private readonly context;
+export default abstract class Observer<AdditionalOptions = {}> {
+    protected readonly app: App;
+    protected readonly context: Window;
     private readonly observer;
     private readonly commited;
     private readonly recents;
+    private readonly myNodes;
     private readonly indexes;
     private readonly attributesList;
     private readonly textSet;
     private readonly textMasked;
-    constructor(app: App, options: Options, context?: Window);
+    protected readonly options: Options & AdditionalOptions;
+    private readonly inUpperContext;
+    constructor(app: App, options: Partial<Options> & AdditionalOptions, context?: Window);
     private clear;
-    private isInstance;
-    private isIgnored;
     private sendNodeAttribute;
     getInnerTextSecure(el: HTMLElement): string;
     private checkObscure;
@@ -38,10 +44,7 @@ export default class Observer {
     private _commitNode;
     private commitNode;
     private commitNodes;
-    private iframeObservers;
-    private handleIframe;
-    private observeIframe;
-    observe(): void;
+    protected observeRoot(node: Node, beforeCommit: (id?: number) => unknown, nodeToBind?: Node): void;
     disconnect(): void;
 }
 export {};

package/lib/app/{observer.js → observer/observer.js} RENAMED Viewed

@@ -1,40 +1,96 @@
-import { stars, hasOpenreplayAttribute } from "../utils.js";
-import { CreateDocument, CreateElementNode, CreateTextNode, SetNodeData, SetCSSDataURLBased, SetNodeAttribute, SetNodeAttributeURLBased, RemoveNodeAttribute, MoveNode, RemoveNode, CreateIFrameDocument, } from "../messages/index.js";
+import { stars, hasOpenreplayAttribute } from "../../utils.js";
+import { RemoveNodeAttribute, SetNodeAttribute, SetNodeAttributeURLBased, SetCSSDataURLBased, SetNodeData, CreateTextNode, CreateElementNode, MoveNode, RemoveNode, } from "../../messages/index.js";
 function isSVGElement(node) {
     return node.namespaceURI === 'http://www.w3.org/2000/svg';
 }
+// TODO: we need a type expert here so we won't have to ignore the lines
+// TODO: use it everywhere (static function; export from which file? <-- global Window typing required)
+export function isInstance(node, constr) {
+    const doc = node.ownerDocument;
+    if (!doc) { // null if Document
+        return constr.name === 'Document';
+    }
+    let context =
+    // @ts-ignore (for EI, Safary)
+    doc.parentWindow ||
+        doc.defaultView; // TODO: smart global typing for Window object
+    while (context.parent && context.parent !== context) {
+        // @ts-ignore
+        if (node instanceof context[constr.name]) {
+            return true;
+        }
+        // @ts-ignore
+        context = context.parent;
+    }
+    // @ts-ignore
+    return node instanceof context[constr.name];
+}
+function isIgnored(node) {
+    if (isInstance(node, Text)) {
+        return false;
+    }
+    if (!isInstance(node, Element)) {
+        return true;
+    }
+    const tag = node.tagName.toUpperCase();
+    if (tag === 'LINK') {
+        const rel = node.getAttribute('rel');
+        const as = node.getAttribute('as');
+        return !((rel === null || rel === void 0 ? void 0 : rel.includes('stylesheet')) || as === "style" || as === "font");
+    }
+    return (tag === 'SCRIPT' ||
+        tag === 'NOSCRIPT' ||
+        tag === 'META' ||
+        tag === 'TITLE' ||
+        tag === 'BASE');
+}
+function isRootNode(node) {
+    return isInstance(node, Document) || isInstance(node, ShadowRoot);
+}
+function isObservable(node) {
+    if (isRootNode(node)) {
+        return true;
+    }
+    return !isIgnored(node);
+}
 export default class Observer {
     constructor(app, options, context = window) {
         this.app = app;
-        this.options = options;
         this.context = context;
-        this.iframeObservers = [];
+        this.commited = [];
+        this.recents = [];
+        this.myNodes = [];
+        this.indexes = [];
+        this.attributesList = [];
+        this.textSet = new Set();
+        this.textMasked = new Set();
+        this.options = Object.assign({
+            obscureTextEmails: true,
+            obscureTextNumbers: false,
+        }, options);
+        this.inUpperContext = context.parent === context;
         this.observer = new MutationObserver(this.app.safe((mutations) => {
-            var _a;
             for (const mutation of mutations) {
                 const target = mutation.target;
                 const type = mutation.type;
+                // TODO TODO TODO: move to iframe_observer/remove??? (check if )
                 // Special case
-                // Document 'childList' might happen in case of iframe.
+                // 'childList' on Document might happen in case of iframe.
                 // TODO: generalize as much as possible
-                if (this.isInstance(target, Document)
-                    && type === 'childList'
-                //&& new Array(mutation.addedNodes).some(node => this.isInstance(node, HTMLHtmlElement))
-                ) {
-                    const parentFrame = (_a = target.defaultView) === null || _a === void 0 ? void 0 : _a.frameElement;
-                    if (!parentFrame) {
-                        continue;
-                    }
-                    this.bindTree(target.documentElement);
-                    const frameID = this.app.nodes.getID(parentFrame);
-                    const docID = this.app.nodes.getID(target.documentElement);
-                    if (frameID === undefined || docID === undefined) {
-                        continue;
-                    }
-                    this.app.send(CreateIFrameDocument(frameID, docID));
-                    continue;
-                }
-                if (this.isIgnored(target) || !context.document.contains(target)) {
+                // if (isInstance(target, Document) // Also ShadowRoot can be here
+                //     && type === 'childList'
+                //     //&& new Array(mutation.addedNodes).some(node => isInstance(node, HTMLHtmlElement))
+                // ) {
+                //   const parentFrame = target.defaultView?.frameElement
+                //   if (!parentFrame) { continue }
+                //   this.bindTree(target.documentElement)
+                //   const frameID = this.app.nodes.getID(parentFrame)
+                //   const docID = this.app.nodes.getID(target.documentElement)
+                //   if (frameID === undefined || docID === undefined) { continue }
+                //   this.app.send(CreateIFrameDocument(frameID, docID));
+                //   continue;
+                // }
+                if (!isObservable(target) || !context.document.contains(target)) {
                     continue;
                 }
                 if (type === 'childList') {
@@ -50,7 +106,7 @@ export default class Observer {
                 if (id === undefined) {
                     continue;
                 }
-                if (id >= this.recents.length) {
+                if (id >= this.recents.length) { // TODO: something more convinient
                     this.recents[id] = undefined;
                 }
                 if (type === 'attributes') {
@@ -72,12 +128,6 @@ export default class Observer {
             }
             this.commitNodes();
         }));
-        this.commited = [];
-        this.recents = [];
-        this.indexes = [0];
-        this.attributesList = [];
-        this.textSet = new Set();
-        this.textMasked = new Set();
     }
     clear() {
         this.commited.length = 0;
@@ -85,40 +135,7 @@ export default class Observer {
         this.indexes.length = 1;
         this.attributesList.length = 0;
         this.textSet.clear();
-        this.textMasked.clear();
-    }
-    // TODO: we need a type expert here so we won't have to ignore the lines
-    isInstance(node, constr) {
-        let context = this.context;
-        while (context.parent && context.parent !== context) {
-            // @ts-ignore
-            if (node instanceof context[constr.name]) {
-                return true;
-            }
-            // @ts-ignore
-            context = context.parent;
-        }
-        // @ts-ignore
-        return node instanceof context[constr.name];
-    }
-    isIgnored(node) {
-        if (this.isInstance(node, Text)) {
-            return false;
-        }
-        if (!this.isInstance(node, Element)) {
-            return true;
-        }
-        const tag = node.tagName.toUpperCase();
-        if (tag === 'LINK') {
-            const rel = node.getAttribute('rel');
-            const as = node.getAttribute('as');
-            return !((rel === null || rel === void 0 ? void 0 : rel.includes('stylesheet')) || as === "style" || as === "font");
-        }
-        return (tag === 'SCRIPT' ||
-            tag === 'NOSCRIPT' ||
-            tag === 'META' ||
-            tag === 'TITLE' ||
-            tag === 'BASE');
+        //this.textMasked.clear();
     }
     sendNodeAttribute(id, node, name, value) {
         if (isSVGElement(node)) {
@@ -148,7 +165,7 @@ export default class Observer {
             return;
         }
         if (name === 'value' &&
-            this.isInstance(node, HTMLInputElement) &&
+            isInstance(node, HTMLInputElement) &&
             node.type !== 'button' &&
             node.type !== 'reset' &&
             node.type !== 'submit') {
@@ -158,7 +175,7 @@ export default class Observer {
             this.app.send(new RemoveNodeAttribute(id, name));
             return;
         }
-        if (name === 'style' || name === 'href' && this.isInstance(node, HTMLLinkElement)) {
+        if (name === 'style' || name === 'href' && isInstance(node, HTMLLinkElement)) {
             this.app.send(new SetNodeAttributeURLBased(id, name, value, this.app.getBaseHref()));
             return;
         }
@@ -188,7 +205,7 @@ export default class Observer {
         return data;
     }
     sendNodeData(id, parentElement, data) {
-        if (this.isInstance(parentElement, HTMLStyleElement) || this.isInstance(parentElement, SVGStyleElement)) {
+        if (isInstance(parentElement, HTMLStyleElement) || isInstance(parentElement, SVGStyleElement)) {
             this.app.send(new SetCSSDataURLBased(id, data, this.app.getBaseHref()));
             return;
         }
@@ -200,14 +217,15 @@ export default class Observer {
         const r = this.app.nodes.registerNode(node);
         const id = r[0];
         this.recents[id] = r[1] || this.recents[id] || false;
+        this.myNodes[id] = true;
     }
     bindTree(node) {
-        if (this.isIgnored(node)) {
+        if (!isObservable(node)) {
             return;
         }
         this.bindNode(node);
         const walker = document.createTreeWalker(node, NodeFilter.SHOW_ELEMENT + NodeFilter.SHOW_TEXT, {
-            acceptNode: (node) => this.isIgnored(node) || this.app.nodes.getID(node) !== undefined
+            acceptNode: (node) => isIgnored(node) || this.app.nodes.getID(node) !== undefined
                 ? NodeFilter.FILTER_REJECT
                 : NodeFilter.FILTER_ACCEPT,
         },
@@ -224,12 +242,15 @@ export default class Observer {
         }
     }
     _commitNode(id, node) {
+        if (isRootNode(node)) {
+            return true;
+        }
         const parent = node.parentNode;
         let parentID;
-        if (this.isInstance(node, HTMLHtmlElement)) {
-            this.indexes[id] = 0;
-        }
-        else {
+        // Disable parent check for the upper context HTMLHtmlElement, because it is root there... (before)
+        // TODO: get rid of "special" cases (there is an issue with CreateDocument altered behaviour though)
+        // TODO: Clean the logic (though now it workd fine)
+        if (!isInstance(node, HTMLHtmlElement) || !this.inUpperContext) {
             if (parent === null) {
                 this.unbindNode(node);
                 return false;
@@ -244,22 +265,22 @@ export default class Observer {
                 return false;
             }
             if (this.textMasked.has(parentID) ||
-                (this.isInstance(node, Element) && hasOpenreplayAttribute(node, 'masked'))) {
+                (isInstance(node, Element) && hasOpenreplayAttribute(node, 'masked'))) {
                 this.textMasked.add(id);
             }
-            let sibling = node.previousSibling;
-            while (sibling !== null) {
-                const siblingID = this.app.nodes.getID(sibling);
-                if (siblingID !== undefined) {
-                    this.commitNode(siblingID);
-                    this.indexes[id] = this.indexes[siblingID] + 1;
-                    break;
-                }
-                sibling = sibling.previousSibling;
-            }
-            if (sibling === null) {
-                this.indexes[id] = 0;
+        }
+        let sibling = node.previousSibling;
+        while (sibling !== null) {
+            const siblingID = this.app.nodes.getID(sibling);
+            if (siblingID !== undefined) {
+                this.commitNode(siblingID);
+                this.indexes[id] = this.indexes[siblingID] + 1;
+                break;
             }
+            sibling = sibling.previousSibling;
+        }
+        if (sibling === null) {
+            this.indexes[id] = 0; //
         }
         const isNew = this.recents[id];
         const index = this.indexes[id];
@@ -267,7 +288,7 @@ export default class Observer {
             throw 'commitNode: missing node index';
         }
         if (isNew === true) {
-            if (this.isInstance(node, Element)) {
+            if (isInstance(node, Element)) {
                 if (parentID !== undefined) {
                     this.app.send(new CreateElementNode(id, parentID, index, node.tagName, isSVGElement(node)));
                 }
@@ -275,12 +296,8 @@ export default class Observer {
                     const attr = node.attributes[i];
                     this.sendNodeAttribute(id, node, attr.nodeName, attr.value);
                 }
-                if (this.isInstance(node, HTMLIFrameElement) &&
-                    (this.options.captureIFrames || node.getAttribute("data-openreplay-capture"))) {
-                    this.handleIframe(node);
-                }
             }
-            else if (this.isInstance(node, Text)) {
+            else if (isInstance(node, Text)) {
                 // for text node id != 0, hence parentID !== undefined and parent is Element
                 this.app.send(new CreateTextNode(id, parentID, index));
                 this.sendNodeData(id, parent, node.data);
@@ -292,7 +309,7 @@ export default class Observer {
         }
         const attr = this.attributesList[id];
         if (attr !== undefined) {
-            if (!this.isInstance(node, Element)) {
+            if (!isInstance(node, Element)) {
                 throw 'commitNode: node is not an element';
             }
             for (const name of attr) {
@@ -300,7 +317,7 @@ export default class Observer {
             }
         }
         if (this.textSet.has(id)) {
-            if (!this.isInstance(node, Text)) {
+            if (!isInstance(node, Text)) {
                 throw 'commitNode: node is not a text';
             }
             // for text node id != 0, hence parent is Element
@@ -322,6 +339,12 @@ export default class Observer {
     commitNodes() {
         let node;
         for (let id = 0; id < this.recents.length; id++) {
+            // TODO: make things/logic nice here.
+            // commit required in any case if recents[id] true or false (in case of unbinding).
+            // ???!?!?R@TW:$HKJ$WLKn
+            if (!this.myNodes[id]) {
+                continue;
+            }
             this.commitNode(id);
             if (this.recents[id] === true && (node = this.app.nodes.getNode(id))) {
                 this.app.nodes.callNodeCallbacks(node);
@@ -329,31 +352,9 @@ export default class Observer {
         }
         this.clear();
     }
-    handleIframe(iframe) {
-        let context = null;
-        const handle = this.app.safe(() => {
-            const id = this.app.nodes.getID(iframe);
-            if (id === undefined) {
-                return;
-            }
-            if (iframe.contentWindow === context) {
-                return;
-            }
-            context = iframe.contentWindow;
-            if (!context) {
-                return;
-            }
-            const observer = new Observer(this.app, this.options, context);
-            this.iframeObservers.push(observer);
-            observer.observeIframe(id, context);
-        });
-        this.app.attachEventListener(iframe, "load", handle);
-        handle();
-    }
-    // TODO: abstract common functionality, separate FrameObserver
-    observeIframe(id, context) {
-        const doc = context.document;
-        this.observer.observe(doc, {
+    // ISSSUE
+    observeRoot(node, beforeCommit, nodeToBind = node) {
+        this.observer.observe(node, {
             childList: true,
             attributes: true,
             characterData: true,
@@ -361,32 +362,15 @@ export default class Observer {
             attributeOldValue: false,
             characterDataOldValue: false,
         });
-        this.bindTree(doc.documentElement);
-        const docID = this.app.nodes.getID(doc.documentElement);
-        if (docID === undefined) {
-            console.log("Wrong");
-            return;
-        }
-        this.app.send(CreateIFrameDocument(id, docID));
-        this.commitNodes();
-    }
-    observe() {
-        this.observer.observe(this.context.document, {
-            childList: true,
-            attributes: true,
-            characterData: true,
-            subtree: true,
-            attributeOldValue: false,
-            characterDataOldValue: false,
-        });
-        this.app.send(new CreateDocument());
-        this.bindTree(this.context.document.documentElement);
+        this.bindTree(nodeToBind);
+        beforeCommit(this.app.nodes.getID(node));
         this.commitNodes();
     }
     disconnect() {
-        this.iframeObservers.forEach(o => o.disconnect());
-        this.iframeObservers = [];
         this.observer.disconnect();
         this.clear();
+        // to sanitizer
+        this.textMasked.clear();
+        this.myNodes.length = 0;
     }
 }

package/lib/app/observer/shadow_root_observer.d.ts ADDED Viewed

@@ -0,0 +1,4 @@
+import Observer from "./observer.js";
+export default class ShadowRootObserver extends Observer {
+    observe(el: Element): void;
+}

package/lib/app/observer/shadow_root_observer.js ADDED Viewed

@@ -0,0 +1,18 @@
+import Observer from "./observer.js";
+import { CreateIFrameDocument } from "../../messages/index.js";
+export default class ShadowRootObserver extends Observer {
+    observe(el) {
+        const shRoot = el.shadowRoot;
+        const hostID = this.app.nodes.getID(el);
+        if (!shRoot || hostID === undefined) {
+            return;
+        } // log
+        this.observeRoot(shRoot, (rootID) => {
+            if (rootID === undefined) {
+                console.log("OpenReplay: Shadow Root was not bound");
+                return;
+            }
+            this.app.send(CreateIFrameDocument(hostID, rootID));
+        });
+    }
+}

package/lib/app/observer/top_observer.d.ts ADDED Viewed

@@ -0,0 +1,15 @@
+import Observer from "./observer.js";
+import type { Options as BaseOptions } from "./observer.js";
+import App from "../index.js";
+export interface Options extends Partial<BaseOptions> {
+    captureIFrames: boolean;
+}
+export default class TopObserver extends Observer<Options> {
+    constructor(app: App, options: Partial<Options>);
+    private iframeObservers;
+    private handleIframe;
+    private shadowRootObservers;
+    private handleShadowRoot;
+    observe(): void;
+    disconnect(): void;
+}

package/lib/app/observer/top_observer.js ADDED Viewed

@@ -0,0 +1,83 @@
+import Observer, { isInstance } from "./observer.js";
+import IFrameObserver from "./iframe_observer.js";
+import ShadowRootObserver from "./shadow_root_observer.js";
+import { CreateDocument } from "../../messages/index.js";
+const attachShadowNativeFn = Element.prototype.attachShadow;
+export default class TopObserver extends Observer {
+    constructor(app, options) {
+        super(app, Object.assign({
+            captureIFrames: false
+        }, options));
+        this.iframeObservers = [];
+        this.shadowRootObservers = [];
+        // IFrames
+        this.app.nodes.attachNodeCallback(node => {
+            if (isInstance(node, HTMLIFrameElement) &&
+                (this.options.captureIFrames || node.getAttribute("data-openreplay-capture"))) {
+                this.handleIframe(node);
+            }
+        });
+        // ShadowDOM
+        this.app.nodes.attachNodeCallback(node => {
+            if (isInstance(node, Element) && node.shadowRoot !== null) {
+                this.handleShadowRoot(node.shadowRoot);
+            }
+        });
+    }
+    handleIframe(iframe) {
+        let context = null;
+        const handle = this.app.safe(() => {
+            const id = this.app.nodes.getID(iframe);
+            if (id === undefined) {
+                return;
+            } //log
+            if (iframe.contentWindow === context) {
+                return;
+            } //Does this happen frequently?
+            context = iframe.contentWindow;
+            if (!context) {
+                return;
+            }
+            const observer = new IFrameObserver(this.app, this.options, context);
+            // @ts-ignore
+            observer.commited = this.commited;
+            // @ts-ignore
+            //observers.recents = this.recents
+            this.iframeObservers.push(observer);
+            observer.observe(iframe);
+        });
+        this.app.attachEventListener(iframe, "load", handle);
+        handle();
+    }
+    handleShadowRoot(shRoot) {
+        const observer = new ShadowRootObserver(this.app, this.options, this.context);
+        this.shadowRootObservers.push(observer);
+        observer.observe(shRoot.host);
+    }
+    observe() {
+        // Protection from several subsequent calls?
+        const observer = this;
+        Element.prototype.attachShadow = function () {
+            const shadow = attachShadowNativeFn.apply(this, arguments);
+            observer.handleShadowRoot(shadow);
+            return shadow;
+        };
+        // Can observe documentElement (<html>) here, because it is not supposed to be changing.
+        // However, it is possible in some exotic cases and may cause an ignorance of the newly created <html>
+        // In this case context.document have to be observed, but this will cause
+        // the change in the re-player behaviour caused by CreateDocument message:
+        //   the 0-node ("fRoot") will become #document rather than documentElement as it is now.
+        // Alternatively - observe(#document) then bindNode(documentElement)
+        this.observeRoot(this.context.document, () => {
+            this.app.send(new CreateDocument());
+        }, this.context.document.documentElement);
+    }
+    disconnect() {
+        Element.prototype.attachShadow = attachShadowNativeFn;
+        this.iframeObservers.forEach(o => o.disconnect());
+        this.iframeObservers = [];
+        this.shadowRootObservers.forEach(o => o.disconnect());
+        this.shadowRootObservers = [];
+        super.disconnect();
+    }
+}

package/lib/index.js CHANGED Viewed

@@ -111,7 +111,7 @@ export default class API {
             // no-cors issue only with text/plain or not-set Content-Type
             // req.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
             req.send(JSON.stringify({
-                trackerVersion: '3.4.13',
+                trackerVersion: '3.4.14',
                 projectKey: options.projectKey,
                 doNotTrack,
                 // TODO: add precise reason (an exact API missing)