@openreplay/tracker 5.0.2-beta → 5.0.2

package/lib/app/observer/observer.js

@@ -0,0 +1,337 @@
+import { RemoveNodeAttribute, SetNodeAttribute, SetNodeAttributeURLBased, SetCSSDataURLBased, SetNodeData, CreateTextNode, CreateElementNode, MoveNode, RemoveNode, } from '../messages.gen.js';
+import { isRootNode, isTextNode, isElementNode, isSVGElement, hasTag, isCommentNode, } from '../guards.js';
+function isIgnored(node) {
+    if (isCommentNode(node)) {
+        return true;
+    }
+    if (isTextNode(node)) {
+        return false;
+    }
+    if (!isElementNode(node)) {
+        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 isObservable(node) {
+    if (isRootNode(node)) {
+        return true;
+    }
+    return !isIgnored(node);
+}
+/*
+  TODO:
+    - 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)
+*/
+var RecentsType;
+(function (RecentsType) {
+    RecentsType[RecentsType["New"] = 0] = "New";
+    RecentsType[RecentsType["Removed"] = 1] = "Removed";
+    RecentsType[RecentsType["Changed"] = 2] = "Changed";
+})(RecentsType || (RecentsType = {}));
+export default class Observer {
+    constructor(app, isTopContext = false) {
+        this.app = app;
+        this.isTopContext = isTopContext;
+        this.commited = [];
+        this.recents = new Map();
+        this.indexes = [];
+        this.attributesMap = new Map();
+        this.textSet = new Set();
+        this.observer = new MutationObserver(this.app.safe((mutations) => {
+            for (const mutation of mutations) {
+                // mutations order is sequential
+                const target = mutation.target;
+                const type = mutation.type;
+                if (!isObservable(target)) {
+                    continue;
+                }
+                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]);
+                        }
+                    }
+                    for (let i = 0; i < mutation.addedNodes.length; i++) {
+                        this.bindTree(mutation.addedNodes[i]);
+                    }
+                    continue;
+                }
+                const id = this.app.nodes.getID(target);
+                if (id === undefined) {
+                    continue;
+                }
+                if (!this.recents.has(id)) {
+                    this.recents.set(id, RecentsType.Changed); // TODO only when altered
+                }
+                if (type === 'attributes') {
+                    const name = mutation.attributeName;
+                    if (name === null) {
+                        continue;
+                    }
+                    let attr = this.attributesMap.get(id);
+                    if (attr === undefined) {
+                        this.attributesMap.set(id, (attr = new Set()));
+                    }
+                    attr.add(name);
+                    continue;
+                }
+                if (type === 'characterData') {
+                    this.textSet.add(id);
+                    continue;
+                }
+            }
+            this.commitNodes();
+        }));
+    }
+    clear() {
+        this.commited.length = 0;
+        this.recents.clear();
+        this.indexes.length = 1;
+        this.attributesMap.clear();
+        this.textSet.clear();
+    }
+    sendNodeAttribute(id, node, name, value) {
+        if (isSVGElement(node)) {
+            if (name.substr(0, 6) === 'xlink:') {
+                name = name.substr(6);
+            }
+            if (value === null) {
+                this.app.send(RemoveNodeAttribute(id, name));
+            }
+            else if (name === 'href') {
+                if (value.length > 1e5) {
+                    value = '';
+                }
+                this.app.send(SetNodeAttributeURLBased(id, name, value, this.app.getBaseHref()));
+            }
+            else {
+                this.app.send(SetNodeAttribute(id, name, value));
+            }
+            return;
+        }
+        if (name === 'src' ||
+            name === 'srcset' ||
+            name === 'integrity' ||
+            name === 'crossorigin' ||
+            name === 'autocomplete' ||
+            name.substr(0, 2) === 'on') {
+            return;
+        }
+        if (name === 'value' &&
+            hasTag(node, 'input') &&
+            node.type !== 'button' &&
+            node.type !== 'reset' &&
+            node.type !== 'submit') {
+            return;
+        }
+        if (value === null) {
+            this.app.send(RemoveNodeAttribute(id, name));
+            return;
+        }
+        if (name === 'style' || (name === 'href' && hasTag(node, 'link'))) {
+            this.app.send(SetNodeAttributeURLBased(id, name, value, this.app.getBaseHref()));
+            return;
+        }
+        if (name === 'href' || value.length > 1e5) {
+            value = '';
+        }
+        this.app.send(SetNodeAttribute(id, name, value));
+    }
+    sendNodeData(id, parentElement, data) {
+        if (hasTag(parentElement, 'style')) {
+            this.app.send(SetCSSDataURLBased(id, data, this.app.getBaseHref()));
+            return;
+        }
+        data = this.app.sanitizer.sanitize(id, data);
+        this.app.send(SetNodeData(id, data));
+    }
+    bindNode(node) {
+        const [id, isNew] = this.app.nodes.registerNode(node);
+        if (isNew) {
+            this.recents.set(id, RecentsType.New);
+        }
+        else if (this.recents.get(id) !== RecentsType.New) {
+            this.recents.set(id, RecentsType.Removed);
+        }
+    }
+    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
+                ? NodeFilter.FILTER_REJECT
+                : NodeFilter.FILTER_ACCEPT,
+        }, 
+        // @ts-ignore
+        false);
+        while (walker.nextNode()) {
+            this.bindNode(walker.currentNode);
+        }
+    }
+    unbindTree(node) {
+        const id = this.app.nodes.unregisterNode(node);
+        if (id !== undefined && this.recents.get(id) === RecentsType.Removed) {
+            // Sending RemoveNode only for parent to maintain
+            this.app.send(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)
+    _commitNode(id, node) {
+        if (isRootNode(node)) {
+            return true;
+        }
+        const parent = node.parentNode;
+        let parentID;
+        // 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 (!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? maybe when transition applied? )
+                this.unbindTree(node);
+                return false;
+            }
+            parentID = this.app.nodes.getID(parent);
+            if (parentID === undefined) {
+                this.unbindTree(node);
+                return false;
+            }
+            if (!this.commitNode(parentID)) {
+                this.unbindTree(node);
+                return false;
+            }
+            this.app.sanitizer.handleNode(id, parentID, node);
+            if (this.app.sanitizer.isHidden(parentID)) {
+                return false;
+            }
+        }
+        // From here parentID === undefined if node is top context HTML node
+        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 recentsType = this.recents.get(id);
+        const isNew = recentsType === RecentsType.New;
+        const index = this.indexes[id];
+        if (index === undefined) {
+            throw 'commitNode: missing node index';
+        }
+        if (isNew) {
+            if (isElementNode(node)) {
+                let el = node;
+                if (parentID !== undefined) {
+                    if (this.app.sanitizer.isHidden(id)) {
+                        const width = el.clientWidth;
+                        const height = el.clientHeight;
+                        el = node.cloneNode();
+                        el.style.width = `${width}px`;
+                        el.style.height = `${height}px`;
+                    }
+                    this.app.send(CreateElementNode(id, parentID, index, el.tagName, isSVGElement(node)));
+                }
+                for (let i = 0; i < el.attributes.length; i++) {
+                    const attr = el.attributes[i];
+                    this.sendNodeAttribute(id, el, attr.nodeName, attr.value);
+                }
+            }
+            else if (isTextNode(node)) {
+                // for text node id != 0, hence parentID !== undefined and parent is Element
+                this.app.send(CreateTextNode(id, parentID, index));
+                this.sendNodeData(id, parent, node.data);
+            }
+            return true;
+        }
+        if (recentsType === RecentsType.Removed && parentID !== undefined) {
+            this.app.send(MoveNode(id, parentID, index));
+        }
+        const attr = this.attributesMap.get(id);
+        if (attr !== undefined) {
+            if (!isElementNode(node)) {
+                throw 'commitNode: node is not an element';
+            }
+            for (const name of attr) {
+                this.sendNodeAttribute(id, node, name, node.getAttribute(name));
+            }
+        }
+        if (this.textSet.has(id)) {
+            if (!isTextNode(node)) {
+                throw 'commitNode: node is not a text';
+            }
+            // for text node id != 0, hence parent is Element
+            this.sendNodeData(id, parent, node.data);
+        }
+        return true;
+    }
+    commitNode(id) {
+        const node = this.app.nodes.getNode(id);
+        if (node === undefined) {
+            return false;
+        }
+        const cmt = this.commited[id];
+        if (cmt !== undefined) {
+            return cmt;
+        }
+        return (this.commited[id] = this._commitNode(id, node));
+    }
+    commitNodes(isStart = false) {
+        let node;
+        this.recents.forEach((type, id) => {
+            this.commitNode(id);
+            if (type === RecentsType.New && (node = this.app.nodes.getNode(id))) {
+                this.app.nodes.callNodeCallbacks(node, isStart);
+            }
+        });
+        this.clear();
+    }
+    // ISSSUE (nodeToBinde should be the same as node in all cases. 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,
+            attributes: true,
+            characterData: true,
+            subtree: true,
+            attributeOldValue: false,
+            characterDataOldValue: false,
+        });
+        this.bindTree(nodeToBind);
+        beforeCommit(this.app.nodes.getID(node));
+        this.commitNodes(true);
+    }
+    disconnect() {
+        this.observer.disconnect();
+        this.clear();
+    }
+}

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

@@ -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

@@ -0,0 +1,18 @@
+import Observer from './observer.js';
+import { CreateIFrameDocument } from '../messages.gen.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

@@ -0,0 +1,24 @@
+import Observer from './observer.js';
+import { Offset } from './iframe_offsets.js';
+import App from '../index.js';
+export interface Options {
+    captureIFrames: boolean;
+}
+type Context = Window & typeof globalThis;
+type ContextCallback = (context: Context) => void;
+export default class TopObserver extends Observer {
+    private readonly options;
+    private readonly iframeOffsets;
+    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;
+    private handleShadowRoot;
+    observe(): void;
+    disconnect(): void;
+}
+export {};

package/lib/app/observer/top_observer.js

@@ -0,0 +1,110 @@
+import Observer from './observer.js';
+import { isElementNode, hasTag } from '../guards.js';
+import IFrameObserver from './iframe_observer.js';
+import ShadowRootObserver from './shadow_root_observer.js';
+import IFrameOffsets from './iframe_offsets.js';
+import { CreateDocument } from '../messages.gen.js';
+import { IN_BROWSER, hasOpenreplayAttribute } from '../../utils.js';
+const attachShadowNativeFn = IN_BROWSER ? Element.prototype.attachShadow : () => new ShadowRoot();
+export default class TopObserver extends Observer {
+    constructor(app, options) {
+        super(app, true);
+        this.iframeOffsets = new IFrameOffsets();
+        this.contextCallbacks = [];
+        // Attached once per Tracker instance
+        this.contextsSet = new Set();
+        this.iframeObservers = [];
+        this.shadowRootObservers = [];
+        this.options = Object.assign({
+            captureIFrames: true,
+        }, options);
+        // IFrames
+        this.app.nodes.attachNodeCallback((node) => {
+            if (hasTag(node, 'iframe') &&
+                ((this.options.captureIFrames && !hasOpenreplayAttribute(node, 'obscured')) ||
+                    hasOpenreplayAttribute(node, 'capture'))) {
+                this.handleIframe(node);
+            }
+        });
+        // ShadowDOM
+        this.app.nodes.attachNodeCallback((node) => {
+            if (isElementNode(node) && node.shadowRoot !== null) {
+                this.handleShadowRoot(node.shadowRoot);
+            }
+        });
+    }
+    attachContextCallback(cb) {
+        this.contextCallbacks.push(cb);
+    }
+    getDocumentOffset(doc) {
+        return this.iframeOffsets.getDocumentOffset(doc);
+    }
+    handleIframe(iframe) {
+        let doc = null;
+        // setTimeout is required. Otherwise some event listeners (scroll, mousemove) applied in modules
+        //     do not work on the iframe document when it 've been loaded dynamically ((why?))
+        const handle = this.app.safe(() => setTimeout(() => {
+            const id = this.app.nodes.getID(iframe);
+            if (id === undefined) {
+                //log
+                return;
+            }
+            const currentWin = iframe.contentWindow;
+            const currentDoc = iframe.contentDocument;
+            if (currentDoc && currentDoc !== doc) {
+                const observer = new IFrameObserver(this.app);
+                this.iframeObservers.push(observer);
+                observer.observe(iframe); // TODO: call unregisterNode for the previous doc if present (incapsulate: one iframe - one observer)
+                doc = currentDoc;
+                this.iframeOffsets.observe(iframe);
+            }
+            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
+            //TODO: more explicit logic
+            ) {
+                this.contextsSet.add(currentWin);
+                //@ts-ignore https://github.com/microsoft/TypeScript/issues/41684
+                this.contextCallbacks.forEach((cb) => cb(currentWin));
+            }
+        }, 0));
+        iframe.addEventListener('load', handle); // why app.attachEventListener not working?
+        handle();
+    }
+    handleShadowRoot(shRoot) {
+        const observer = new ShadowRootObserver(this.app);
+        this.shadowRootObservers.push(observer);
+        observer.observe(shRoot.host);
+    }
+    observe() {
+        // Protection from several subsequent calls?
+        const observer = this;
+        Element.prototype.attachShadow = function () {
+            // eslint-disable-next-line
+            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(window.document, () => {
+            this.app.send(CreateDocument());
+            // it has no node_id here
+            this.app.nodes.callNodeCallbacks(document, true);
+        }, window.document.documentElement);
+    }
+    disconnect() {
+        this.iframeOffsets.clear();
+        Element.prototype.attachShadow = attachShadowNativeFn;
+        this.iframeObservers.forEach((o) => o.disconnect());
+        this.iframeObservers = [];
+        this.shadowRootObservers.forEach((o) => o.disconnect());
+        this.shadowRootObservers = [];
+        super.disconnect();
+    }
+}

package/lib/app/sanitizer.d.ts

@@ -0,0 +1,24 @@
+import type App from './index.js';
+export declare enum SanitizeLevel {
+    Plain = 0,
+    Obscured = 1,
+    Hidden = 2
+}
+export interface Options {
+    obscureTextEmails: boolean;
+    obscureTextNumbers: boolean;
+    domSanitizer?: (node: Element) => SanitizeLevel;
+}
+export default class Sanitizer {
+    private readonly app;
+    private readonly obscured;
+    private readonly hidden;
+    private readonly options;
+    constructor(app: App, options: Partial<Options>);
+    handleNode(id: number, parentID: number, node: Node): void;
+    sanitize(id: number, data: string): string;
+    isObscured(id: number): boolean;
+    isHidden(id: number): boolean;
+    getInnerTextSecure(el: HTMLElement): string;
+    clear(): void;
+}

package/lib/app/sanitizer.js

@@ -0,0 +1,72 @@
+import { stars, hasOpenreplayAttribute } from '../utils.js';
+import { isElementNode } from './guards.js';
+export var SanitizeLevel;
+(function (SanitizeLevel) {
+    SanitizeLevel[SanitizeLevel["Plain"] = 0] = "Plain";
+    SanitizeLevel[SanitizeLevel["Obscured"] = 1] = "Obscured";
+    SanitizeLevel[SanitizeLevel["Hidden"] = 2] = "Hidden";
+})(SanitizeLevel || (SanitizeLevel = {}));
+export default class Sanitizer {
+    constructor(app, options) {
+        this.app = app;
+        this.obscured = new Set();
+        this.hidden = new Set();
+        this.options = Object.assign({
+            obscureTextEmails: true,
+            obscureTextNumbers: false,
+        }, options);
+    }
+    handleNode(id, parentID, node) {
+        if (this.obscured.has(parentID) ||
+            (isElementNode(node) &&
+                (hasOpenreplayAttribute(node, 'masked') || hasOpenreplayAttribute(node, 'obscured')))) {
+            this.obscured.add(id);
+        }
+        if (this.hidden.has(parentID) ||
+            (isElementNode(node) &&
+                (hasOpenreplayAttribute(node, 'htmlmasked') || hasOpenreplayAttribute(node, 'hidden')))) {
+            this.hidden.add(id);
+        }
+        if (this.options.domSanitizer !== undefined && isElementNode(node)) {
+            const sanitizeLevel = this.options.domSanitizer(node);
+            if (sanitizeLevel === SanitizeLevel.Obscured) {
+                this.obscured.add(id);
+            }
+            if (sanitizeLevel === SanitizeLevel.Hidden) {
+                this.hidden.add(id);
+            }
+        }
+    }
+    sanitize(id, data) {
+        if (this.obscured.has(id)) {
+            // TODO: is it the best place to put trim() ? Might trimmed spaces be considered in layout in certain cases?
+            return data
+                .trim()
+                .replace(/[^\f\n\r\t\v\u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]/g, '█');
+        }
+        if (this.options.obscureTextNumbers) {
+            data = data.replace(/\d/g, '0');
+        }
+        if (this.options.obscureTextEmails) {
+            data = data.replace(/([^\s]+)@([^\s]+)\.([^\s]+)/g, (...f) => stars(f[1]) + '@' + stars(f[2]) + '.' + stars(f[3]));
+        }
+        return data;
+    }
+    isObscured(id) {
+        return this.obscured.has(id);
+    }
+    isHidden(id) {
+        return this.hidden.has(id);
+    }
+    getInnerTextSecure(el) {
+        const id = this.app.nodes.getID(el);
+        if (!id) {
+            return '';
+        }
+        return this.sanitize(id, el.innerText);
+    }
+    clear() {
+        this.obscured.clear();
+        this.hidden.clear();
+    }
+}

package/lib/app/session.d.ts

@@ -0,0 +1,38 @@
+import type App from './index.js';
+interface SessionInfo {
+    sessionID: string | undefined;
+    metadata: Record<string, string>;
+    userID: string | null;
+    timestamp: number;
+    projectID?: string;
+}
+type OnUpdateCallback = (i: Partial<SessionInfo>) => void;
+export 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;
+    assign(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;
+}
+export {};