@openreplay/tracker 5.0.1 → 5.0.2-beta

package/lib/modules/input.js

@@ -1,158 +0,0 @@
-import { normSpaces, IN_BROWSER, getLabelAttribute } from '../utils.js';
-import { hasTag } from '../app/guards.js';
-import { SetInputTarget, SetInputValue, SetInputChecked } from '../app/messages.gen.js';
-const INPUT_TYPES = ['text', 'password', 'email', 'search', 'number', 'range', 'date', 'tel'];
-function isTextEditable(node) {
-    if (hasTag(node, 'textarea')) {
-        return true;
-    }
-    if (!hasTag(node, 'input')) {
-        return false;
-    }
-    return INPUT_TYPES.includes(node.type);
-}
-function isCheckable(node) {
-    if (!hasTag(node, 'input')) {
-        return false;
-    }
-    const type = node.type;
-    return type === 'checkbox' || type === 'radio';
-}
-const labelElementFor = IN_BROWSER && 'labels' in HTMLInputElement.prototype
-    ? (node) => {
-        let p = node;
-        while ((p = p.parentNode) !== null) {
-            if (hasTag(p, 'label')) {
-                return p;
-            }
-        }
-        const labels = node.labels;
-        if (labels !== null && labels.length === 1) {
-            return labels[0];
-        }
-    }
-    : (node) => {
-        let p = node;
-        while ((p = p.parentNode) !== null) {
-            if (hasTag(p, 'label')) {
-                return p;
-            }
-        }
-        const id = node.id;
-        if (id) {
-            const labels = node.ownerDocument.querySelectorAll('label[for="' + id + '"]');
-            if (labels !== null && labels.length === 1) {
-                return labels[0];
-            }
-        }
-    };
-export function getInputLabel(node) {
-    let label = getLabelAttribute(node);
-    if (label === null) {
-        const labelElement = labelElementFor(node);
-        label =
-            (labelElement && labelElement.innerText) ||
-                node.placeholder ||
-                node.name ||
-                node.id ||
-                node.className ||
-                node.type;
-    }
-    return normSpaces(label).slice(0, 100);
-}
-export default function (app, opts) {
-    const options = Object.assign({
-        obscureInputNumbers: true,
-        obscureInputEmails: true,
-        defaultInputMode: 1 /* InputMode.Obscured */,
-        obscureInputDates: false,
-    }, opts);
-    function sendInputTarget(id, node) {
-        const label = getInputLabel(node);
-        if (label !== '') {
-            app.send(SetInputTarget(id, label));
-        }
-    }
-    function sendInputValue(id, node) {
-        let value = node.value;
-        let inputMode = options.defaultInputMode;
-        if (node.type === 'password' || app.sanitizer.isHidden(id)) {
-            inputMode = 2 /* InputMode.Hidden */;
-        }
-        else if (app.sanitizer.isObscured(id) ||
-            (inputMode === 0 /* InputMode.Plain */ &&
-                ((options.obscureInputNumbers && node.type !== 'date' && /\d\d\d\d/.test(value)) ||
-                    (options.obscureInputDates && node.type === 'date') ||
-                    (options.obscureInputEmails && (node.type === 'email' || !!~value.indexOf('@')))))) {
-            inputMode = 1 /* InputMode.Obscured */;
-        }
-        let mask = 0;
-        switch (inputMode) {
-            case 2 /* InputMode.Hidden */:
-                mask = -1;
-                value = '';
-                break;
-            case 1 /* InputMode.Obscured */:
-                mask = value.length;
-                value = '';
-                break;
-        }
-        app.send(SetInputValue(id, value, mask));
-    }
-    const inputValues = new Map();
-    const checkableValues = new Map();
-    const registeredTargets = new Set();
-    app.attachStopCallback(() => {
-        inputValues.clear();
-        checkableValues.clear();
-        registeredTargets.clear();
-    });
-    app.ticker.attach(() => {
-        inputValues.forEach((value, id) => {
-            const node = app.nodes.getNode(id);
-            if (!node)
-                return inputValues.delete(id);
-            if (value !== node.value) {
-                inputValues.set(id, node.value);
-                if (!registeredTargets.has(id)) {
-                    registeredTargets.add(id);
-                    sendInputTarget(id, node);
-                }
-                sendInputValue(id, node);
-            }
-        });
-        checkableValues.forEach((checked, id) => {
-            const node = app.nodes.getNode(id);
-            if (!node)
-                return checkableValues.delete(id);
-            if (checked !== node.checked) {
-                checkableValues.set(id, node.checked);
-                app.send(SetInputChecked(id, node.checked));
-            }
-        });
-    });
-    app.ticker.attach(Set.prototype.clear, 100, false, registeredTargets);
-    app.nodes.attachNodeCallback(app.safe((node) => {
-        const id = app.nodes.getID(node);
-        if (id === undefined) {
-            return;
-        }
-        // TODO: support multiple select (?): use selectedOptions; Need send target?
-        if (hasTag(node, 'select')) {
-            sendInputValue(id, node);
-            app.attachEventListener(node, 'change', () => {
-                sendInputValue(id, node);
-            });
-        }
-        if (isTextEditable(node)) {
-            inputValues.set(id, node.value);
-            sendInputValue(id, node);
-            return;
-        }
-        if (isCheckable(node)) {
-            checkableValues.set(id, node.checked);
-            app.send(SetInputChecked(id, node.checked));
-            return;
-        }
-    }));
-}

package/lib/modules/mouse.d.ts

@@ -1,2 +0,0 @@
-import type App from '../app/index.js';
-export default function (app: App): void;

package/lib/modules/mouse.js

@@ -1,145 +0,0 @@
-import { hasTag, isSVGElement, isDocument } from '../app/guards.js';
-import { normSpaces, hasOpenreplayAttribute, getLabelAttribute } from '../utils.js';
-import { MouseMove, MouseClick } from '../app/messages.gen.js';
-import { getInputLabel } from './input.js';
-import { finder } from '@medv/finder';
-function _getSelector(target, document) {
-    const selector = finder(target, {
-        root: document.body,
-        seedMinLength: 3,
-        optimizedMinLength: 2,
-        threshold: 1000,
-        maxNumberOfTries: 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: intersept 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) {
-    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 = {};
-    app.attachStopCallback(() => {
-        mousePositionX = -1;
-        mousePositionY = -1;
-        mousePositionChanged = false;
-        mouseTarget = null;
-        selectorMap = {};
-    });
-    const sendMouseMove = () => {
-        if (mousePositionChanged) {
-            app.send(MouseMove(mousePositionX, mousePositionY));
-            mousePositionChanged = false;
-        }
-    };
-    const patchDocument = (document, topframe = false) => {
-        function getSelector(id, target) {
-            return (selectorMap[id] = selectorMap[id] || _getSelector(target, document));
-        }
-        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;
-        }, 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) {
-                sendMouseMove();
-                app.send(MouseClick(id, mouseTarget === target ? Math.round(performance.now() - mouseTargetTime) : 0, getTargetLabel(target), isClickable(target) ? getSelector(id, target) : ''), true);
-            }
-            mouseTarget = null;
-        });
-    };
-    app.nodes.attachNodeCallback((node) => {
-        if (isDocument(node)) {
-            patchDocument(node);
-        }
-    });
-    patchDocument(document, true);
-    app.ticker.attach(sendMouseMove, 10);
-}

package/lib/modules/network.d.ts

@@ -1,28 +0,0 @@
-import type App from '../app/index.js';
-type XHRRequestBody = Parameters<XMLHttpRequest['send']>[0];
-type FetchRequestBody = RequestInit['body'];
-interface RequestData {
-    body: XHRRequestBody | FetchRequestBody;
-    headers: Record<string, string>;
-}
-interface ResponseData {
-    body: any;
-    headers: Record<string, string>;
-}
-interface RequestResponseData {
-    readonly status: number;
-    readonly method: string;
-    url: string;
-    request: RequestData;
-    response: ResponseData;
-}
-type Sanitizer = (data: RequestResponseData) => RequestResponseData | null;
-export interface Options {
-    sessionTokenHeader: string | boolean;
-    failuresOnly: boolean;
-    ignoreHeaders: Array<string> | boolean;
-    capturePayload: boolean;
-    sanitizer?: Sanitizer;
-}
-export default function (app: App, opts?: Partial<Options>): void;
-export {};

package/lib/modules/network.js

@@ -1,200 +0,0 @@
-import { NetworkRequest } from '../app/messages.gen.js';
-import { getTimeOrigin } from '../utils.js';
-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,
-    }, opts);
-    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) {
-            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 sanitisation function
-                try {
-                    reqResInfo.response.body = JSON.parse(resBody);
-                }
-                catch (_a) { }
-            }
-            return options.sanitizer(reqResInfo);
-        }
-        return reqResInfo;
-    }
-    function stringify(r) {
-        if (r && typeof r.body !== 'string') {
-            try {
-                r.body = JSON.stringify(r.body);
-            }
-            catch (_a) {
-                r.body = '<unable to stringify>';
-                app.notify.warn("Openreplay fetch couldn't stringify body:", r.body);
-            }
-        }
-        return JSON.stringify(r);
-    }
-    /* ====== Fetch ====== */
-    const origFetch = window.fetch.bind(window);
-    window.fetch = (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,
-                        body: init.body,
-                    },
-                    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));
-            })
-                .catch((e) => app.debug.error('Could not process Fetch response:', e));
-            return response;
-        });
-    };
-    /* ====== <> ====== */
-    /* ====== XHR ====== */
-    const nativeOpen = XMLHttpRequest.prototype.open;
-    XMLHttpRequest.prototype.open = function (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 = ignoreHeaders ? '' : xhr.getAllResponseHeaders(); // might be null (though only if no response received though)
-            const resHs = hString
-                ? hString
-                    .split('\r\n')
-                    .map((h) => h.split(':'))
-                    .filter((entry) => !isHIgnored(entry[0]))
-                    .reduce((hds, [name, value]) => (Object.assign(Object.assign({}, hds), { [name]: value })), {})
-                : {};
-            const method = strMethod(initMethod);
-            const reqResInfo = sanitize({
-                url: String(url),
-                method,
-                status: xhr.status,
-                request: {
-                    headers: reqHs,
-                    body: reqBody,
-                },
-                response: {
-                    headers: resHs,
-                    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));
-        }));
-        //TODO: handle error (though it has no Error API nor any useful information)
-        //xhr.addEventListener('error', (e) => {})
-        return nativeOpen.apply(this, arguments);
-    };
-    const nativeSend = XMLHttpRequest.prototype.send;
-    XMLHttpRequest.prototype.send = function (body) {
-        const rdo = getXHRRequestDataObject(this);
-        rdo.body = body;
-        return nativeSend.apply(this, arguments);
-    };
-    const nativeSetRequestHeader = XMLHttpRequest.prototype.setRequestHeader;
-    XMLHttpRequest.prototype.setRequestHeader = function (name, value) {
-        if (!isHIgnored(name)) {
-            const rdo = getXHRRequestDataObject(this);
-            rdo.headers[name] = value;
-        }
-        return nativeSetRequestHeader.apply(this, arguments);
-    };
-    /* ====== <> ====== */
-}

package/lib/modules/performance.d.ts

@@ -1,7 +0,0 @@
-import type App from '../app/index.js';
-export declare const deviceMemory: number;
-export declare const jsHeapSizeLimit: number;
-export interface Options {
-    capturePerformance: boolean;
-}
-export default function (app: App, opts: Partial<Options>): void;

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.d.ts

@@ -1,2 +0,0 @@
-import type App from '../app/index.js';
-export default function (app: App): void;

package/lib/modules/scroll.js

@@ -1,76 +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.pageXOffset) ||
-            (doc.documentElement && doc.documentElement.scrollLeft) ||
-            (doc.body && doc.body.scrollLeft) ||
-            0,
-        (win && win.pageYOffset) ||
-            (doc.documentElement && doc.documentElement.scrollTop) ||
-            (doc.body && doc.body.scrollTop) ||
-            0,
-    ];
-}
-export default function (app) {
-    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(() => 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/timing.d.ts

@@ -1,7 +0,0 @@
-import type App from '../app/index.js';
-export interface Options {
-    captureResourceTimings: boolean;
-    capturePageLoadTimings: boolean;
-    capturePageRenderTimings: boolean;
-}
-export default function (app: App, opts: Partial<Options>): void;