@openreplay/tracker 5.0.2-beta → 5.0.2

package/lib/app/messages.gen.js

@@ -0,0 +1,486 @@
+// Auto-generated, do not edit
+/* eslint-disable */
+export function Timestamp(timestamp) {
+    return [
+        0 /* Messages.Type.Timestamp */,
+        timestamp,
+    ];
+}
+export function SetPageLocation(url, referrer, navigationStart) {
+    return [
+        4 /* Messages.Type.SetPageLocation */,
+        url,
+        referrer,
+        navigationStart,
+    ];
+}
+export function SetViewportSize(width, height) {
+    return [
+        5 /* Messages.Type.SetViewportSize */,
+        width,
+        height,
+    ];
+}
+export function SetViewportScroll(x, y) {
+    return [
+        6 /* Messages.Type.SetViewportScroll */,
+        x,
+        y,
+    ];
+}
+export function CreateDocument() {
+    return [
+        7 /* Messages.Type.CreateDocument */,
+    ];
+}
+export function CreateElementNode(id, parentID, index, tag, svg) {
+    return [
+        8 /* Messages.Type.CreateElementNode */,
+        id,
+        parentID,
+        index,
+        tag,
+        svg,
+    ];
+}
+export function CreateTextNode(id, parentID, index) {
+    return [
+        9 /* Messages.Type.CreateTextNode */,
+        id,
+        parentID,
+        index,
+    ];
+}
+export function MoveNode(id, parentID, index) {
+    return [
+        10 /* Messages.Type.MoveNode */,
+        id,
+        parentID,
+        index,
+    ];
+}
+export function RemoveNode(id) {
+    return [
+        11 /* Messages.Type.RemoveNode */,
+        id,
+    ];
+}
+export function SetNodeAttribute(id, name, value) {
+    return [
+        12 /* Messages.Type.SetNodeAttribute */,
+        id,
+        name,
+        value,
+    ];
+}
+export function RemoveNodeAttribute(id, name) {
+    return [
+        13 /* Messages.Type.RemoveNodeAttribute */,
+        id,
+        name,
+    ];
+}
+export function SetNodeData(id, data) {
+    return [
+        14 /* Messages.Type.SetNodeData */,
+        id,
+        data,
+    ];
+}
+export function SetNodeScroll(id, x, y) {
+    return [
+        16 /* Messages.Type.SetNodeScroll */,
+        id,
+        x,
+        y,
+    ];
+}
+export function SetInputTarget(id, label) {
+    return [
+        17 /* Messages.Type.SetInputTarget */,
+        id,
+        label,
+    ];
+}
+export function SetInputValue(id, value, mask) {
+    return [
+        18 /* Messages.Type.SetInputValue */,
+        id,
+        value,
+        mask,
+    ];
+}
+export function SetInputChecked(id, checked) {
+    return [
+        19 /* Messages.Type.SetInputChecked */,
+        id,
+        checked,
+    ];
+}
+export function MouseMove(x, y) {
+    return [
+        20 /* Messages.Type.MouseMove */,
+        x,
+        y,
+    ];
+}
+export function NetworkRequest(type, method, url, request, response, status, timestamp, duration) {
+    return [
+        21 /* Messages.Type.NetworkRequest */,
+        type,
+        method,
+        url,
+        request,
+        response,
+        status,
+        timestamp,
+        duration,
+    ];
+}
+export function ConsoleLog(level, value) {
+    return [
+        22 /* Messages.Type.ConsoleLog */,
+        level,
+        value,
+    ];
+}
+export function PageLoadTiming(requestStart, responseStart, responseEnd, domContentLoadedEventStart, domContentLoadedEventEnd, loadEventStart, loadEventEnd, firstPaint, firstContentfulPaint) {
+    return [
+        23 /* Messages.Type.PageLoadTiming */,
+        requestStart,
+        responseStart,
+        responseEnd,
+        domContentLoadedEventStart,
+        domContentLoadedEventEnd,
+        loadEventStart,
+        loadEventEnd,
+        firstPaint,
+        firstContentfulPaint,
+    ];
+}
+export function PageRenderTiming(speedIndex, visuallyComplete, timeToInteractive) {
+    return [
+        24 /* Messages.Type.PageRenderTiming */,
+        speedIndex,
+        visuallyComplete,
+        timeToInteractive,
+    ];
+}
+export function CustomEvent(name, payload) {
+    return [
+        27 /* Messages.Type.CustomEvent */,
+        name,
+        payload,
+    ];
+}
+export function UserID(id) {
+    return [
+        28 /* Messages.Type.UserID */,
+        id,
+    ];
+}
+export function UserAnonymousID(id) {
+    return [
+        29 /* Messages.Type.UserAnonymousID */,
+        id,
+    ];
+}
+export function Metadata(key, value) {
+    return [
+        30 /* Messages.Type.Metadata */,
+        key,
+        value,
+    ];
+}
+export function CSSInsertRule(id, rule, index) {
+    return [
+        37 /* Messages.Type.CSSInsertRule */,
+        id,
+        rule,
+        index,
+    ];
+}
+export function CSSDeleteRule(id, index) {
+    return [
+        38 /* Messages.Type.CSSDeleteRule */,
+        id,
+        index,
+    ];
+}
+export function Fetch(method, url, request, response, status, timestamp, duration) {
+    return [
+        39 /* Messages.Type.Fetch */,
+        method,
+        url,
+        request,
+        response,
+        status,
+        timestamp,
+        duration,
+    ];
+}
+export function Profiler(name, duration, args, result) {
+    return [
+        40 /* Messages.Type.Profiler */,
+        name,
+        duration,
+        args,
+        result,
+    ];
+}
+export function OTable(key, value) {
+    return [
+        41 /* Messages.Type.OTable */,
+        key,
+        value,
+    ];
+}
+export function StateAction(type) {
+    return [
+        42 /* Messages.Type.StateAction */,
+        type,
+    ];
+}
+export function Redux(action, state, duration) {
+    return [
+        44 /* Messages.Type.Redux */,
+        action,
+        state,
+        duration,
+    ];
+}
+export function Vuex(mutation, state) {
+    return [
+        45 /* Messages.Type.Vuex */,
+        mutation,
+        state,
+    ];
+}
+export function MobX(type, payload) {
+    return [
+        46 /* Messages.Type.MobX */,
+        type,
+        payload,
+    ];
+}
+export function NgRx(action, state, duration) {
+    return [
+        47 /* Messages.Type.NgRx */,
+        action,
+        state,
+        duration,
+    ];
+}
+export function GraphQL(operationKind, operationName, variables, response) {
+    return [
+        48 /* Messages.Type.GraphQL */,
+        operationKind,
+        operationName,
+        variables,
+        response,
+    ];
+}
+export function PerformanceTrack(frames, ticks, totalJSHeapSize, usedJSHeapSize) {
+    return [
+        49 /* Messages.Type.PerformanceTrack */,
+        frames,
+        ticks,
+        totalJSHeapSize,
+        usedJSHeapSize,
+    ];
+}
+export function StringDict(key, value) {
+    return [
+        50 /* Messages.Type.StringDict */,
+        key,
+        value,
+    ];
+}
+export function SetNodeAttributeDict(id, nameKey, valueKey) {
+    return [
+        51 /* Messages.Type.SetNodeAttributeDict */,
+        id,
+        nameKey,
+        valueKey,
+    ];
+}
+export function ResourceTiming(timestamp, duration, ttfb, headerSize, encodedBodySize, decodedBodySize, url, initiator) {
+    return [
+        53 /* Messages.Type.ResourceTiming */,
+        timestamp,
+        duration,
+        ttfb,
+        headerSize,
+        encodedBodySize,
+        decodedBodySize,
+        url,
+        initiator,
+    ];
+}
+export function ConnectionInformation(downlink, type) {
+    return [
+        54 /* Messages.Type.ConnectionInformation */,
+        downlink,
+        type,
+    ];
+}
+export function SetPageVisibility(hidden) {
+    return [
+        55 /* Messages.Type.SetPageVisibility */,
+        hidden,
+    ];
+}
+export function LoadFontFace(parentID, family, source, descriptors) {
+    return [
+        57 /* Messages.Type.LoadFontFace */,
+        parentID,
+        family,
+        source,
+        descriptors,
+    ];
+}
+export function SetNodeFocus(id) {
+    return [
+        58 /* Messages.Type.SetNodeFocus */,
+        id,
+    ];
+}
+export function LongTask(timestamp, duration, context, containerType, containerSrc, containerId, containerName) {
+    return [
+        59 /* Messages.Type.LongTask */,
+        timestamp,
+        duration,
+        context,
+        containerType,
+        containerSrc,
+        containerId,
+        containerName,
+    ];
+}
+export function SetNodeAttributeURLBased(id, name, value, baseURL) {
+    return [
+        60 /* Messages.Type.SetNodeAttributeURLBased */,
+        id,
+        name,
+        value,
+        baseURL,
+    ];
+}
+export function SetCSSDataURLBased(id, data, baseURL) {
+    return [
+        61 /* Messages.Type.SetCSSDataURLBased */,
+        id,
+        data,
+        baseURL,
+    ];
+}
+export function TechnicalInfo(type, value) {
+    return [
+        63 /* Messages.Type.TechnicalInfo */,
+        type,
+        value,
+    ];
+}
+export function CustomIssue(name, payload) {
+    return [
+        64 /* Messages.Type.CustomIssue */,
+        name,
+        payload,
+    ];
+}
+export function CSSInsertRuleURLBased(id, rule, index, baseURL) {
+    return [
+        67 /* Messages.Type.CSSInsertRuleURLBased */,
+        id,
+        rule,
+        index,
+        baseURL,
+    ];
+}
+export function MouseClick(id, hesitationTime, label, selector) {
+    return [
+        69 /* Messages.Type.MouseClick */,
+        id,
+        hesitationTime,
+        label,
+        selector,
+    ];
+}
+export function CreateIFrameDocument(frameID, id) {
+    return [
+        70 /* Messages.Type.CreateIFrameDocument */,
+        frameID,
+        id,
+    ];
+}
+export function AdoptedSSReplaceURLBased(sheetID, text, baseURL) {
+    return [
+        71 /* Messages.Type.AdoptedSSReplaceURLBased */,
+        sheetID,
+        text,
+        baseURL,
+    ];
+}
+export function AdoptedSSInsertRuleURLBased(sheetID, rule, index, baseURL) {
+    return [
+        73 /* Messages.Type.AdoptedSSInsertRuleURLBased */,
+        sheetID,
+        rule,
+        index,
+        baseURL,
+    ];
+}
+export function AdoptedSSDeleteRule(sheetID, index) {
+    return [
+        75 /* Messages.Type.AdoptedSSDeleteRule */,
+        sheetID,
+        index,
+    ];
+}
+export function AdoptedSSAddOwner(sheetID, id) {
+    return [
+        76 /* Messages.Type.AdoptedSSAddOwner */,
+        sheetID,
+        id,
+    ];
+}
+export function AdoptedSSRemoveOwner(sheetID, id) {
+    return [
+        77 /* Messages.Type.AdoptedSSRemoveOwner */,
+        sheetID,
+        id,
+    ];
+}
+export function JSException(name, message, payload, metadata) {
+    return [
+        78 /* Messages.Type.JSException */,
+        name,
+        message,
+        payload,
+        metadata,
+    ];
+}
+export function Zustand(mutation, state) {
+    return [
+        79 /* Messages.Type.Zustand */,
+        mutation,
+        state,
+    ];
+}
+export function BatchMetadata(version, pageNo, firstIndex, timestamp, location) {
+    return [
+        81 /* Messages.Type.BatchMetadata */,
+        version,
+        pageNo,
+        firstIndex,
+        timestamp,
+        location,
+    ];
+}
+export function PartitionedMessage(partNo, partTotal) {
+    return [
+        82 /* Messages.Type.PartitionedMessage */,
+        partNo,
+        partTotal,
+    ];
+}

package/lib/app/nodes.d.ts

@@ -0,0 +1,18 @@
+type NodeCallback = (node: Node, isStart: boolean) => void;
+export default class Nodes {
+    private readonly node_id;
+    private nodes;
+    private readonly nodeCallbacks;
+    private readonly elementListeners;
+    constructor(node_id: string);
+    attachNodeCallback(nodeCallback: NodeCallback): void;
+    attachNodeListener(node: Node, type: string, listener: EventListener, useCapture?: boolean): void;
+    registerNode(node: Node): [/*id:*/ number, /*isNew:*/ boolean];
+    unregisterNode(node: Node): number | undefined;
+    cleanTree(): void;
+    callNodeCallbacks(node: Node, isStart: boolean): void;
+    getID(node: Node): number | undefined;
+    getNode(id: number): void | Node;
+    clear(): void;
+}
+export {};

package/lib/app/nodes.js

@@ -0,0 +1,79 @@
+export default class Nodes {
+    constructor(node_id) {
+        this.node_id = node_id;
+        this.nodes = [];
+        this.nodeCallbacks = [];
+        this.elementListeners = new Map();
+    }
+    // Attached once per Tracker instance
+    attachNodeCallback(nodeCallback) {
+        this.nodeCallbacks.push(nodeCallback);
+    }
+    attachNodeListener(node, type, listener, useCapture = true) {
+        const id = this.getID(node);
+        if (id === undefined) {
+            return;
+        }
+        node.addEventListener(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;
+        if (isNew) {
+            id = this.nodes.length;
+            this.nodes[id] = node;
+            node[this.node_id] = id;
+        }
+        return [id, isNew];
+    }
+    unregisterNode(node) {
+        const id = node[this.node_id];
+        if (id !== undefined) {
+            delete node[this.node_id];
+            delete this.nodes[id];
+            const listeners = this.elementListeners.get(id);
+            if (listeners !== undefined) {
+                this.elementListeners.delete(id);
+                listeners.forEach((listener) => node.removeEventListener(listener[0], listener[1], listener[2]));
+            }
+        }
+        return id;
+    }
+    cleanTree() {
+        // sadly we keep empty items in array here resulting in some memory still being used
+        // but its still better than keeping dead nodes or undef elements
+        // plus we keep our index positions for new/alive nodes
+        // performance test: 3ms for 30k nodes with 17k dead ones
+        for (let i = 0; i < this.nodes.length; i++) {
+            const node = this.nodes[i];
+            if (node && !document.contains(node)) {
+                this.unregisterNode(node);
+            }
+        }
+    }
+    callNodeCallbacks(node, isStart) {
+        this.nodeCallbacks.forEach((cb) => cb(node, isStart));
+    }
+    getID(node) {
+        return node[this.node_id];
+    }
+    getNode(id) {
+        return this.nodes[id];
+    }
+    clear() {
+        for (let id = 0; id < this.nodes.length; id++) {
+            const node = this.nodes[id];
+            if (node === undefined) {
+                continue;
+            }
+            this.unregisterNode(node);
+        }
+        this.nodes.length = 0;
+    }
+}

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

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

@@ -0,0 +1,20 @@
+import Observer from './observer.js';
+import { CreateIFrameDocument } from '../messages.gen.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) => {
+            //MBTODO: do not send if empty (send on load? it might be in-place iframe, like our replayer, which does not get loaded)
+            if (docID === undefined) {
+                console.log('OpenReplay: Iframe document not bound');
+                return;
+            }
+            this.app.send(CreateIFrameDocument(hostID, docID));
+        });
+    }
+}

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

@@ -0,0 +1,8 @@
+export type Offset = [/*left:*/ number, /*top: */ number];
+export default class IFrameOffsets {
+    private readonly states;
+    private calcOffset;
+    getDocumentOffset(doc: Document): Offset;
+    observe(iFrame: HTMLIFrameElement): void;
+    clear(): void;
+}

package/lib/app/observer/iframe_offsets.js

@@ -0,0 +1,56 @@
+// Le truc - for defining an absolute offset for (nested) iframe documents. (To track mouse movments)
+export default class IFrameOffsets {
+    constructor() {
+        this.states = new Map();
+    }
+    calcOffset(state) {
+        let parLeft = 0, parTop = 0;
+        if (state.parent) {
+            ;
+            [parLeft, parTop] = this.calcOffset(state.parent);
+        }
+        if (!state.offset) {
+            const { left, top } = state.iFrame.getBoundingClientRect();
+            state.offset = [left, top];
+        }
+        const [left, top] = state.offset;
+        return [parLeft + left, parTop + top]; // TODO: store absolute sum, invalidate whole subtree. Otherwise it is summated on each mousemove
+    }
+    getDocumentOffset(doc) {
+        const state = this.states.get(doc);
+        if (!state) {
+            return [0, 0];
+        } // topmost doc
+        return this.calcOffset(state);
+    }
+    observe(iFrame) {
+        var _a;
+        const doc = iFrame.contentDocument;
+        if (!doc) {
+            return;
+        }
+        const parentDoc = iFrame.ownerDocument;
+        const parentState = this.states.get(parentDoc);
+        const state = {
+            offset: null,
+            iFrame,
+            parent: parentState || null,
+            clear: () => {
+                var _a;
+                parentDoc.removeEventListener('scroll', invalidateOffset);
+                (_a = parentDoc.defaultView) === null || _a === void 0 ? void 0 : _a.removeEventListener('resize', invalidateOffset);
+            },
+        };
+        const invalidateOffset = () => {
+            state.offset = null;
+        };
+        // anything more reliable? This does not cover all cases (layout changes are ignored, for ex.)
+        parentDoc.addEventListener('scroll', invalidateOffset);
+        (_a = parentDoc.defaultView) === null || _a === void 0 ? void 0 : _a.addEventListener('resize', invalidateOffset);
+        this.states.set(doc, state);
+    }
+    clear() {
+        this.states.forEach((s) => s.clear());
+        this.states.clear();
+    }
+}

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

@@ -0,0 +1,23 @@
+import App from '../index.js';
+export default abstract class Observer {
+    protected readonly app: App;
+    protected readonly isTopContext: boolean;
+    private readonly observer;
+    private readonly commited;
+    private readonly recents;
+    private readonly indexes;
+    private readonly attributesMap;
+    private readonly textSet;
+    constructor(app: App, isTopContext?: boolean);
+    private clear;
+    private sendNodeAttribute;
+    private sendNodeData;
+    private bindNode;
+    private bindTree;
+    private unbindTree;
+    private _commitNode;
+    private commitNode;
+    private commitNodes;
+    protected observeRoot(node: Node, beforeCommit: (id?: number) => unknown, nodeToBind?: Node): void;
+    disconnect(): void;
+}