@openreplay/tracker 5.0.2-beta.1 → 6.0.0

package/lib/modules/mouse.js

@@ -1,15 +1,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 { 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) {
+function _getSelector(target, document, options) {
     const selector = finder(target, {
         root: document.body,
         seedMinLength: 3,
-        optimizedMinLength: 2,
-        threshold: 1000,
-        maxNumberOfTries: 10000,
+        optimizedMinLength: (options === null || options === void 0 ? void 0 : options.minSelectorDepth) || 2,
+        threshold: (options === null || options === void 0 ? void 0 : options.nthThreshold) || 1000,
+        maxNumberOfTries: (options === null || options === void 0 ? void 0 : options.maxOptimiseTries) || 10000,
     });
     return selector;
 }
@@ -24,7 +24,7 @@ function isClickable(element) {
         element.onclick != null ||
         element.getAttribute('role') === 'button');
     //|| element.className.includes("btn")
-    // MBTODO: intersept addEventListener
+    // MBTODO: intercept addEventListener
 }
 //TODO: fix (typescript is not sure about target variable after assignation of svg)
 function getTarget(target, document) {
@@ -64,7 +64,8 @@ function _getTarget(target, document) {
     }
     return target === document.documentElement ? null : target;
 }
-export default function (app) {
+export default function (app, options) {
+    const { disableClickmaps = false } = options || {};
     function getTargetLabel(target) {
         const dl = getLabelAttribute(target);
         if (dl !== null) {
@@ -89,12 +90,40 @@ export default function (app) {
     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 > 3 && acceleration > shakeThreshold) {
+            console.log('Mouse shake detected!');
+            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) {
@@ -103,8 +132,8 @@ export default function (app) {
         }
     };
     const patchDocument = (document, topframe = false) => {
-        function getSelector(id, target) {
-            return (selectorMap[id] = selectorMap[id] || _getSelector(target, document));
+        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
@@ -121,6 +150,12 @@ export default function (app) {
             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);
@@ -130,7 +165,7 @@ export default function (app) {
             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);
+                app.send(MouseClick(id, mouseTarget === target ? Math.round(performance.now() - mouseTargetTime) : 0, getTargetLabel(target), isClickable(target) && !disableClickmaps ? getSelector(id, target, options) : ''), true);
             }
             mouseTarget = null;
         });

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

@@ -1,5 +1,42 @@
 import { NetworkRequest } from '../app/messages.gen.js';
 import { getTimeOrigin } from '../utils.js';
+// Request:
+// declare const enum BodyType {
+//   Blob = "Blob",
+//   ArrayBuffer = "ArrayBuffer",
+//   TypedArray = "TypedArray",
+//   DataView = "DataView",
+//   FormData = "FormData",
+//   URLSearchParams = "URLSearchParams",
+//   Document = "Document", // XHR only
+//   ReadableStream = "ReadableStream", // Fetch only
+//   Literal = "literal",
+//   Unknown = "unk",
+// }
+// XHRResponse body: ArrayBuffer, a Blob, a Document, a JavaScript Object, or a string
+// TODO: extract maximum of useful information from any type of Request/Responce bodies
+// function objectifyBody(body: any): RequestBody {
+//   if (body instanceof Blob) {
+//     return {
+//       body: `<Blob type: ${body.type}>; size: ${body.size}`,
+//       bodyType: BodyType.Blob,
+//     }
+//   }
+//   return {
+//     body,
+//     bodyType: BodyType.Literal,
+//   }
+// }
+function checkCacheByPerformanceTimings(requestUrl) {
+    if (performance) {
+        const timings = performance.getEntriesByName(requestUrl)[0];
+        if (timings) {
+            // @ts-ignore - weird ts typings, please refer to https://developer.mozilla.org/en-US/docs/Web/API/PerformanceNavigationTiming
+            return timings.transferSize === 0 || timings.responseStart - timings.requestStart < 10;
+        }
+    }
+    return false;
+}
 function getXHRRequestDataObject(xhr) {
     // @ts-ignore  this is 3x faster than using Map<XHR, XHRRequestData>
     if (!xhr.__or_req_data__) {
@@ -12,7 +49,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 +100,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 +177,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 +228,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/lib/modules/selection.d.ts

@@ -0,0 +1,7 @@
+import type App from '../app/index.js';
+declare function selection(app: App): void;
+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
+ */

package/lib/modules/selection.js

@@ -0,0 +1,35 @@
+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/timing.js

@@ -73,7 +73,9 @@ export default function (app, opts) {
         if (resources !== null) {
             resources[entry.name] = entry.startTime + entry.duration;
         }
-        app.send(ResourceTiming(entry.startTime + 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));
+        app.send(ResourceTiming(entry.startTime + 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, entry.transferSize, 
+        // @ts-ignore
+        (entry.responseStatus && entry.responseStatus === 304) || entry.transferSize === 0));
     }
     const observer = new PerformanceObserver((list) => list.getEntries().forEach(resourceTiming));
     let prevSessionID;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@openreplay/tracker",
   "description": "The OpenReplay tracker main package",
-  "version": "5.0.2-beta.1",
+  "version": "6.0.0",
   "keywords": [
     "logging",
     "replay"