@openreplay/tracker 3.5.17-beta.0 → 3.6.1

package/cjs/app/nodes.d.ts

@@ -7,7 +7,7 @@ export default class Nodes {
     constructor(node_id: string);
     attachNodeCallback(nodeCallback: NodeCallback): void;
     attachElementListener(type: string, node: Element, elementListener: EventListener): void;
-    registerNode(node: Node): [id: number, isNew: boolean];
+    registerNode(node: Node): [/*id:*/ number, /*isNew:*/ boolean];
     unregisterNode(node: Node): number | undefined;
     cleanTree(): void;
     callNodeCallbacks(node: Node, isStart: boolean): void;

package/cjs/app/nodes.js

@@ -7,9 +7,11 @@ class Nodes {
         this.nodeCallbacks = [];
         this.elementListeners = new Map();
     }
+    // Attached once per Tracker instance
     attachNodeCallback(nodeCallback) {
         this.nodeCallbacks.push(nodeCallback);
     }
+    // TODO: what is the difference with app.attachEventListener. can we use only one of those?
     attachElementListener(type, node, elementListener) {
         const id = this.getID(node);
         if (id === undefined) {

package/cjs/app/observer/iframe_observer.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const observer_js_1 = require("./observer.js");
-const messages_js_1 = require("../../common/messages.js");
+const messages_gen_js_1 = require("../messages.gen.js");
 class IFrameObserver extends observer_js_1.default {
     observe(iframe) {
         const doc = iframe.contentDocument;
@@ -15,7 +15,7 @@ class IFrameObserver extends observer_js_1.default {
                 console.log('OpenReplay: Iframe document not bound');
                 return;
             }
-            this.app.send((0, messages_js_1.CreateIFrameDocument)(hostID, docID));
+            this.app.send((0, messages_gen_js_1.CreateIFrameDocument)(hostID, docID));
         });
     }
 }

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

@@ -13,9 +13,8 @@ export default abstract class Observer {
     private sendNodeAttribute;
     private sendNodeData;
     private bindNode;
-    private unbindChildNode;
     private bindTree;
-    private unbindNode;
+    private unbindTree;
     private _commitNode;
     private commitNode;
     private commitNodes;

package/cjs/app/observer/observer.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const messages_js_1 = require("../../common/messages.js");
+const messages_gen_js_1 = require("../messages.gen.js");
 const guards_js_1 = require("../guards.js");
 function isIgnored(node) {
     if ((0, guards_js_1.isTextNode)(node)) {
@@ -28,17 +28,11 @@ function isObservable(node) {
     - fix unbinding logic + send all removals first (ensure sequence is correct)
     - use document as a 0-node in the upper context (should be updated in player at first)
 */
-/*
-  Nikita:
-    - rn we only send unbind event for parent (all child nodes will be cut in the live replay anyways)
-      to prevent sending 1k+ unbinds for child nodes and making replay file bigger than it should be
-*/
 var RecentsType;
 (function (RecentsType) {
     RecentsType[RecentsType["New"] = 0] = "New";
     RecentsType[RecentsType["Removed"] = 1] = "Removed";
     RecentsType[RecentsType["Changed"] = 2] = "Changed";
-    RecentsType[RecentsType["RemovedChild"] = 3] = "RemovedChild";
 })(RecentsType || (RecentsType = {}));
 class Observer {
     constructor(app, isTopContext = false) {
@@ -59,7 +53,10 @@ class Observer {
                 }
                 if (type === 'childList') {
                     for (let i = 0; i < mutation.removedNodes.length; i++) {
-                        this.bindTree(mutation.removedNodes[i], true);
+                        // 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]);
+                        }
                     }
                     for (let i = 0; i < mutation.addedNodes.length; i++) {
                         this.bindTree(mutation.addedNodes[i]);
@@ -106,16 +103,16 @@ class Observer {
                 name = name.substr(6);
             }
             if (value === null) {
-                this.app.send(new messages_js_1.RemoveNodeAttribute(id, name));
+                this.app.send((0, messages_gen_js_1.RemoveNodeAttribute)(id, name));
             }
             else if (name === 'href') {
                 if (value.length > 1e5) {
                     value = '';
                 }
-                this.app.send(new messages_js_1.SetNodeAttributeURLBased(id, name, value, this.app.getBaseHref()));
+                this.app.send((0, messages_gen_js_1.SetNodeAttributeURLBased)(id, name, value, this.app.getBaseHref()));
             }
             else {
-                this.app.send(new messages_js_1.SetNodeAttribute(id, name, value));
+                this.app.send((0, messages_gen_js_1.SetNodeAttribute)(id, name, value));
             }
             return;
         }
@@ -135,25 +132,25 @@ class Observer {
             return;
         }
         if (value === null) {
-            this.app.send(new messages_js_1.RemoveNodeAttribute(id, name));
+            this.app.send((0, messages_gen_js_1.RemoveNodeAttribute)(id, name));
             return;
         }
         if (name === 'style' || (name === 'href' && (0, guards_js_1.hasTag)(node, 'LINK'))) {
-            this.app.send(new messages_js_1.SetNodeAttributeURLBased(id, name, value, this.app.getBaseHref()));
+            this.app.send((0, messages_gen_js_1.SetNodeAttributeURLBased)(id, name, value, this.app.getBaseHref()));
             return;
         }
         if (name === 'href' || value.length > 1e5) {
             value = '';
         }
-        this.app.send(new messages_js_1.SetNodeAttribute(id, name, value));
+        this.app.send((0, messages_gen_js_1.SetNodeAttribute)(id, name, value));
     }
     sendNodeData(id, parentElement, data) {
         if ((0, guards_js_1.hasTag)(parentElement, 'STYLE') || (0, guards_js_1.hasTag)(parentElement, 'style')) {
-            this.app.send(new messages_js_1.SetCSSDataURLBased(id, data, this.app.getBaseHref()));
+            this.app.send((0, messages_gen_js_1.SetCSSDataURLBased)(id, data, this.app.getBaseHref()));
             return;
         }
         data = this.app.sanitizer.sanitize(id, data);
-        this.app.send(new messages_js_1.SetNodeData(id, data));
+        this.app.send((0, messages_gen_js_1.SetNodeData)(id, data));
     }
     bindNode(node) {
         const [id, isNew] = this.app.nodes.registerNode(node);
@@ -161,39 +158,42 @@ class Observer {
             this.recents.set(id, RecentsType.New);
         }
         else if (this.recents.get(id) !== RecentsType.New) {
-            // can we do just `else` here?
             this.recents.set(id, RecentsType.Removed);
         }
     }
-    unbindChildNode(node) {
-        const [id] = this.app.nodes.registerNode(node);
-        this.recents.set(id, RecentsType.RemovedChild);
-    }
-    bindTree(node, isChildUnbinding = false) {
+    bindTree(node) {
         if (!isObservable(node)) {
             return;
         }
         this.bindNode(node);
         const walker = document.createTreeWalker(node, NodeFilter.SHOW_ELEMENT + NodeFilter.SHOW_TEXT, {
-            acceptNode: (node) => isIgnored(node) || (this.app.nodes.getID(node) !== undefined && !isChildUnbinding)
+            acceptNode: (node) => isIgnored(node) || this.app.nodes.getID(node) !== undefined
                 ? NodeFilter.FILTER_REJECT
                 : NodeFilter.FILTER_ACCEPT,
         }, 
         // @ts-ignore
         false);
         while (walker.nextNode()) {
-            if (isChildUnbinding) {
-                this.unbindChildNode(walker.currentNode);
-            }
-            else {
-                this.bindNode(walker.currentNode);
-            }
+            this.bindNode(walker.currentNode);
         }
     }
-    unbindNode(node) {
+    unbindTree(node) {
         const id = this.app.nodes.unregisterNode(node);
         if (id !== undefined && this.recents.get(id) === RecentsType.Removed) {
-            this.app.send(new messages_js_1.RemoveNode(id));
+            // Sending RemoveNode only for parent to maintain
+            this.app.send((0, messages_gen_js_1.RemoveNode)(id));
+            // Unregistering all the children in order to clear the memory
+            const walker = document.createTreeWalker(node, 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);
+            while (walker.nextNode()) {
+                this.app.nodes.unregisterNode(walker.currentNode);
+            }
+            // MBTODO: count and send RemovedNodesCount (for the page crash detection in heuristics)
         }
     }
     // A top-consumption function on the infinite lists test. (~1% of performance resources)
@@ -209,17 +209,17 @@ class Observer {
         if (!(0, guards_js_1.hasTag)(node, 'HTML') || !this.isTopContext) {
             if (parent === null) {
                 // Sometimes one observation contains attribute mutations for the removimg node, which gets ignored here.
-                // That shouldn't affect the visual rendering ( should it? )
-                this.unbindNode(node);
+                // That shouldn't affect the visual rendering ( should it? maybe when transition applied? )
+                this.unbindTree(node);
                 return false;
             }
             parentID = this.app.nodes.getID(parent);
             if (parentID === undefined) {
-                this.unbindNode(node);
+                this.unbindTree(node);
                 return false;
             }
             if (!this.commitNode(parentID)) {
-                this.unbindNode(node);
+                this.unbindTree(node);
                 return false;
             }
             this.app.sanitizer.handleNode(id, parentID, node);
@@ -258,7 +258,7 @@ class Observer {
                         el.style.width = width + 'px';
                         el.style.height = height + 'px';
                     }
-                    this.app.send(new messages_js_1.CreateElementNode(id, parentID, index, el.tagName, (0, guards_js_1.isSVGElement)(node)));
+                    this.app.send((0, messages_gen_js_1.CreateElementNode)(id, parentID, index, el.tagName, (0, guards_js_1.isSVGElement)(node)));
                 }
                 for (let i = 0; i < el.attributes.length; i++) {
                     const attr = el.attributes[i];
@@ -267,13 +267,13 @@ class Observer {
             }
             else if ((0, guards_js_1.isTextNode)(node)) {
                 // for text node id != 0, hence parentID !== undefined and parent is Element
-                this.app.send(new messages_js_1.CreateTextNode(id, parentID, index));
+                this.app.send((0, messages_gen_js_1.CreateTextNode)(id, parentID, index));
                 this.sendNodeData(id, parent, node.data);
             }
             return true;
         }
         if (recentsType === RecentsType.Removed && parentID !== undefined) {
-            this.app.send(new messages_js_1.MoveNode(id, parentID, index));
+            this.app.send((0, messages_gen_js_1.MoveNode)(id, parentID, index));
         }
         const attr = this.attributesMap.get(id);
         if (attr !== undefined) {
@@ -314,7 +314,8 @@ class Observer {
         });
         this.clear();
     }
-    // ISSSUE
+    // ISSSUE (nodeToBinde should be the same as node. Look at the comment about 0-node at the beginning of the file.)
+    // TODO: use one observer instance for all iframes/shadowRoots (composition instiad of inheritance)
     observeRoot(node, beforeCommit, nodeToBind = node) {
         this.observer.observe(node, {
             childList: true,

package/cjs/app/observer/shadow_root_observer.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const observer_js_1 = require("./observer.js");
-const messages_js_1 = require("../../common/messages.js");
+const messages_gen_js_1 = require("../messages.gen.js");
 class ShadowRootObserver extends observer_js_1.default {
     observe(el) {
         const shRoot = el.shadowRoot;
@@ -14,7 +14,7 @@ class ShadowRootObserver extends observer_js_1.default {
                 console.log('OpenReplay: Shadow Root was not bound');
                 return;
             }
-            this.app.send((0, messages_js_1.CreateIFrameDocument)(hostID, rootID));
+            this.app.send((0, messages_gen_js_1.CreateIFrameDocument)(hostID, rootID));
         });
     }
 }

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

@@ -3,9 +3,19 @@ import App from '../index.js';
 export interface Options {
     captureIFrames: boolean;
 }
+declare type Context = Window & typeof globalThis;
+declare type ContextCallback = (context: Context) => void;
+declare type Offset = {
+    top: number;
+    left: number;
+};
 export default class TopObserver extends Observer {
     private readonly options;
     constructor(app: App, options: Partial<Options>);
+    private readonly contextCallbacks;
+    private readonly contextsSet;
+    attachContextCallback(cb: ContextCallback): void;
+    getDocumentOffset(doc: Document): Offset;
     private iframeObservers;
     private handleIframe;
     private shadowRootObservers;
@@ -13,3 +23,4 @@ export default class TopObserver extends Observer {
     observe(): void;
     disconnect(): void;
 }
+export {};

package/cjs/app/observer/top_observer.js

@@ -4,12 +4,19 @@ const observer_js_1 = require("./observer.js");
 const guards_js_1 = require("../guards.js");
 const iframe_observer_js_1 = require("./iframe_observer.js");
 const shadow_root_observer_js_1 = require("./shadow_root_observer.js");
-const messages_js_1 = require("../../common/messages.js");
+const messages_gen_js_1 = require("../messages.gen.js");
 const utils_js_1 = require("../../utils.js");
+function isPatchedDocument(doc) {
+    // @ts-ignore
+    return typeof doc.__openreplay__getOffset === 'function';
+}
 const attachShadowNativeFn = utils_js_1.IN_BROWSER ? Element.prototype.attachShadow : () => new ShadowRoot();
 class TopObserver extends observer_js_1.default {
     constructor(app, options) {
         super(app, true);
+        this.contextCallbacks = [];
+        // Attached once per Tracker instance
+        this.contextsSet = new Set();
         this.iframeObservers = [];
         this.shadowRootObservers = [];
         this.options = Object.assign({
@@ -30,23 +37,50 @@ class TopObserver extends observer_js_1.default {
             }
         });
     }
+    attachContextCallback(cb) {
+        this.contextCallbacks.push(cb);
+    }
+    // Le truc
+    getDocumentOffset(doc) {
+        if (isPatchedDocument(doc)) {
+            return doc.__openreplay__getOffset();
+        }
+        return { top: 0, left: 0 };
+    }
     handleIframe(iframe) {
         let doc = null;
+        let win = null;
         const handle = this.app.safe(() => {
             const id = this.app.nodes.getID(iframe);
             if (id === undefined) {
+                //log
                 return;
-            } //log
-            if (iframe.contentDocument === doc) {
-                return;
-            } // How frequently can it happen?
-            doc = iframe.contentDocument;
-            if (!doc || !iframe.contentWindow) {
-                return;
             }
-            const observer = new iframe_observer_js_1.default(this.app);
-            this.iframeObservers.push(observer);
-            observer.observe(iframe);
+            const currentWin = iframe.contentWindow;
+            const currentDoc = iframe.contentDocument;
+            if (currentDoc && currentDoc !== doc) {
+                const observer = new iframe_observer_js_1.default(this.app);
+                this.iframeObservers.push(observer);
+                observer.observe(iframe);
+                doc = currentDoc;
+                doc.__openreplay__getOffset = () => {
+                    const { top, left } = this.getDocumentOffset(iframe.ownerDocument);
+                    return {
+                        top: iframe.offsetTop + top,
+                        left: iframe.offsetLeft + left,
+                    };
+                };
+            }
+            if (currentWin &&
+                // Sometimes currentWin.window is null (not in specification). Such window object is not functional
+                currentWin === currentWin.window &&
+                !this.contextsSet.has(currentWin) // for each context callbacks called once per Tracker (TopObserver) instance
+            ) {
+                this.contextsSet.add(currentWin);
+                //@ts-ignore https://github.com/microsoft/TypeScript/issues/41684
+                this.contextCallbacks.forEach((cb) => cb(currentWin));
+                win = currentWin;
+            }
         });
         iframe.addEventListener('load', handle); // why app.attachEventListener not working?
         handle();
@@ -72,7 +106,7 @@ class TopObserver extends observer_js_1.default {
         //   the 0-node ("fRoot") will become #document rather than documentElement as it is now.
         // Alternatively - observe(#document) then bindNode(documentElement)
         this.observeRoot(window.document, () => {
-            this.app.send(new messages_js_1.CreateDocument());
+            this.app.send((0, messages_gen_js_1.CreateDocument)());
         }, window.document.documentElement);
     }
     disconnect() {

package/cjs/app/session.d.ts

@@ -1,19 +1,37 @@
+import type App from './index.js';
 interface SessionInfo {
-    sessionID: string | null;
+    sessionID: string | undefined;
     metadata: Record<string, string>;
     userID: string | null;
+    timestamp: number;
+    projectID?: string;
 }
 declare type OnUpdateCallback = (i: Partial<SessionInfo>) => void;
+export declare type Options = {
+    session_token_key: string;
+    session_pageno_key: string;
+};
 export default class Session {
+    private readonly app;
+    private readonly options;
     private metadata;
     private userID;
     private sessionID;
     private readonly callbacks;
+    private timestamp;
+    private projectID;
+    constructor(app: App, options: Options);
     attachUpdateCallback(cb: OnUpdateCallback): void;
     private handleUpdate;
     update(newInfo: Partial<SessionInfo>): void;
     setMetadata(key: string, value: string): void;
     setUserID(userID: string): void;
+    private getPageNumber;
+    incPageNo(): number;
+    getSessionToken(): string | undefined;
+    setSessionToken(token: string): void;
+    applySessionHash(hash: string): void;
+    getSessionHash(): string | undefined;
     getInfo(): SessionInfo;
     reset(): void;
 }

package/cjs/app/session.js

@@ -1,11 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 class Session {
-    constructor() {
+    constructor(app, options) {
+        this.app = app;
+        this.options = options;
         this.metadata = {};
         this.userID = null;
-        this.sessionID = null;
         this.callbacks = [];
+        this.timestamp = 0;
     }
     attachUpdateCallback(cb) {
         this.callbacks.push(cb);
@@ -30,6 +32,12 @@ class Session {
         if (newInfo.sessionID !== undefined) {
             this.sessionID = newInfo.sessionID;
         }
+        if (newInfo.timestamp !== undefined) {
+            this.timestamp = newInfo.timestamp;
+        }
+        if (newInfo.projectID !== undefined) {
+            this.projectID = newInfo.projectID;
+        }
         this.handleUpdate(newInfo);
     }
     setMetadata(key, value) {
@@ -40,17 +48,67 @@ class Session {
         this.userID = userID;
         this.handleUpdate({ userID });
     }
+    getPageNumber() {
+        const pageNoStr = this.app.sessionStorage.getItem(this.options.session_pageno_key);
+        if (pageNoStr == null) {
+            return undefined;
+        }
+        return parseInt(pageNoStr);
+    }
+    incPageNo() {
+        let pageNo = this.getPageNumber();
+        if (pageNo === undefined) {
+            pageNo = 0;
+        }
+        else {
+            pageNo++;
+        }
+        this.app.sessionStorage.setItem(this.options.session_pageno_key, pageNo.toString());
+        return pageNo;
+    }
+    getSessionToken() {
+        return this.app.sessionStorage.getItem(this.options.session_token_key) || undefined;
+    }
+    setSessionToken(token) {
+        this.app.sessionStorage.setItem(this.options.session_token_key, token);
+    }
+    applySessionHash(hash) {
+        const hashParts = decodeURI(hash).split('&');
+        let token = hash;
+        let pageNoStr = '100500'; // back-compat for sessionToken
+        if (hashParts.length == 2) {
+            ;
+            [token, pageNoStr] = hashParts;
+        }
+        if (!pageNoStr || !token) {
+            return;
+        }
+        this.app.sessionStorage.setItem(this.options.session_token_key, token);
+        this.app.sessionStorage.setItem(this.options.session_pageno_key, pageNoStr);
+    }
+    getSessionHash() {
+        const pageNo = this.getPageNumber();
+        const token = this.getSessionToken();
+        if (pageNo === undefined || token === undefined) {
+            return;
+        }
+        return encodeURI(String(pageNo) + '&' + token);
+    }
     getInfo() {
         return {
             sessionID: this.sessionID,
             metadata: this.metadata,
             userID: this.userID,
+            timestamp: this.timestamp,
+            projectID: this.projectID,
         };
     }
     reset() {
+        this.app.sessionStorage.removeItem(this.options.session_token_key);
         this.metadata = {};
         this.userID = null;
-        this.sessionID = null;
+        this.sessionID = undefined;
+        this.timestamp = 0;
     }
 }
 exports.default = Session;

package/cjs/common/{webworker.d.ts → interaction.d.ts}

@@ -1,3 +1,4 @@
+import Message from './messages.gen.js';
 export interface Options {
     connAttemptCount?: number;
     connAttemptGap?: number;
@@ -7,13 +8,12 @@ declare type Start = {
     ingestPoint: string;
     pageNo: number;
     timestamp: number;
+    url: string;
 } & Options;
 declare type Auth = {
     type: 'auth';
     token: string;
     beaconSizeLimit?: number;
 };
-export declare type WorkerMessageData = null | 'stop' | Start | Auth | Array<{
-    _id: number;
-}>;
+export declare type WorkerMessageData = null | 'stop' | Start | Auth | Array<Message>;
 export {};