@openreplay/tracker 3.6.1 → 3.6.5

package/lib/modules/mouse.js

@@ -1,8 +1,8 @@
-import { hasTag, isSVGElement, isDocument } from '../app/guards.js';
+import { hasTag, isSVGElement } from '../app/guards.js';
 import { normSpaces, hasOpenreplayAttribute, getLabelAttribute } from '../utils.js';
-import { MouseMove, MouseClick } from '../app/messages.gen.js';
+import { MouseMove, MouseClick } from '../common/messages.js';
 import { getInputLabel } from './input.js';
-function _getSelector(target, document) {
+function _getSelector(target) {
     let el = target;
     let selector = null;
     do {
@@ -32,16 +32,16 @@ function isClickable(element) {
         element.onclick != null ||
         element.getAttribute('role') === 'button');
     //|| element.className.includes("btn")
-    // MBTODO: intersept addEventListener
+    // MBTODO: intersect addEventListener
 }
-//TODO: fix (typescript is not sure about target variable after assignation of svg)
-function getTarget(target, document) {
+//TODO: fix (typescript doesn't allow work when the guard is inside the function)
+function getTarget(target) {
     if (target instanceof Element) {
-        return _getTarget(target, document);
+        return _getTarget(target);
     }
     return null;
 }
-function _getTarget(target, document) {
+function _getTarget(target) {
     let element = target;
     while (element !== null && element !== document.documentElement) {
         if (hasOpenreplayAttribute(element, 'masked')) {
@@ -104,46 +104,37 @@ export default function (app) {
     });
     const sendMouseMove = () => {
         if (mousePositionChanged) {
-            app.send(MouseMove(mousePositionX, mousePositionY));
+            app.send(new MouseMove(mousePositionX, mousePositionY));
             mousePositionChanged = false;
         }
     };
-    const patchDocument = (document) => {
-        const selectorMap = {};
-        function getSelector(id, target) {
-            return (selectorMap[id] = selectorMap[id] || _getSelector(target, document));
+    const selectorMap = {};
+    function getSelector(id, target) {
+        return (selectorMap[id] = selectorMap[id] || _getSelector(target));
+    }
+    app.attachEventListener(document.documentElement, 'mouseover', (e) => {
+        const target = getTarget(e.target);
+        if (target !== mouseTarget) {
+            mouseTarget = target;
+            mouseTargetTime = performance.now();
         }
-        app.attachEventListener(document.documentElement, 'mouseover', (e) => {
-            const target = getTarget(e.target, document);
-            if (target !== mouseTarget) {
-                mouseTarget = target;
-                mouseTargetTime = performance.now();
-            }
-        });
-        app.attachEventListener(document, 'mousemove', (e) => {
-            const { top, left } = app.observer.getDocumentOffset(document);
-            mousePositionX = e.clientX + left;
-            mousePositionY = e.clientY + top;
-            mousePositionChanged = true;
-        }, false);
-        app.attachEventListener(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), getSelector(id, target)), true);
-            }
-            mouseTarget = null;
-        });
-    };
-    app.nodes.attachNodeCallback((node) => {
-        if (isDocument(node)) {
-            patchDocument(node);
+    });
+    app.attachEventListener(document, 'mousemove', (e) => {
+        mousePositionX = e.clientX;
+        mousePositionY = e.clientY;
+        mousePositionChanged = true;
+    }, false);
+    app.attachEventListener(document, 'click', (e) => {
+        const target = getTarget(e.target);
+        if ((!e.clientX && !e.clientY) || target === null) {
+            return;
         }
+        const id = app.nodes.getID(target);
+        if (id !== undefined) {
+            sendMouseMove();
+            app.send(new MouseClick(id, mouseTarget === target ? Math.round(performance.now() - mouseTargetTime) : 0, getTargetLabel(target), getSelector(id, target)), true);
+        }
+        mouseTarget = null;
     });
-    patchDocument(document);
     app.ticker.attach(sendMouseMove, 10);
 }

package/lib/modules/performance.js

@@ -1,5 +1,5 @@
 import { IN_BROWSER } from '../utils.js';
-import { PerformanceTrack } from '../app/messages.gen.js';
+import { PerformanceTrack } from '../common/messages.js';
 const perf = IN_BROWSER && 'performance' in window && 'memory' in performance // works in Chrome only
     ? performance
     : { memory: {} };
@@ -31,7 +31,7 @@ export default function (app, opts) {
         if (frames === undefined || ticks === undefined) {
             return;
         }
-        app.send(PerformanceTrack(frames, ticks, perf.memory.totalJSHeapSize || 0, perf.memory.usedJSHeapSize || 0));
+        app.send(new PerformanceTrack(frames, ticks, perf.memory.totalJSHeapSize || 0, perf.memory.usedJSHeapSize || 0));
         ticks = frames = document.hidden ? -1 : 0;
     };
     app.attachStartCallback(() => {

package/lib/modules/scroll.js

@@ -1,14 +1,9 @@
-import { SetViewportScroll, SetNodeScroll } from '../app/messages.gen.js';
-import { isElementNode, isRootNode } from '../app/guards.js';
+import { SetViewportScroll, SetNodeScroll } from '../common/messages.js';
+import { isElementNode } from '../app/guards.js';
 export default function (app) {
     let documentScroll = false;
     const nodeScroll = new Map();
-    function setNodeScroll(target) {
-        if (target instanceof Element) {
-            nodeScroll.set(target, [target.scrollLeft, target.scrollTop]);
-        }
-    }
-    const sendSetViewportScroll = app.safe(() => app.send(SetViewportScroll(window.pageXOffset ||
+    const sendSetViewportScroll = app.safe(() => app.send(new SetViewportScroll(window.pageXOffset ||
         (document.documentElement && document.documentElement.scrollLeft) ||
         (document.body && document.body.scrollLeft) ||
         0, window.pageYOffset ||
@@ -18,7 +13,7 @@ export default function (app) {
     const sendSetNodeScroll = app.safe((s, node) => {
         const id = app.nodes.getID(node);
         if (id !== undefined) {
-            app.send(SetNodeScroll(id, s[0], s[1]));
+            app.send(new SetNodeScroll(id, s[0], s[1]));
         }
     });
     app.attachStartCallback(sendSetViewportScroll);
@@ -30,20 +25,16 @@ export default function (app) {
         if (isStart && isElementNode(node) && node.scrollLeft + node.scrollTop > 0) {
             nodeScroll.set(node, [node.scrollLeft, node.scrollTop]);
         }
-        else if (isRootNode(node)) {
-            // scroll is not-composed event (https://javascript.info/shadow-dom-events)
-            app.attachEventListener(node, 'scroll', (e) => {
-                setNodeScroll(e.target);
-            });
-        }
     });
-    app.attachEventListener(document, 'scroll', (e) => {
+    app.attachEventListener(window, 'scroll', (e) => {
         const target = e.target;
         if (target === document) {
             documentScroll = true;
             return;
         }
-        setNodeScroll(target);
+        if (target instanceof Element) {
+            nodeScroll.set(target, [target.scrollLeft, target.scrollTop]);
+        }
     });
     app.ticker.attach(() => {
         if (documentScroll) {

package/lib/modules/timing.js

@@ -1,6 +1,6 @@
 import { hasTag } from '../app/guards.js';
 import { isURL } from '../utils.js';
-import { ResourceTiming, PageLoadTiming, PageRenderTiming } from '../app/messages.gen.js';
+import { ResourceTiming, PageLoadTiming, PageRenderTiming } from '../common/messages.js';
 function getPaintBlocks(resources) {
     const paintBlocks = [];
     const elements = document.getElementsByTagName('*');
@@ -73,7 +73,7 @@ export default function (app, opts) {
         if (resources !== null) {
             resources[entry.name] = entry.startTime + entry.duration;
         }
-        app.send(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(new 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));
     }
     const observer = new PerformanceObserver((list) => list.getEntries().forEach(resourceTiming));
     let prevSessionID;
@@ -111,7 +111,7 @@ export default function (app, opts) {
             if (performance.timing.loadEventEnd || performance.now() > 30000) {
                 pageLoadTimingSent = true;
                 const { navigationStart, requestStart, responseStart, responseEnd, domContentLoadedEventStart, domContentLoadedEventEnd, loadEventStart, loadEventEnd, } = performance.timing;
-                app.send(PageLoadTiming(requestStart - navigationStart || 0, responseStart - navigationStart || 0, responseEnd - navigationStart || 0, domContentLoadedEventStart - navigationStart || 0, domContentLoadedEventEnd - navigationStart || 0, loadEventStart - navigationStart || 0, loadEventEnd - navigationStart || 0, firstPaint, firstContentfulPaint));
+                app.send(new 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);
     }
@@ -146,7 +146,7 @@ export default function (app, opts) {
                     ? Math.max(interactiveWindowStartTime, firstContentfulPaint, performance.timing.domContentLoadedEventEnd - performance.timing.navigationStart ||
                         0)
                     : 0;
-                app.send(PageRenderTiming(speedIndex, firstContentfulPaint > visuallyComplete ? firstContentfulPaint : visuallyComplete, timeToInteractive));
+                app.send(new PageRenderTiming(speedIndex, firstContentfulPaint > visuallyComplete ? firstContentfulPaint : visuallyComplete, timeToInteractive));
             }
         });
     }

package/lib/modules/viewport.js

@@ -1,4 +1,4 @@
-import { SetPageLocation, SetViewportSize, SetPageVisibility } from '../app/messages.gen.js';
+import { SetPageLocation, SetViewportSize, SetPageVisibility } from '../common/messages.js';
 export default function (app) {
     let url, width, height;
     let navigationStart = performance.timing.navigationStart;
@@ -6,7 +6,7 @@ export default function (app) {
         const { URL } = document;
         if (URL !== url) {
             url = URL;
-            app.send(SetPageLocation(url, document.referrer, navigationStart));
+            app.send(new SetPageLocation(url, document.referrer, navigationStart));
             navigationStart = 0;
         }
     });
@@ -15,12 +15,12 @@ export default function (app) {
         if (innerWidth !== width || innerHeight !== height) {
             width = innerWidth;
             height = innerHeight;
-            app.send(SetViewportSize(width, height));
+            app.send(new SetViewportSize(width, height));
         }
     });
     const sendSetPageVisibility = document.hidden === undefined
         ? Function.prototype
-        : app.safe(() => app.send(SetPageVisibility(document.hidden)));
+        : app.safe(() => app.send(new SetPageVisibility(document.hidden)));
     app.attachStartCallback(() => {
         url = '';
         width = height = -1;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@openreplay/tracker",
   "description": "The OpenReplay tracker main package",
-  "version": "3.6.1",
+  "version": "3.6.5",
   "keywords": [
     "logging",
     "replay"
@@ -14,14 +14,15 @@
   "type": "module",
   "main": "./lib/index.js",
   "scripts": {
-    "lint": "eslint src --ext .ts,.js --fix --quiet",
+    "lint": "eslint src --ext .ts,.js --fix",
     "clean": "rm -Rf build && rm -Rf lib && rm -Rf cjs",
     "tscRun": "tsc -b src/main && tsc -b src/webworker && tsc --project src/main/tsconfig-cjs.json",
     "rollup": "rollup --config rollup.config.js",
     "compile": "node --experimental-modules --experimental-json-modules scripts/compile.cjs",
     "build": "npm run clean && npm run tscRun && npm run rollup && npm run compile",
     "prepare": "cd ../../ && husky install tracker/.husky/",
-    "lint-front": "lint-staged"
+    "lint-front": "lint-staged",
+    "pret": "prettier src --write"
   },
   "devDependencies": {
     "@babel/core": "^7.10.2",

package/.prettierignore

@@ -1 +0,0 @@
-*.gen.ts

package/cjs/app/messages.d.ts

@@ -1,52 +0,0 @@
-import * as Messages from '../common/messages.gen.js';
-export { default } from '../common/messages.gen.js';
-export declare function BatchMetadata(version: number, pageNo: number, firstIndex: number, timestamp: number, location: string): Messages.BatchMetadata;
-export declare function PartitionedMessage(partNo: number, partTotal: number): Messages.PartitionedMessage;
-export declare function Timestamp(timestamp: number): Messages.Timestamp;
-export declare function SetPageLocation(url: string, referrer: string, navigationStart: number): Messages.SetPageLocation;
-export declare function SetViewportSize(width: number, height: number): Messages.SetViewportSize;
-export declare function SetViewportScroll(x: number, y: number): Messages.SetViewportScroll;
-export declare function CreateDocument(): Messages.CreateDocument;
-export declare function CreateElementNode(id: number, parentID: number, index: number, tag: string, svg: boolean): Messages.CreateElementNode;
-export declare function CreateTextNode(id: number, parentID: number, index: number): Messages.CreateTextNode;
-export declare function MoveNode(id: number, parentID: number, index: number): Messages.MoveNode;
-export declare function RemoveNode(id: number): Messages.RemoveNode;
-export declare function SetNodeAttribute(id: number, name: string, value: string): Messages.SetNodeAttribute;
-export declare function RemoveNodeAttribute(id: number, name: string): Messages.RemoveNodeAttribute;
-export declare function SetNodeData(id: number, data: string): Messages.SetNodeData;
-export declare function SetNodeScroll(id: number, x: number, y: number): Messages.SetNodeScroll;
-export declare function SetInputTarget(id: number, label: string): Messages.SetInputTarget;
-export declare function SetInputValue(id: number, value: string, mask: number): Messages.SetInputValue;
-export declare function SetInputChecked(id: number, checked: boolean): Messages.SetInputChecked;
-export declare function MouseMove(x: number, y: number): Messages.MouseMove;
-export declare function ConsoleLog(level: string, value: string): Messages.ConsoleLog;
-export declare function PageLoadTiming(requestStart: number, responseStart: number, responseEnd: number, domContentLoadedEventStart: number, domContentLoadedEventEnd: number, loadEventStart: number, loadEventEnd: number, firstPaint: number, firstContentfulPaint: number): Messages.PageLoadTiming;
-export declare function PageRenderTiming(speedIndex: number, visuallyComplete: number, timeToInteractive: number): Messages.PageRenderTiming;
-export declare function JSException(name: string, message: string, payload: string): Messages.JSException;
-export declare function RawCustomEvent(name: string, payload: string): Messages.RawCustomEvent;
-export declare function UserID(id: string): Messages.UserID;
-export declare function UserAnonymousID(id: string): Messages.UserAnonymousID;
-export declare function Metadata(key: string, value: string): Messages.Metadata;
-export declare function CSSInsertRule(id: number, rule: string, index: number): Messages.CSSInsertRule;
-export declare function CSSDeleteRule(id: number, index: number): Messages.CSSDeleteRule;
-export declare function Fetch(method: string, url: string, request: string, response: string, status: number, timestamp: number, duration: number): Messages.Fetch;
-export declare function Profiler(name: string, duration: number, args: string, result: string): Messages.Profiler;
-export declare function OTable(key: string, value: string): Messages.OTable;
-export declare function StateAction(type: string): Messages.StateAction;
-export declare function Redux(action: string, state: string, duration: number): Messages.Redux;
-export declare function Vuex(mutation: string, state: string): Messages.Vuex;
-export declare function MobX(type: string, payload: string): Messages.MobX;
-export declare function NgRx(action: string, state: string, duration: number): Messages.NgRx;
-export declare function GraphQL(operationKind: string, operationName: string, variables: string, response: string): Messages.GraphQL;
-export declare function PerformanceTrack(frames: number, ticks: number, totalJSHeapSize: number, usedJSHeapSize: number): Messages.PerformanceTrack;
-export declare function ResourceTiming(timestamp: number, duration: number, ttfb: number, headerSize: number, encodedBodySize: number, decodedBodySize: number, url: string, initiator: string): Messages.ResourceTiming;
-export declare function ConnectionInformation(downlink: number, type: string): Messages.ConnectionInformation;
-export declare function SetPageVisibility(hidden: boolean): Messages.SetPageVisibility;
-export declare function LongTask(timestamp: number, duration: number, context: number, containerType: number, containerSrc: string, containerId: string, containerName: string): Messages.LongTask;
-export declare function SetNodeAttributeURLBased(id: number, name: string, value: string, baseURL: string): Messages.SetNodeAttributeURLBased;
-export declare function SetCSSDataURLBased(id: number, data: string, baseURL: string): Messages.SetCSSDataURLBased;
-export declare function TechnicalInfo(type: string, value: string): Messages.TechnicalInfo;
-export declare function CustomIssue(name: string, payload: string): Messages.CustomIssue;
-export declare function CSSInsertRuleURLBased(id: number, rule: string, index: number, baseURL: string): Messages.CSSInsertRuleURLBased;
-export declare function MouseClick(id: number, hesitationTime: number, label: string, selector: string): Messages.MouseClick;
-export declare function CreateIFrameDocument(frameID: number, id: number): Messages.CreateIFrameDocument;

package/cjs/app/messages.gen.d.ts

@@ -1,57 +0,0 @@
-import * as Messages from '../common/messages.gen.js';
-export { default } from '../common/messages.gen.js';
-export declare function BatchMetadata(version: number, pageNo: number, firstIndex: number, timestamp: number, location: string): Messages.BatchMetadata;
-export declare function PartitionedMessage(partNo: number, partTotal: number): Messages.PartitionedMessage;
-export declare function Timestamp(timestamp: number): Messages.Timestamp;
-export declare function SetPageLocation(url: string, referrer: string, navigationStart: number): Messages.SetPageLocation;
-export declare function SetViewportSize(width: number, height: number): Messages.SetViewportSize;
-export declare function SetViewportScroll(x: number, y: number): Messages.SetViewportScroll;
-export declare function CreateDocument(): Messages.CreateDocument;
-export declare function CreateElementNode(id: number, parentID: number, index: number, tag: string, svg: boolean): Messages.CreateElementNode;
-export declare function CreateTextNode(id: number, parentID: number, index: number): Messages.CreateTextNode;
-export declare function MoveNode(id: number, parentID: number, index: number): Messages.MoveNode;
-export declare function RemoveNode(id: number): Messages.RemoveNode;
-export declare function SetNodeAttribute(id: number, name: string, value: string): Messages.SetNodeAttribute;
-export declare function RemoveNodeAttribute(id: number, name: string): Messages.RemoveNodeAttribute;
-export declare function SetNodeData(id: number, data: string): Messages.SetNodeData;
-export declare function SetNodeScroll(id: number, x: number, y: number): Messages.SetNodeScroll;
-export declare function SetInputTarget(id: number, label: string): Messages.SetInputTarget;
-export declare function SetInputValue(id: number, value: string, mask: number): Messages.SetInputValue;
-export declare function SetInputChecked(id: number, checked: boolean): Messages.SetInputChecked;
-export declare function MouseMove(x: number, y: number): Messages.MouseMove;
-export declare function ConsoleLog(level: string, value: string): Messages.ConsoleLog;
-export declare function PageLoadTiming(requestStart: number, responseStart: number, responseEnd: number, domContentLoadedEventStart: number, domContentLoadedEventEnd: number, loadEventStart: number, loadEventEnd: number, firstPaint: number, firstContentfulPaint: number): Messages.PageLoadTiming;
-export declare function PageRenderTiming(speedIndex: number, visuallyComplete: number, timeToInteractive: number): Messages.PageRenderTiming;
-export declare function JSException(name: string, message: string, payload: string): Messages.JSException;
-export declare function RawCustomEvent(name: string, payload: string): Messages.RawCustomEvent;
-export declare function UserID(id: string): Messages.UserID;
-export declare function UserAnonymousID(id: string): Messages.UserAnonymousID;
-export declare function Metadata(key: string, value: string): Messages.Metadata;
-export declare function CSSInsertRule(id: number, rule: string, index: number): Messages.CSSInsertRule;
-export declare function CSSDeleteRule(id: number, index: number): Messages.CSSDeleteRule;
-export declare function Fetch(method: string, url: string, request: string, response: string, status: number, timestamp: number, duration: number): Messages.Fetch;
-export declare function Profiler(name: string, duration: number, args: string, result: string): Messages.Profiler;
-export declare function OTable(key: string, value: string): Messages.OTable;
-export declare function StateAction(type: string): Messages.StateAction;
-export declare function Redux(action: string, state: string, duration: number): Messages.Redux;
-export declare function Vuex(mutation: string, state: string): Messages.Vuex;
-export declare function MobX(type: string, payload: string): Messages.MobX;
-export declare function NgRx(action: string, state: string, duration: number): Messages.NgRx;
-export declare function GraphQL(operationKind: string, operationName: string, variables: string, response: string): Messages.GraphQL;
-export declare function PerformanceTrack(frames: number, ticks: number, totalJSHeapSize: number, usedJSHeapSize: number): Messages.PerformanceTrack;
-export declare function ResourceTiming(timestamp: number, duration: number, ttfb: number, headerSize: number, encodedBodySize: number, decodedBodySize: number, url: string, initiator: string): Messages.ResourceTiming;
-export declare function ConnectionInformation(downlink: number, type: string): Messages.ConnectionInformation;
-export declare function SetPageVisibility(hidden: boolean): Messages.SetPageVisibility;
-export declare function LongTask(timestamp: number, duration: number, context: number, containerType: number, containerSrc: string, containerId: string, containerName: string): Messages.LongTask;
-export declare function SetNodeAttributeURLBased(id: number, name: string, value: string, baseURL: string): Messages.SetNodeAttributeURLBased;
-export declare function SetCSSDataURLBased(id: number, data: string, baseURL: string): Messages.SetCSSDataURLBased;
-export declare function TechnicalInfo(type: string, value: string): Messages.TechnicalInfo;
-export declare function CustomIssue(name: string, payload: string): Messages.CustomIssue;
-export declare function CSSInsertRuleURLBased(id: number, rule: string, index: number, baseURL: string): Messages.CSSInsertRuleURLBased;
-export declare function MouseClick(id: number, hesitationTime: number, label: string, selector: string): Messages.MouseClick;
-export declare function CreateIFrameDocument(frameID: number, id: number): Messages.CreateIFrameDocument;
-export declare function AdoptedSSReplaceURLBased(sheetID: number, text: string, baseURL: string): Messages.AdoptedSSReplaceURLBased;
-export declare function AdoptedSSInsertRuleURLBased(sheetID: number, rule: string, index: number, baseURL: string): Messages.AdoptedSSInsertRuleURLBased;
-export declare function AdoptedSSDeleteRule(sheetID: number, index: number): Messages.AdoptedSSDeleteRule;
-export declare function AdoptedSSAddOwner(sheetID: number, id: number): Messages.AdoptedSSAddOwner;
-export declare function AdoptedSSRemoveOwner(sheetID: number, id: number): Messages.AdoptedSSRemoveOwner;