@openreplay/tracker 4.1.11 → 5.0.1-beta.1

package/cjs/modules/input.js

@@ -4,18 +4,18 @@ exports.getInputLabel = void 0;
 const utils_js_1 = require("../utils.js");
 const guards_js_1 = require("../app/guards.js");
 const messages_gen_js_1 = require("../app/messages.gen.js");
-const INPUT_TYPES = ['text', 'password', 'email', 'search', 'number', 'range', 'date'];
+const INPUT_TYPES = ['text', 'password', 'email', 'search', 'number', 'range', 'date', 'tel'];
 function isTextEditable(node) {
-    if ((0, guards_js_1.hasTag)(node, 'TEXTAREA')) {
+    if ((0, guards_js_1.hasTag)(node, 'textarea')) {
         return true;
     }
-    if (!(0, guards_js_1.hasTag)(node, 'INPUT')) {
+    if (!(0, guards_js_1.hasTag)(node, 'input')) {
         return false;
     }
     return INPUT_TYPES.includes(node.type);
 }
 function isCheckable(node) {
-    if (!(0, guards_js_1.hasTag)(node, 'INPUT')) {
+    if (!(0, guards_js_1.hasTag)(node, 'input')) {
         return false;
     }
     const type = node.type;
@@ -25,7 +25,7 @@ const labelElementFor = utils_js_1.IN_BROWSER && 'labels' in HTMLInputElement.pr
     ? (node) => {
         let p = node;
         while ((p = p.parentNode) !== null) {
-            if ((0, guards_js_1.hasTag)(p, 'LABEL')) {
+            if ((0, guards_js_1.hasTag)(p, 'label')) {
                 return p;
             }
         }
@@ -37,7 +37,7 @@ const labelElementFor = utils_js_1.IN_BROWSER && 'labels' in HTMLInputElement.pr
     : (node) => {
         let p = node;
         while ((p = p.parentNode) !== null) {
-            if ((0, guards_js_1.hasTag)(p, 'LABEL')) {
+            if ((0, guards_js_1.hasTag)(p, 'label')) {
                 return p;
             }
         }
@@ -68,7 +68,7 @@ function default_1(app, opts) {
     const options = Object.assign({
         obscureInputNumbers: true,
         obscureInputEmails: true,
-        defaultInputMode: 0 /* Plain */,
+        defaultInputMode: 1 /* InputMode.Obscured */,
         obscureInputDates: false,
     }, opts);
     function sendInputTarget(id, node) {
@@ -81,22 +81,22 @@ function default_1(app, opts) {
         let value = node.value;
         let inputMode = options.defaultInputMode;
         if (node.type === 'password' || app.sanitizer.isHidden(id)) {
-            inputMode = 2 /* Hidden */;
+            inputMode = 2 /* InputMode.Hidden */;
         }
         else if (app.sanitizer.isObscured(id) ||
-            (inputMode === 0 /* Plain */ &&
+            (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 /* Obscured */;
+            inputMode = 1 /* InputMode.Obscured */;
         }
         let mask = 0;
         switch (inputMode) {
-            case 2 /* Hidden */:
+            case 2 /* InputMode.Hidden */:
                 mask = -1;
                 value = '';
                 break;
-            case 1 /* Obscured */:
+            case 1 /* InputMode.Obscured */:
                 mask = value.length;
                 value = '';
                 break;
@@ -115,11 +115,7 @@ function default_1(app, opts) {
         inputValues.forEach((value, id) => {
             const node = app.nodes.getNode(id);
             if (!node)
-                return;
-            if (!isTextEditable(node)) {
-                inputValues.delete(id);
-                return;
-            }
+                return inputValues.delete(id);
             if (value !== node.value) {
                 inputValues.set(id, node.value);
                 if (!registeredTargets.has(id)) {
@@ -132,11 +128,7 @@ function default_1(app, opts) {
         checkableValues.forEach((checked, id) => {
             const node = app.nodes.getNode(id);
             if (!node)
-                return;
-            if (!isCheckable(node)) {
-                checkableValues.delete(id);
-                return;
-            }
+                return checkableValues.delete(id);
             if (checked !== node.checked) {
                 checkableValues.set(id, node.checked);
                 app.send((0, messages_gen_js_1.SetInputChecked)(id, node.checked));
@@ -150,7 +142,7 @@ function default_1(app, opts) {
             return;
         }
         // TODO: support multiple select (?): use selectedOptions; Need send target?
-        if ((0, guards_js_1.hasTag)(node, 'SELECT')) {
+        if ((0, guards_js_1.hasTag)(node, 'select')) {
             sendInputValue(id, node);
             app.attachEventListener(node, 'change', () => {
                 sendInputValue(id, node);

package/cjs/modules/mouse.js

@@ -4,25 +4,15 @@ const guards_js_1 = require("../app/guards.js");
 const utils_js_1 = require("../utils.js");
 const messages_gen_js_1 = require("../app/messages.gen.js");
 const input_js_1 = require("./input.js");
+const finder_1 = require("@medv/finder");
 function _getSelector(target, document) {
-    let el = target;
-    let selector = null;
-    do {
-        if (el.id) {
-            return `#${el.id}` + (selector ? ` > ${selector}` : '');
-        }
-        selector =
-            el.className
-                .split(' ')
-                .map((cn) => cn.trim())
-                .filter((cn) => cn !== '')
-                .reduce((sel, cn) => `${sel}.${cn}`, el.tagName.toLowerCase()) +
-                (selector ? ` > ${selector}` : '');
-        if (el === document.body) {
-            return selector;
-        }
-        el = el.parentElement;
-    } while (el !== document.body && el !== null);
+    const selector = (0, finder_1.finder)(target, {
+        root: document.body,
+        seedMinLength: 3,
+        optimizedMinLength: 2,
+        threshold: 1000,
+        maxNumberOfTries: 10000,
+    });
     return selector;
 }
 function isClickable(element) {
@@ -80,7 +70,7 @@ function default_1(app) {
         if (dl !== null) {
             return dl;
         }
-        if ((0, guards_js_1.hasTag)(target, 'INPUT')) {
+        if ((0, guards_js_1.hasTag)(target, 'input')) {
             return (0, input_js_1.getInputLabel)(target);
         }
         if (isClickable(target)) {

package/cjs/modules/network.d.ts

@@ -0,0 +1,28 @@
+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/cjs/modules/network.js

@@ -0,0 +1,203 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const messages_gen_js_1 = require("../app/messages.gen.js");
+const utils_js_1 = require("../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';
+}
+function default_1(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((0, messages_gen_js_1.NetworkRequest)('fetch', method, String(reqResInfo.url), stringify(reqResInfo.request), stringify(reqResInfo.response), r.status, startTime + (0, utils_js_1.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((0, messages_gen_js_1.NetworkRequest)('xhr', method, String(reqResInfo.url), stringify(reqResInfo.request), stringify(reqResInfo.response), xhr.status, startTime + (0, utils_js_1.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);
+    };
+    /* ====== <> ====== */
+}
+exports.default = default_1;

package/cjs/modules/timing.js

@@ -10,7 +10,7 @@ function getPaintBlocks(resources) {
     for (let i = 0; i < elements.length; i++) {
         const element = elements[i];
         let src = '';
-        if ((0, guards_js_1.hasTag)(element, 'IMG')) {
+        if ((0, guards_js_1.hasTag)(element, 'img')) {
             src = element.currentSrc || element.src;
         }
         if (!src) {
@@ -75,7 +75,7 @@ function default_1(app, opts) {
         if (resources !== null) {
             resources[entry.name] = entry.startTime + entry.duration;
         }
-        app.send((0, messages_gen_js_1.ResourceTiming)(entry.startTime + performance.timing.navigationStart, entry.duration, entry.responseStart && entry.startTime ? entry.responseStart - entry.startTime : 0, entry.transferSize > entry.encodedBodySize ? entry.transferSize - entry.encodedBodySize : 0, entry.encodedBodySize || 0, entry.decodedBodySize || 0, entry.name, entry.initiatorType));
+        app.send((0, messages_gen_js_1.ResourceTiming)(entry.startTime + (0, utils_js_1.getTimeOrigin)(), entry.duration, entry.responseStart && entry.startTime ? entry.responseStart - entry.startTime : 0, entry.transferSize > entry.encodedBodySize ? entry.transferSize - entry.encodedBodySize : 0, entry.encodedBodySize || 0, entry.decodedBodySize || 0, entry.name, entry.initiatorType));
     }
     const observer = new PerformanceObserver((list) => list.getEntries().forEach(resourceTiming));
     let prevSessionID;
@@ -112,7 +112,11 @@ function default_1(app, opts) {
             }
             if (performance.timing.loadEventEnd || performance.now() > 30000) {
                 pageLoadTimingSent = true;
-                const { navigationStart, requestStart, responseStart, responseEnd, domContentLoadedEventStart, domContentLoadedEventEnd, loadEventStart, loadEventEnd, } = performance.timing;
+                const { 
+                // should be ok to use here, (https://github.com/mdn/content/issues/4713)
+                // since it is compared with the values obtained on the page load (before any possible sleep state)
+                // deprecated though
+                navigationStart, requestStart, responseStart, responseEnd, domContentLoadedEventStart, domContentLoadedEventEnd, loadEventStart, loadEventEnd, } = performance.timing;
                 app.send((0, messages_gen_js_1.PageLoadTiming)(requestStart - navigationStart || 0, responseStart - navigationStart || 0, responseEnd - navigationStart || 0, domContentLoadedEventStart - navigationStart || 0, domContentLoadedEventEnd - navigationStart || 0, loadEventStart - navigationStart || 0, loadEventEnd - navigationStart || 0, firstPaint, firstContentfulPaint));
             }
         }, 30);

package/cjs/modules/viewport.js

@@ -5,12 +5,14 @@ const messages_gen_js_1 = require("../app/messages.gen.js");
 function default_1(app) {
     let url, width, height;
     let navigationStart;
+    let referrer = document.referrer;
     const sendSetPageLocation = app.safe(() => {
         const { URL } = document;
         if (URL !== url) {
             url = URL;
-            app.send((0, messages_gen_js_1.SetPageLocation)(url, document.referrer, navigationStart));
+            app.send((0, messages_gen_js_1.SetPageLocation)(url, referrer, navigationStart));
             navigationStart = 0;
+            referrer = url;
         }
     });
     const sendSetViewportSize = app.safe(() => {

package/cjs/vendors/finder/finder.d.ts

@@ -1,4 +1,4 @@
-export declare type Options = {
+export type Options = {
     root: Element;
     idName: (name: string) => boolean;
     className: (name: string) => boolean;

package/jest.config.js

@@ -0,0 +1,11 @@
+/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
+const config = {
+  preset: 'ts-jest',
+  testEnvironment: 'jsdom',
+  // .js file extension fix
+  moduleNameMapper: {
+    '(.+)\\.js': '$1',
+  },
+}
+
+export default config

package/lib/app/guards.d.ts

@@ -4,18 +4,17 @@ export declare function isElementNode(node: Node): node is Element;
 export declare function isTextNode(node: Node): node is Text;
 export declare function isDocument(node: Node): node is Document;
 export declare function isRootNode(node: Node): node is Document | DocumentFragment;
-declare type TagTypeMap = {
-    HTML: HTMLHtmlElement;
-    BODY: HTMLBodyElement;
-    IMG: HTMLImageElement;
-    INPUT: HTMLInputElement;
-    TEXTAREA: HTMLTextAreaElement;
-    SELECT: HTMLSelectElement;
-    LABEL: HTMLLabelElement;
-    IFRAME: HTMLIFrameElement;
-    STYLE: HTMLStyleElement;
-    style: SVGStyleElement;
-    LINK: HTMLLinkElement;
+type TagTypeMap = {
+    html: HTMLHtmlElement;
+    body: HTMLBodyElement;
+    img: HTMLImageElement;
+    input: HTMLInputElement;
+    textarea: HTMLTextAreaElement;
+    select: HTMLSelectElement;
+    label: HTMLLabelElement;
+    iframe: HTMLIFrameElement;
+    style: HTMLStyleElement | SVGStyleElement;
+    link: HTMLLinkElement;
 };
 export declare function hasTag<T extends keyof TagTypeMap>(el: Node, tagName: T): el is TagTypeMap[typeof tagName];
 export {};

package/lib/app/guards.js

@@ -18,5 +18,6 @@ export function isRootNode(node) {
     return node.nodeType === Node.DOCUMENT_NODE || node.nodeType === Node.DOCUMENT_FRAGMENT_NODE;
 }
 export function hasTag(el, tagName) {
-    return el.nodeName === tagName;
+    // @ts-ignore
+    return el.localName === tagName;
 }

package/lib/app/index.d.ts

@@ -22,19 +22,19 @@ interface OnStartInfo {
     userUUID: string;
 }
 declare const CANCELED: "canceled";
-declare type SuccessfulStart = OnStartInfo & {
+type SuccessfulStart = OnStartInfo & {
     success: true;
 };
-declare type UnsuccessfulStart = {
+type UnsuccessfulStart = {
     reason: typeof CANCELED | string;
     success: false;
 };
 declare const UnsuccessfulStart: (reason: string) => UnsuccessfulStart;
 declare const SuccessfulStart: (body: OnStartInfo) => SuccessfulStart;
-export declare type StartPromiseReturn = SuccessfulStart | UnsuccessfulStart;
-declare type StartCallback = (i: OnStartInfo) => void;
-declare type CommitCallback = (messages: Array<Message>) => void;
-declare type AppOptions = {
+export type StartPromiseReturn = SuccessfulStart | UnsuccessfulStart;
+type StartCallback = (i: OnStartInfo) => void;
+type CommitCallback = (messages: Array<Message>) => void;
+type AppOptions = {
     revID: string;
     node_id: string;
     session_reset_key: string;
@@ -51,7 +51,7 @@ declare type AppOptions = {
     sessionStorage: Storage | null;
     onStart?: StartCallback;
 } & WebworkerOptions & SessOptions;
-export declare type Options = AppOptions & ObserverOptions & SanitizerOptions;
+export type Options = AppOptions & ObserverOptions & SanitizerOptions;
 export declare const DEFAULT_INGEST_POINT = "https://api.openreplay.com/ingest";
 export default class App {
     readonly nodes: Nodes;
@@ -75,6 +75,7 @@ export default class App {
     private readonly worker?;
     constructor(projectKey: string, sessionToken: string | undefined, options: Partial<Options>);
     private _debug;
+    private _usingOldFetchPlugin;
     send(message: Message, urgent?: boolean): void;
     private commit;
     private delay;
@@ -100,7 +101,9 @@ export default class App {
     };
     getSessionToken(): string | undefined;
     getSessionID(): string | undefined;
-    getSessionURL(): string | undefined;
+    getSessionURL(options?: {
+        withCurrentTime?: boolean;
+    }): string | undefined;
     getHost(): string;
     getProjectKey(): string;
     getBaseHref(): string;