@openreplay/tracker 5.0.0 → 5.0.1-beta.3

package/CHANGELOG.md

@@ -1,3 +1,8 @@
+## 5.0.1
+
+- Default text input mode is now Obscured
+- Use `@medv/finder` instead of our own implementation of `getSelector` for better clickmaps experience
+
 ## 5.0.0
 
 - Added "tel" to supported input types

package/cjs/app/index.d.ts

@@ -9,6 +9,7 @@ import type { Options as ObserverOptions } from './observer/top_observer.js';
 import type { Options as SanitizerOptions } from './sanitizer.js';
 import type { Options as LoggerOptions } from './logger.js';
 import type { Options as SessOptions } from './session.js';
+import type { Options as NetworkOptions } from '../modules/network.js';
 import type { Options as WebworkerOptions } from '../common/interaction.js';
 export interface StartOptions {
     userID?: string;
@@ -50,6 +51,7 @@ type AppOptions = {
     localStorage: Storage | null;
     sessionStorage: Storage | null;
     onStart?: StartCallback;
+    network?: NetworkOptions;
 } & WebworkerOptions & SessOptions;
 export type Options = AppOptions & ObserverOptions & SanitizerOptions;
 export declare const DEFAULT_INGEST_POINT = "https://api.openreplay.com/ingest";
@@ -69,6 +71,7 @@ export default class App {
     private readonly stopCallbacks;
     private readonly commitCallbacks;
     private readonly options;
+    readonly networkOptions?: NetworkOptions;
     private readonly revID;
     private activityState;
     private readonly version;

package/cjs/app/index.js

@@ -33,10 +33,11 @@ class App {
         this.stopCallbacks = [];
         this.commitCallbacks = [];
         this.activityState = ActivityState.NotActive;
-        this.version = '5.0.0'; // TODO: version compatability check inside each plugin.
+        this.version = '5.0.1-beta.3'; // TODO: version compatability check inside each plugin.
         this._usingOldFetchPlugin = false;
         this.delay = 0;
         this.projectKey = projectKey;
+        this.networkOptions = options.network;
         this.options = Object.assign({
             revID: '',
             node_id: '__openreplay_id',

package/cjs/app/observer/top_observer.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const observer_js_1 = require("./observer.js");
 const guards_js_1 = require("../guards.js");
+const network_js_1 = require("../../modules/network.js");
 const iframe_observer_js_1 = require("./iframe_observer.js");
 const shadow_root_observer_js_1 = require("./shadow_root_observer.js");
 const iframe_offsets_js_1 = require("./iframe_offsets.js");
@@ -67,6 +68,7 @@ class TopObserver extends observer_js_1.default {
             //TODO: more explicit logic
             ) {
                 this.contextsSet.add(currentWin);
+                (0, network_js_1.default)(this.app, this.app.networkOptions, currentWin);
                 //@ts-ignore https://github.com/microsoft/TypeScript/issues/41684
                 this.contextCallbacks.forEach((cb) => cb(currentWin));
             }

package/cjs/index.js

@@ -140,7 +140,7 @@ class API {
             // no-cors issue only with text/plain or not-set Content-Type
             // req.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
             req.send(JSON.stringify({
-                trackerVersion: '5.0.0',
+                trackerVersion: '5.0.1-beta.3',
                 projectKey: options.projectKey,
                 doNotTrack,
                 // TODO: add precise reason (an exact API missing)

package/cjs/modules/input.js

@@ -68,7 +68,7 @@ function default_1(app, opts) {
     const options = Object.assign({
         obscureInputNumbers: true,
         obscureInputEmails: true,
-        defaultInputMode: 0 /* InputMode.Plain */,
+        defaultInputMode: 1 /* InputMode.Obscured */,
         obscureInputDates: false,
     }, opts);
     function sendInputTarget(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) {
@@ -31,6 +21,8 @@ function isClickable(element) {
         tag === 'A' ||
         tag === 'LI' ||
         tag === 'SELECT' ||
+        tag === 'TR' ||
+        tag === 'TH' ||
         element.onclick != null ||
         element.getAttribute('role') === 'button');
     //|| element.className.includes("btn")

package/cjs/modules/network.d.ts

@@ -24,5 +24,5 @@ export interface Options {
     capturePayload: boolean;
     sanitizer?: Sanitizer;
 }
-export default function (app: App, opts?: Partial<Options>): void;
+export default function (app: App, opts?: Partial<Options>, customEnv?: Record<string, any>): void;
 export {};

package/cjs/modules/network.js

@@ -14,7 +14,7 @@ function getXHRRequestDataObject(xhr) {
 function strMethod(method) {
     return typeof method === 'string' ? method.toUpperCase() : 'GET';
 }
-function default_1(app, opts = {}) {
+function default_1(app, opts = {}, customEnv) {
     const options = Object.assign({
         failuresOnly: false,
         ignoreHeaders: ['Cookie', 'Set-Cookie', 'Authorization'],
@@ -65,8 +65,10 @@ function default_1(app, opts = {}) {
         return JSON.stringify(r);
     }
     /* ====== Fetch ====== */
-    const origFetch = window.fetch.bind(window);
-    window.fetch = (input, init = {}) => {
+    const origFetch = customEnv
+        ? customEnv.fetch.bind(customEnv)
+        : window.fetch.bind(window);
+    const trackFetch = (input, init = {}) => {
         if (!(typeof input === 'string' || input instanceof URL) || app.isServiceURL(String(input))) {
             return origFetch(input, init);
         }
@@ -140,10 +142,19 @@ function default_1(app, opts = {}) {
             return response;
         });
     };
+    if (customEnv) {
+        customEnv.fetch = trackFetch;
+    }
+    else {
+        window.fetch = trackFetch;
+    }
     /* ====== <> ====== */
     /* ====== XHR ====== */
-    const nativeOpen = XMLHttpRequest.prototype.open;
-    XMLHttpRequest.prototype.open = function (initMethod, url) {
+    const nativeOpen = customEnv
+        ? customEnv.XMLHttpRequest.prototype.open
+        : XMLHttpRequest.prototype.open;
+    function trackXMLHttpReqOpen(initMethod, url) {
+        // @ts-ignore ??? this -> XMLHttpRequest
         const xhr = this;
         setSessionTokenHeader((name, value) => xhr.setRequestHeader(name, value));
         let startTime = 0;
@@ -182,22 +193,45 @@ function default_1(app, opts = {}) {
         }));
         //TODO: handle error (though it has no Error API nor any useful information)
         //xhr.addEventListener('error', (e) => {})
+        // @ts-ignore ??? this -> XMLHttpRequest
         return nativeOpen.apply(this, arguments);
-    };
+    }
+    if (customEnv) {
+        customEnv.XMLHttpRequest.prototype.open = trackXMLHttpReqOpen.bind(customEnv);
+    }
+    else {
+        XMLHttpRequest.prototype.open = trackXMLHttpReqOpen;
+    }
     const nativeSend = XMLHttpRequest.prototype.send;
-    XMLHttpRequest.prototype.send = function (body) {
+    function trackXHRSend(body) {
+        // @ts-ignore ??? this -> XMLHttpRequest
         const rdo = getXHRRequestDataObject(this);
         rdo.body = body;
+        // @ts-ignore ??? this -> XMLHttpRequest
         return nativeSend.apply(this, arguments);
-    };
+    }
+    if (customEnv) {
+        customEnv.XMLHttpRequest.prototype.send = trackXHRSend.bind(customEnv);
+    }
+    else {
+        XMLHttpRequest.prototype.send = trackXHRSend;
+    }
     const nativeSetRequestHeader = XMLHttpRequest.prototype.setRequestHeader;
-    XMLHttpRequest.prototype.setRequestHeader = function (name, value) {
+    function trackSetReqHeader(name, value) {
         if (!isHIgnored(name)) {
+            // @ts-ignore ??? this -> XMLHttpRequest
             const rdo = getXHRRequestDataObject(this);
             rdo.headers[name] = value;
         }
+        // @ts-ignore ??? this -> XMLHttpRequest
         return nativeSetRequestHeader.apply(this, arguments);
-    };
+    }
+    if (customEnv) {
+        customEnv.XMLHttpRequest.prototype.setRequestHeader = trackSetReqHeader.bind(customEnv);
+    }
+    else {
+        XMLHttpRequest.prototype.setRequestHeader = trackSetReqHeader;
+    }
     /* ====== <> ====== */
 }
 exports.default = default_1;

package/lib/app/index.d.ts

@@ -9,6 +9,7 @@ import type { Options as ObserverOptions } from './observer/top_observer.js';
 import type { Options as SanitizerOptions } from './sanitizer.js';
 import type { Options as LoggerOptions } from './logger.js';
 import type { Options as SessOptions } from './session.js';
+import type { Options as NetworkOptions } from '../modules/network.js';
 import type { Options as WebworkerOptions } from '../common/interaction.js';
 export interface StartOptions {
     userID?: string;
@@ -50,6 +51,7 @@ type AppOptions = {
     localStorage: Storage | null;
     sessionStorage: Storage | null;
     onStart?: StartCallback;
+    network?: NetworkOptions;
 } & WebworkerOptions & SessOptions;
 export type Options = AppOptions & ObserverOptions & SanitizerOptions;
 export declare const DEFAULT_INGEST_POINT = "https://api.openreplay.com/ingest";
@@ -69,6 +71,7 @@ export default class App {
     private readonly stopCallbacks;
     private readonly commitCallbacks;
     private readonly options;
+    readonly networkOptions?: NetworkOptions;
     private readonly revID;
     private activityState;
     private readonly version;

package/lib/app/index.js

@@ -30,10 +30,11 @@ export default class App {
         this.stopCallbacks = [];
         this.commitCallbacks = [];
         this.activityState = ActivityState.NotActive;
-        this.version = '5.0.0'; // TODO: version compatability check inside each plugin.
+        this.version = '5.0.1-beta.3'; // TODO: version compatability check inside each plugin.
         this._usingOldFetchPlugin = false;
         this.delay = 0;
         this.projectKey = projectKey;
+        this.networkOptions = options.network;
         this.options = Object.assign({
             revID: '',
             node_id: '__openreplay_id',

package/lib/app/observer/top_observer.js

@@ -1,5 +1,6 @@
 import Observer from './observer.js';
 import { isElementNode, hasTag } from '../guards.js';
+import Network from '../../modules/network.js';
 import IFrameObserver from './iframe_observer.js';
 import ShadowRootObserver from './shadow_root_observer.js';
 import IFrameOffsets from './iframe_offsets.js';
@@ -65,6 +66,7 @@ export default class TopObserver extends Observer {
             //TODO: more explicit logic
             ) {
                 this.contextsSet.add(currentWin);
+                Network(this.app, this.app.networkOptions, currentWin);
                 //@ts-ignore https://github.com/microsoft/TypeScript/issues/41684
                 this.contextCallbacks.forEach((cb) => cb(currentWin));
             }

package/lib/index.js

@@ -135,7 +135,7 @@ export default class API {
             // no-cors issue only with text/plain or not-set Content-Type
             // req.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
             req.send(JSON.stringify({
-                trackerVersion: '5.0.0',
+                trackerVersion: '5.0.1-beta.3',
                 projectKey: options.projectKey,
                 doNotTrack,
                 // TODO: add precise reason (an exact API missing)

package/lib/modules/input.js

@@ -64,7 +64,7 @@ export default function (app, opts) {
     const options = Object.assign({
         obscureInputNumbers: true,
         obscureInputEmails: true,
-        defaultInputMode: 0 /* InputMode.Plain */,
+        defaultInputMode: 1 /* InputMode.Obscured */,
         obscureInputDates: false,
     }, opts);
     function sendInputTarget(id, node) {

package/lib/modules/mouse.js

@@ -2,25 +2,15 @@ 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) {
-    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 = finder(target, {
+        root: document.body,
+        seedMinLength: 3,
+        optimizedMinLength: 2,
+        threshold: 1000,
+        maxNumberOfTries: 10000,
+    });
     return selector;
 }
 function isClickable(element) {
@@ -29,6 +19,8 @@ function isClickable(element) {
         tag === 'A' ||
         tag === 'LI' ||
         tag === 'SELECT' ||
+        tag === 'TR' ||
+        tag === 'TH' ||
         element.onclick != null ||
         element.getAttribute('role') === 'button');
     //|| element.className.includes("btn")

package/lib/modules/network.d.ts

@@ -24,5 +24,5 @@ export interface Options {
     capturePayload: boolean;
     sanitizer?: Sanitizer;
 }
-export default function (app: App, opts?: Partial<Options>): void;
+export default function (app: App, opts?: Partial<Options>, customEnv?: Record<string, any>): void;
 export {};

package/lib/modules/network.js

@@ -12,7 +12,7 @@ function getXHRRequestDataObject(xhr) {
 function strMethod(method) {
     return typeof method === 'string' ? method.toUpperCase() : 'GET';
 }
-export default function (app, opts = {}) {
+export default function (app, opts = {}, customEnv) {
     const options = Object.assign({
         failuresOnly: false,
         ignoreHeaders: ['Cookie', 'Set-Cookie', 'Authorization'],
@@ -63,8 +63,10 @@ export default function (app, opts = {}) {
         return JSON.stringify(r);
     }
     /* ====== Fetch ====== */
-    const origFetch = window.fetch.bind(window);
-    window.fetch = (input, init = {}) => {
+    const origFetch = customEnv
+        ? customEnv.fetch.bind(customEnv)
+        : window.fetch.bind(window);
+    const trackFetch = (input, init = {}) => {
         if (!(typeof input === 'string' || input instanceof URL) || app.isServiceURL(String(input))) {
             return origFetch(input, init);
         }
@@ -138,10 +140,19 @@ export default function (app, opts = {}) {
             return response;
         });
     };
+    if (customEnv) {
+        customEnv.fetch = trackFetch;
+    }
+    else {
+        window.fetch = trackFetch;
+    }
     /* ====== <> ====== */
     /* ====== XHR ====== */
-    const nativeOpen = XMLHttpRequest.prototype.open;
-    XMLHttpRequest.prototype.open = function (initMethod, url) {
+    const nativeOpen = customEnv
+        ? customEnv.XMLHttpRequest.prototype.open
+        : XMLHttpRequest.prototype.open;
+    function trackXMLHttpReqOpen(initMethod, url) {
+        // @ts-ignore ??? this -> XMLHttpRequest
         const xhr = this;
         setSessionTokenHeader((name, value) => xhr.setRequestHeader(name, value));
         let startTime = 0;
@@ -180,21 +191,44 @@ export default function (app, opts = {}) {
         }));
         //TODO: handle error (though it has no Error API nor any useful information)
         //xhr.addEventListener('error', (e) => {})
+        // @ts-ignore ??? this -> XMLHttpRequest
         return nativeOpen.apply(this, arguments);
-    };
+    }
+    if (customEnv) {
+        customEnv.XMLHttpRequest.prototype.open = trackXMLHttpReqOpen.bind(customEnv);
+    }
+    else {
+        XMLHttpRequest.prototype.open = trackXMLHttpReqOpen;
+    }
     const nativeSend = XMLHttpRequest.prototype.send;
-    XMLHttpRequest.prototype.send = function (body) {
+    function trackXHRSend(body) {
+        // @ts-ignore ??? this -> XMLHttpRequest
         const rdo = getXHRRequestDataObject(this);
         rdo.body = body;
+        // @ts-ignore ??? this -> XMLHttpRequest
         return nativeSend.apply(this, arguments);
-    };
+    }
+    if (customEnv) {
+        customEnv.XMLHttpRequest.prototype.send = trackXHRSend.bind(customEnv);
+    }
+    else {
+        XMLHttpRequest.prototype.send = trackXHRSend;
+    }
     const nativeSetRequestHeader = XMLHttpRequest.prototype.setRequestHeader;
-    XMLHttpRequest.prototype.setRequestHeader = function (name, value) {
+    function trackSetReqHeader(name, value) {
         if (!isHIgnored(name)) {
+            // @ts-ignore ??? this -> XMLHttpRequest
             const rdo = getXHRRequestDataObject(this);
             rdo.headers[name] = value;
         }
+        // @ts-ignore ??? this -> XMLHttpRequest
         return nativeSetRequestHeader.apply(this, arguments);
-    };
+    }
+    if (customEnv) {
+        customEnv.XMLHttpRequest.prototype.setRequestHeader = trackSetReqHeader.bind(customEnv);
+    }
+    else {
+        XMLHttpRequest.prototype.setRequestHeader = trackSetReqHeader;
+    }
     /* ====== <> ====== */
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@openreplay/tracker",
   "description": "The OpenReplay tracker main package",
-  "version": "5.0.0",
+  "version": "5.0.1-beta.3",
   "keywords": [
     "logging",
     "replay"
@@ -47,6 +47,7 @@
     "typescript": "^4.9.4"
   },
   "dependencies": {
+    "@medv/finder": "^3.0.0",
     "error-stack-parser": "^2.0.6"
   },
   "engines": {