@openreplay/tracker 14.0.10-beta.1 → 14.0.10

package/lib/modules/mouse.js

@@ -1,192 +0,0 @@
-import { hasTag, isSVGElement, isDocument } from '../app/guards.js';
-import { normSpaces, hasOpenreplayAttribute, getLabelAttribute, now } from '../utils.js';
-import { MouseMove, MouseClick, MouseThrashing } from '../app/messages.gen.js';
-import { getInputLabel } from './input.js';
-import { finder } from '@medv/finder';
-function _getSelector(target, document, options) {
-    const selector = finder(target, {
-        root: document.body,
-        seedMinLength: 3,
-        optimizedMinLength: options?.minSelectorDepth || 2,
-        threshold: options?.nthThreshold || 1000,
-        maxNumberOfTries: options?.maxOptimiseTries || 10000,
-    });
-    return selector;
-}
-function isClickable(element) {
-    const tag = element.tagName.toUpperCase();
-    return (tag === 'BUTTON' ||
-        tag === 'A' ||
-        tag === 'LI' ||
-        tag === 'SELECT' ||
-        tag === 'TR' ||
-        tag === 'TH' ||
-        element.onclick != null ||
-        element.getAttribute('role') === 'button');
-    //|| element.className.includes("btn")
-    // MBTODO: intercept addEventListener
-}
-//TODO: fix (typescript is not sure about target variable after assignation of svg)
-function getTarget(target, document) {
-    if (target instanceof Element) {
-        return _getTarget(target, document);
-    }
-    return null;
-}
-function _getTarget(target, document) {
-    let element = target;
-    while (element !== null && element !== document.documentElement) {
-        if (hasOpenreplayAttribute(element, 'masked')) {
-            return null;
-        }
-        element = element.parentElement;
-    }
-    if (isSVGElement(target)) {
-        let owner = target.ownerSVGElement;
-        while (owner !== null) {
-            target = owner;
-            owner = owner.ownerSVGElement;
-        }
-    }
-    element = target;
-    while (element !== null && element !== document.documentElement) {
-        const tag = element.tagName.toUpperCase();
-        if (tag === 'LABEL') {
-            return null;
-        }
-        if (tag === 'INPUT') {
-            return element;
-        }
-        if (isClickable(element) || getLabelAttribute(element) !== null) {
-            return element;
-        }
-        element = element.parentElement;
-    }
-    return target === document.documentElement ? null : target;
-}
-export default function (app, options) {
-    const { disableClickmaps = false } = options || {};
-    function getTargetLabel(target) {
-        const dl = getLabelAttribute(target);
-        if (dl !== null) {
-            return dl;
-        }
-        if (hasTag(target, 'input')) {
-            return getInputLabel(target);
-        }
-        if (isClickable(target)) {
-            let label = '';
-            if (target instanceof HTMLElement) {
-                label = app.sanitizer.getInnerTextSecure(target);
-            }
-            label = label || target.id || target.className;
-            return normSpaces(label).slice(0, 100);
-        }
-        return '';
-    }
-    let mousePositionX = -1;
-    let mousePositionY = -1;
-    let mousePositionChanged = false;
-    let mouseTarget = null;
-    let mouseTargetTime = 0;
-    let selectorMap = {};
-    let velocity = 0;
-    let direction = 0;
-    let directionChangeCount = 0;
-    let distance = 0;
-    let checkIntervalId;
-    const shakeThreshold = 0.008;
-    const shakeCheckInterval = 225;
-    function checkMouseShaking() {
-        const nextVelocity = distance / shakeCheckInterval;
-        if (!velocity) {
-            velocity = nextVelocity;
-            return;
-        }
-        const acceleration = (nextVelocity - velocity) / shakeCheckInterval;
-        if (directionChangeCount > 4 && acceleration > shakeThreshold) {
-            app.send(MouseThrashing(now()));
-        }
-        distance = 0;
-        directionChangeCount = 0;
-        velocity = nextVelocity;
-    }
-    app.attachStartCallback(() => {
-        checkIntervalId = setInterval(() => checkMouseShaking(), shakeCheckInterval);
-    });
-    app.attachStopCallback(() => {
-        mousePositionX = -1;
-        mousePositionY = -1;
-        mousePositionChanged = false;
-        mouseTarget = null;
-        selectorMap = {};
-        if (checkIntervalId) {
-            clearInterval(checkIntervalId);
-        }
-    });
-    const sendMouseMove = () => {
-        if (mousePositionChanged) {
-            app.send(MouseMove(mousePositionX, mousePositionY));
-            mousePositionChanged = false;
-        }
-    };
-    const patchDocument = (document, topframe = false) => {
-        function getSelector(id, target, options) {
-            return (selectorMap[id] = selectorMap[id] || _getSelector(target, document, options));
-        }
-        const attachListener = topframe
-            ? app.attachEventListener.bind(app) // attached/removed on start/stop
-            : app.nodes.attachNodeListener.bind(app.nodes); // attached/removed on node register/unregister
-        attachListener(document.documentElement, 'mouseover', (e) => {
-            const target = getTarget(e.target, document);
-            if (target !== mouseTarget) {
-                mouseTarget = target;
-                mouseTargetTime = performance.now();
-            }
-        });
-        attachListener(document, 'mousemove', (e) => {
-            const [left, top] = app.observer.getDocumentOffset(document); // MBTODO?: document-id related message
-            mousePositionX = e.clientX + left;
-            mousePositionY = e.clientY + top;
-            mousePositionChanged = true;
-            const nextDirection = Math.sign(e.movementX);
-            distance += Math.abs(e.movementX) + Math.abs(e.movementY);
-            if (nextDirection !== direction) {
-                direction = nextDirection;
-                directionChangeCount++;
-            }
-        }, false);
-        attachListener(document, 'click', (e) => {
-            const target = getTarget(e.target, document);
-            if ((!e.clientX && !e.clientY) || target === null) {
-                return;
-            }
-            const id = app.nodes.getID(target);
-            if (id !== undefined) {
-                const clickX = e.pageX;
-                const clickY = e.pageY;
-                const contentWidth = document.documentElement.scrollWidth;
-                const contentHeight = document.documentElement.scrollHeight;
-                const normalizedX = roundNumber(clickX / contentWidth);
-                const normalizedY = roundNumber(clickY / contentHeight);
-                sendMouseMove();
-                app.send(MouseClick(id, mouseTarget === target ? Math.round(performance.now() - mouseTargetTime) : 0, getTargetLabel(target), isClickable(target) && !disableClickmaps ? getSelector(id, target, options) : '', normalizedX, normalizedY), true);
-            }
-            mouseTarget = null;
-        });
-    };
-    app.nodes.attachNodeCallback((node) => {
-        if (isDocument(node)) {
-            patchDocument(node);
-        }
-    });
-    patchDocument(document, true);
-    app.ticker.attach(sendMouseMove, options?.trackingOffset || 7);
-}
-/**
- * we get 0 to 1 decimal number, convert and round it, then turn to %
- * 0.39643 => 396.43 => 396 => 39.6%
- * */
-function roundNumber(num) {
-    return Math.round(num * 1e4);
-}

package/lib/modules/network.js

@@ -1,238 +0,0 @@
-import { NetworkRequest } from '../app/messages.gen.js';
-import { getTimeOrigin } from '../utils.js';
-import axiosSpy from './axiosSpy.js';
-import createNetworkProxy from '@openreplay/network-proxy';
-function getXHRRequestDataObject(xhr) {
-    // @ts-ignore  this is 3x faster than using Map<XHR, XHRRequestData>
-    if (!xhr.__or_req_data__) {
-        // @ts-ignore
-        xhr.__or_req_data__ = { body: undefined, headers: {} };
-    }
-    // @ts-ignore
-    return xhr.__or_req_data__;
-}
-function strMethod(method) {
-    return typeof method === 'string' ? method.toUpperCase() : 'GET';
-}
-export default function (app, opts = {}) {
-    const options = Object.assign({
-        failuresOnly: false,
-        ignoreHeaders: ['cookie', 'set-cookie', 'authorization'],
-        capturePayload: false,
-        sessionTokenHeader: false,
-        captureInIframes: true,
-        axiosInstances: undefined,
-        useProxy: true,
-    }, opts);
-    if (options.useProxy === false) {
-        app.debug.warn('Network module is migrating to proxy api, to gradually migrate and test it set useProxy to true');
-    }
-    const ignoreHeaders = options.ignoreHeaders;
-    const isHIgnored = Array.isArray(ignoreHeaders)
-        ? (name) => ignoreHeaders.includes(name)
-        : () => ignoreHeaders;
-    const stHeader = options.sessionTokenHeader === true ? 'X-OpenReplay-SessionToken' : options.sessionTokenHeader;
-    function setSessionTokenHeader(setRequestHeader) {
-        if (stHeader) {
-            const sessionToken = app.getSessionToken();
-            if (sessionToken) {
-                app.safe(setRequestHeader)(stHeader, sessionToken);
-            }
-        }
-    }
-    function sanitize(reqResInfo) {
-        if (!options.capturePayload) {
-            // @ts-ignore
-            delete reqResInfo.request.body;
-            delete reqResInfo.response.body;
-        }
-        if (options.sanitizer) {
-            const resBody = reqResInfo.response.body;
-            if (typeof resBody === 'string') {
-                // Parse response in order to have handy view in sanitization function
-                try {
-                    reqResInfo.response.body = JSON.parse(resBody);
-                }
-                catch { }
-            }
-            return options.sanitizer(reqResInfo);
-        }
-        return reqResInfo;
-    }
-    function stringify(r) {
-        if (r && typeof r.body !== 'string') {
-            try {
-                r.body = JSON.stringify(r.body);
-            }
-            catch {
-                r.body = '<unable to stringify>';
-                app.notify.warn("Openreplay fetch couldn't stringify body:", r.body);
-            }
-        }
-        return JSON.stringify(r);
-    }
-    const patchWindow = (context) => {
-        /* ====== modern way ====== */
-        if (options.useProxy) {
-            return createNetworkProxy(context, options.ignoreHeaders, setSessionTokenHeader, sanitize, (message) => {
-                app.send(NetworkRequest(message.requestType, message.method, message.url, message.request, message.response, message.status, message.startTime + getTimeOrigin(), message.duration, message.responseSize));
-            }, (url) => app.isServiceURL(url), { xhr: true, fetch: true, beacon: true }, options.tokenUrlMatcher);
-        }
-        /* ====== Fetch ====== */
-        const origFetch = context.fetch.bind(context);
-        const trackFetch = (input, init = {}) => {
-            if (!(typeof input === 'string' || input instanceof URL) || app.isServiceURL(String(input))) {
-                return origFetch(input, init);
-            }
-            setSessionTokenHeader(function (name, value) {
-                if (init.headers === undefined) {
-                    init.headers = {};
-                }
-                if (init.headers instanceof Headers) {
-                    init.headers.append(name, value);
-                }
-                else if (Array.isArray(init.headers)) {
-                    init.headers.push([name, value]);
-                }
-                else {
-                    init.headers[name] = value;
-                }
-            });
-            const startTime = performance.now();
-            return origFetch(input, init).then((response) => {
-                const duration = performance.now() - startTime;
-                if (options.failuresOnly && response.status < 400) {
-                    return response;
-                }
-                const r = response.clone();
-                r.text()
-                    .then((text) => {
-                    const reqHs = {};
-                    const resHs = {};
-                    if (ignoreHeaders !== true) {
-                        // request headers
-                        const writeReqHeader = ([n, v]) => {
-                            if (!isHIgnored(n)) {
-                                reqHs[n] = v;
-                            }
-                        };
-                        if (init.headers instanceof Headers) {
-                            init.headers.forEach((v, n) => writeReqHeader([n, v]));
-                        }
-                        else if (Array.isArray(init.headers)) {
-                            init.headers.forEach(writeReqHeader);
-                        }
-                        else if (typeof init.headers === 'object') {
-                            Object.entries(init.headers).forEach(writeReqHeader);
-                        }
-                        // response headers
-                        r.headers.forEach((v, n) => {
-                            if (!isHIgnored(n))
-                                resHs[n] = v;
-                        });
-                    }
-                    const method = strMethod(init.method);
-                    const reqResInfo = sanitize({
-                        url: String(input),
-                        method,
-                        status: r.status,
-                        request: {
-                            headers: reqHs,
-                            // @ts-ignore
-                            body: init.body || null,
-                        },
-                        response: {
-                            headers: resHs,
-                            body: text,
-                        },
-                    });
-                    if (!reqResInfo) {
-                        return;
-                    }
-                    app.send(NetworkRequest('fetch', method, String(reqResInfo.url), stringify(reqResInfo.request), stringify(reqResInfo.response), r.status, startTime + getTimeOrigin(), duration, 0));
-                })
-                    .catch((e) => app.debug.error('Could not process Fetch response:', e));
-                return response;
-            });
-        };
-        // @ts-ignore
-        context.fetch = trackFetch;
-        /* ====== <> ====== */
-        /* ====== XHR ====== */
-        const nativeOpen = context.XMLHttpRequest.prototype.open;
-        const nativeSetRequestHeader = context.XMLHttpRequest.prototype.setRequestHeader;
-        const nativeSend = context.XMLHttpRequest.prototype.send;
-        function trackXMLHttpReqOpen(initMethod, url) {
-            const xhr = this;
-            setSessionTokenHeader((name, value) => xhr.setRequestHeader(name, value));
-            let startTime = 0;
-            xhr.addEventListener('loadstart', (e) => {
-                startTime = e.timeStamp;
-            });
-            xhr.addEventListener('load', app.safe((e) => {
-                const { headers: reqHs, body: reqBody } = getXHRRequestDataObject(xhr);
-                const duration = startTime > 0 ? e.timeStamp - startTime : 0;
-                const hString = xhr.getAllResponseHeaders() || ''; // might be null (only if no response received though)
-                const headersArr = hString.trim().split(/[\r\n]+/);
-                const headerMap = {};
-                headersArr.forEach(function (line) {
-                    const parts = line.split(': ');
-                    const header = parts.shift();
-                    if (!isHIgnored(header)) {
-                        headerMap[header] = parts.join(': ');
-                    }
-                });
-                const method = strMethod(initMethod);
-                const reqResInfo = sanitize({
-                    url: String(url),
-                    method,
-                    status: xhr.status,
-                    request: {
-                        headers: reqHs,
-                        // @ts-ignore
-                        body: reqBody || null,
-                    },
-                    response: {
-                        headers: headerMap,
-                        body: xhr.response,
-                    },
-                });
-                if (!reqResInfo) {
-                    return;
-                }
-                app.send(NetworkRequest('xhr', method, String(reqResInfo.url), stringify(reqResInfo.request), stringify(reqResInfo.response), xhr.status, startTime + getTimeOrigin(), duration, 0));
-            }));
-            //TODO: handle error (though it has no Error API nor any useful information)
-            //xhr.addEventListener('error', (e) => {})
-            return nativeOpen.apply(this, arguments);
-        }
-        function trackXHRSend(body) {
-            const rdo = getXHRRequestDataObject(this);
-            rdo.body = body;
-            // @ts-ignore ??? this -> XMLHttpRequest
-            return nativeSend.apply(this, arguments);
-        }
-        function trackSetReqHeader(name, value) {
-            if (!isHIgnored(name)) {
-                const rdo = getXHRRequestDataObject(this);
-                rdo.headers[name] = value;
-            }
-            return nativeSetRequestHeader.apply(this, arguments);
-        }
-        if (!options.axiosInstances) {
-            context.XMLHttpRequest.prototype.open = trackXMLHttpReqOpen;
-            context.XMLHttpRequest.prototype.send = trackXHRSend;
-            context.XMLHttpRequest.prototype.setRequestHeader = trackSetReqHeader;
-        }
-        /* ====== <> ====== */
-    };
-    patchWindow(window);
-    if (options.axiosInstances) {
-        options.axiosInstances.forEach((axiosInstance) => {
-            axiosSpy(app, axiosInstance, options, sanitize, stringify);
-        });
-    }
-    if (options.captureInIframes) {
-        app.observer.attachContextCallback(app.safe(patchWindow));
-    }
-}

package/lib/modules/performance.js

@@ -1,49 +0,0 @@
-import { IN_BROWSER } from '../utils.js';
-import { PerformanceTrack } from '../app/messages.gen.js';
-const perf = IN_BROWSER && 'performance' in window && 'memory' in performance // works in Chrome only
-    ? performance
-    : { memory: {} };
-export const deviceMemory = IN_BROWSER ? (navigator.deviceMemory || 0) * 1024 : 0;
-export const jsHeapSizeLimit = perf.memory.jsHeapSizeLimit || 0;
-export default function (app, opts) {
-    const options = Object.assign({
-        capturePerformance: true,
-    }, opts);
-    if (!options.capturePerformance) {
-        return;
-    }
-    let frames;
-    let ticks;
-    const nextFrame = () => {
-        if (frames === undefined || frames === -1) {
-            return;
-        }
-        frames++;
-        requestAnimationFrame(nextFrame);
-    };
-    app.ticker.attach(() => {
-        if (ticks === undefined || ticks === -1) {
-            return;
-        }
-        ticks++;
-    }, 0, false);
-    const sendPerformanceTrack = () => {
-        if (frames === undefined || ticks === undefined) {
-            return;
-        }
-        app.send(PerformanceTrack(frames, ticks, perf.memory.totalJSHeapSize || 0, perf.memory.usedJSHeapSize || 0));
-        ticks = frames = document.hidden ? -1 : 0;
-    };
-    app.attachStartCallback(() => {
-        ticks = frames = -1;
-        sendPerformanceTrack();
-        nextFrame();
-    });
-    app.attachStopCallback(() => {
-        ticks = frames = undefined;
-    });
-    app.ticker.attach(sendPerformanceTrack, 40, false);
-    if (document.hidden !== undefined) {
-        app.attachEventListener(document, 'visibilitychange', sendPerformanceTrack, false, false);
-    }
-}

package/lib/modules/scroll.js

@@ -1,81 +0,0 @@
-import { SetViewportScroll, SetNodeScroll } from '../app/messages.gen.js';
-import { isNode, isElementNode, isRootNode, isDocument } from '../app/guards.js';
-function getDocumentScroll(doc) {
-    const win = doc.defaultView;
-    return [
-        (win && win.scrollX) ||
-            (doc.documentElement && doc.documentElement.scrollLeft) ||
-            (doc.body && doc.body.scrollLeft) ||
-            0,
-        (win && win.scrollY) ||
-            (doc.documentElement && doc.documentElement.scrollTop) ||
-            (doc.body && doc.body.scrollTop) ||
-            0,
-    ];
-}
-export default function (app, insideIframe) {
-    let documentScroll = false;
-    const nodeScroll = new Map();
-    function setNodeScroll(target) {
-        if (!isNode(target)) {
-            return;
-        }
-        if (isElementNode(target)) {
-            nodeScroll.set(target, [target.scrollLeft, target.scrollTop]);
-        }
-        if (isDocument(target)) {
-            nodeScroll.set(target, getDocumentScroll(target));
-        }
-    }
-    const sendSetViewportScroll = app.safe(() => {
-        if (insideIframe) {
-            return;
-        }
-        app.send(SetViewportScroll(...getDocumentScroll(document)));
-    });
-    const sendSetNodeScroll = app.safe((s, node) => {
-        const id = app.nodes.getID(node);
-        if (id !== undefined) {
-            app.send(SetNodeScroll(id, s[0], s[1]));
-        }
-    });
-    app.attachStartCallback(sendSetViewportScroll);
-    app.attachStopCallback(() => {
-        documentScroll = false;
-        nodeScroll.clear();
-    });
-    app.nodes.attachNodeCallback((node, isStart) => {
-        // MBTODO: iterate over all the nodes on start instead of using isStart hack
-        if (isStart) {
-            if (isElementNode(node) && node.scrollLeft + node.scrollTop > 0) {
-                nodeScroll.set(node, [node.scrollLeft, node.scrollTop]);
-            }
-            else if (isDocument(node)) {
-                // DRY somehow?
-                nodeScroll.set(node, getDocumentScroll(node));
-            }
-        }
-        if (isRootNode(node)) {
-            // scroll is not-composed event (https://javascript.info/shadow-dom-events)
-            app.nodes.attachNodeListener(node, 'scroll', (e) => {
-                setNodeScroll(e.target);
-            });
-        }
-    });
-    app.attachEventListener(document, 'scroll', (e) => {
-        const target = e.target;
-        if (target === document) {
-            documentScroll = true;
-            return;
-        }
-        setNodeScroll(target);
-    });
-    app.ticker.attach(() => {
-        if (documentScroll) {
-            sendSetViewportScroll();
-            documentScroll = false;
-        }
-        nodeScroll.forEach(sendSetNodeScroll);
-        nodeScroll.clear();
-    }, 5, false);
-}

package/lib/modules/selection.js

@@ -1,35 +0,0 @@
-import { SelectionChange } from '../app/messages.gen.js';
-function selection(app) {
-    app.attachEventListener(document, 'selectionchange', () => {
-        const selection = document.getSelection();
-        if (selection !== null && !selection.isCollapsed) {
-            const selectionStart = app.nodes.getID(selection.anchorNode);
-            const selectionEnd = app.nodes.getID(selection.focusNode);
-            const selectedText = selection.toString().replace(/\s+/g, ' ');
-            if (selectionStart && selectionEnd) {
-                app.send(SelectionChange(selectionStart, selectionEnd, selectedText));
-            }
-        }
-        else {
-            app.send(SelectionChange(-1, -1, ''));
-        }
-    });
-}
-export default selection;
-/** TODO: research how to get all in-between nodes inside selection range
- *        including nodes between anchor and focus nodes and their children
- *        without recursively searching the dom tree
- */
-// if (selection.rangeCount) {
-//   const nodes = [];
-//   for (let i = 0; i < selection.rangeCount; i++) {
-//     const range = selection.getRangeAt(i);
-//     let node: Node | null = range.startContainer;
-//     while (node) {
-//       nodes.push(node);
-//       if (node === range.endContainer) break;
-//       node = node.nextSibling;
-//     }
-//   }
-//   // send selected nodes
-// }

package/lib/modules/tabs.js

@@ -1,10 +0,0 @@
-import { TabChange } from '../app/messages.gen.js';
-export default function (app) {
-    function changeTab() {
-        if (!document.hidden) {
-            app.debug.log('Openreplay: tab change to' + app.session.getTabId());
-            app.send(TabChange(app.session.getTabId()));
-        }
-    }
-    app.attachEventListener(window, 'focus', changeTab, false, false);
-}

package/lib/modules/tagWatcher.js

@@ -1,73 +0,0 @@
-export const WATCHED_TAGS_KEY = '__or__watched_tags__';
-class TagWatcher {
-    constructor(sessionStorage, errLog, onTag) {
-        this.sessionStorage = sessionStorage;
-        this.errLog = errLog;
-        this.onTag = onTag;
-        this.intervals = {};
-        this.tags = [];
-        const tags = JSON.parse(sessionStorage.getItem(WATCHED_TAGS_KEY) ?? '[]');
-        this.setTags(tags);
-        this.observer = new IntersectionObserver((entries) => {
-            entries.forEach((entry) => {
-                if (entry.isIntersecting) {
-                    if (entry.target) {
-                        // @ts-ignore
-                        const tag = entry.target.__or_watcher_tagname;
-                        if (tag) {
-                            this.onTagRendered(tag);
-                        }
-                        this.observer.unobserve(entry.target);
-                    }
-                }
-            });
-        });
-    }
-    async fetchTags(ingest, token) {
-        return fetch(`${ingest}/v1/web/tags`, {
-            method: 'GET',
-            headers: {
-                Authorization: `Bearer ${token}`,
-            },
-        })
-            .then((r) => r.json())
-            .then(({ tags }) => {
-            if (tags && tags.length) {
-                this.setTags(tags);
-                const tagString = JSON.stringify(tags);
-                this.sessionStorage.setItem(WATCHED_TAGS_KEY, tagString || '');
-            }
-        })
-            .catch((e) => this.errLog(e));
-    }
-    setTags(tags) {
-        this.tags = tags;
-        this.intervals = {};
-        tags.forEach((tag) => {
-            this.intervals[tag.id] = setInterval(() => {
-                const possibleEls = document.querySelectorAll(tag.selector);
-                if (possibleEls.length > 0) {
-                    const el = possibleEls[0];
-                    // @ts-ignore
-                    el.__or_watcher_tagname = tag.id;
-                    this.observer.observe(el);
-                }
-            }, 500);
-        });
-    }
-    onTagRendered(tagId) {
-        if (this.intervals[tagId]) {
-            clearInterval(this.intervals[tagId]);
-        }
-        this.onTag(tagId);
-    }
-    clear() {
-        this.tags.forEach((tag) => {
-            clearInterval(this.intervals[tag.id]);
-        });
-        this.tags = [];
-        this.intervals = {};
-        this.observer.disconnect();
-    }
-}
-export default TagWatcher;