@openreplay/tracker 3.6.0-beta.0 → 3.6.2

package/lib/modules/exception.js

@@ -1,25 +1,24 @@
-import { JSException } from '../app/messages.gen.js';
+import { JSException } from "../common/messages.js";
 import ErrorStackParser from 'error-stack-parser';
 function getDefaultStack(e) {
-    return [
-        {
+    return [{
             columnNumber: e.colno,
             lineNumber: e.lineno,
             fileName: e.filename,
-            functionName: '',
-            source: '',
-        },
-    ];
+            functionName: "",
+            source: "",
+        }];
 }
 export function getExceptionMessage(error, fallbackStack) {
     let stack = fallbackStack;
     try {
         stack = ErrorStackParser.parse(error);
     }
-    catch (e) { }
-    return JSException(error.name, error.message, JSON.stringify(stack));
+    catch (e) {
+    }
+    return new JSException(error.name, error.message, JSON.stringify(stack));
 }
-export function getExceptionMessageFromEvent(e, context = window) {
+export function getExceptionMessageFromEvent(e) {
     if (e instanceof ErrorEvent) {
         if (e.error instanceof Error) {
             return getExceptionMessage(e.error, getDefaultStack(e));
@@ -30,10 +29,10 @@ export function getExceptionMessageFromEvent(e, context = window) {
                 name = 'Error';
                 message = e.message;
             }
-            return JSException(name, message, JSON.stringify(getDefaultStack(e)));
+            return new JSException(name, message, JSON.stringify(getDefaultStack(e)));
         }
     }
-    else if ('PromiseRejectionEvent' in context && e instanceof context.PromiseRejectionEvent) {
+    else if ('PromiseRejectionEvent' in window && e instanceof PromiseRejectionEvent) {
         if (e.reason instanceof Error) {
             return getExceptionMessage(e.reason, []);
         }
@@ -45,7 +44,7 @@ export function getExceptionMessageFromEvent(e, context = window) {
             catch (_) {
                 message = String(e.reason);
             }
-            return JSException('Unhandled Promise Rejection', message, '[]');
+            return new JSException('Unhandled Promise Rejection', message, '[]');
         }
     }
     return null;
@@ -55,17 +54,13 @@ export default function (app, opts) {
         captureExceptions: true,
     }, opts);
     if (options.captureExceptions) {
-        function patchContext(context) {
-            const handler = (e) => {
-                const msg = getExceptionMessageFromEvent(e, context);
-                if (msg != null) {
-                    app.send(msg);
-                }
-            };
-            app.attachEventListener(context, 'unhandledrejection', handler);
-            app.attachEventListener(context, 'error', handler);
-        }
-        app.observer.attachContextCallback(patchContext);
-        patchContext(window);
+        const handler = (e) => {
+            const msg = getExceptionMessageFromEvent(e);
+            if (msg != null) {
+                app.send(msg);
+            }
+        };
+        app.attachEventListener(window, 'unhandledrejection', (e) => handler(e));
+        app.attachEventListener(window, 'error', (e) => handler(e));
     }
 }

package/lib/modules/img.d.ts

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

package/lib/modules/img.js

@@ -1,6 +1,6 @@
-import { timestamp, isURL } from '../utils.js';
-import { ResourceTiming, SetNodeAttributeURLBased, SetNodeAttribute } from '../app/messages.gen.js';
-import { hasTag } from '../app/guards.js';
+import { timestamp, isURL } from "../utils.js";
+import { ResourceTiming, SetNodeAttributeURLBased, SetNodeAttribute } from "../common/messages.js";
+import { hasTag } from "../app/guards.js";
 function resolveURL(url, location = document.location) {
     url = url.trim();
     if (url.startsWith('/')) {
@@ -16,34 +16,19 @@ function resolveURL(url, location = document.location) {
         return location.origin + location.pathname + url;
     }
 }
-const PLACEHOLDER_SRC = 'https://static.openreplay.com/tracker/placeholder.jpeg';
+const PLACEHOLDER_SRC = "https://static.openreplay.com/tracker/placeholder.jpeg";
 export default function (app) {
     function sendPlaceholder(id, node) {
-        app.send(SetNodeAttribute(id, 'src', PLACEHOLDER_SRC));
+        app.send(new SetNodeAttribute(id, "src", PLACEHOLDER_SRC));
         const { width, height } = node.getBoundingClientRect();
-        if (!node.hasAttribute('width')) {
-            app.send(SetNodeAttribute(id, 'width', String(width)));
+        if (!node.hasAttribute("width")) {
+            app.send(new SetNodeAttribute(id, "width", String(width)));
         }
-        if (!node.hasAttribute('height')) {
-            app.send(SetNodeAttribute(id, 'height', String(height)));
+        if (!node.hasAttribute("height")) {
+            app.send(new SetNodeAttribute(id, "height", String(height)));
         }
     }
-    const sendSrcset = function (id, img) {
-        const { srcset } = img;
-        if (!srcset) {
-            return;
-        }
-        const resolvedSrcset = srcset
-            .split(',')
-            .map((str) => resolveURL(str))
-            .join(',');
-        app.send(SetNodeAttribute(id, 'srcset', resolvedSrcset));
-    };
-    const sendSrc = function (id, img) {
-        const src = img.src;
-        app.send(SetNodeAttributeURLBased(id, 'src', src, app.getBaseHref()));
-    };
-    const sendImgAttrs = app.safe(function () {
+    const sendImgSrc = app.safe(function () {
         const id = app.nodes.getID(this);
         if (id === undefined) {
             return;
@@ -55,44 +40,46 @@ export default function (app) {
         const resolvedSrc = resolveURL(src || ''); // Src type is null sometimes. - is it true?
         if (naturalWidth === 0 && naturalHeight === 0) {
             if (isURL(resolvedSrc)) {
-                app.send(ResourceTiming(timestamp(), 0, 0, 0, 0, 0, resolvedSrc, 'img'));
+                app.send(new ResourceTiming(timestamp(), 0, 0, 0, 0, 0, resolvedSrc, 'img'));
             }
         }
         else if (resolvedSrc.length >= 1e5 || app.sanitizer.isMasked(id)) {
             sendPlaceholder(id, this);
         }
         else {
-            sendSrc(id, this);
-            sendSrcset(id, this);
+            app.send(new SetNodeAttribute(id, 'src', resolvedSrc));
+            if (srcset) {
+                const resolvedSrcset = srcset.split(',').map(str => resolveURL(str)).join(',');
+                app.send(new SetNodeAttribute(id, 'srcset', resolvedSrcset));
+            }
         }
     });
     const observer = new MutationObserver((mutations) => {
         for (const mutation of mutations) {
-            if (mutation.type === 'attributes') {
+            if (mutation.type === "attributes") {
                 const target = mutation.target;
                 const id = app.nodes.getID(target);
                 if (id === undefined) {
                     return;
                 }
-                if (mutation.attributeName === 'src') {
-                    sendSrc(id, target);
+                if (mutation.attributeName === "src") {
+                    const src = target.src;
+                    app.send(new SetNodeAttributeURLBased(id, 'src', src, app.getBaseHref()));
                 }
-                if (mutation.attributeName === 'srcset') {
-                    sendSrcset(id, target);
+                if (mutation.attributeName === "srcset") {
+                    const srcset = target.srcset;
+                    app.send(new SetNodeAttribute(id, 'srcset', srcset));
                 }
             }
         }
     });
-    app.attachStopCallback(() => {
-        observer.disconnect();
-    });
     app.nodes.attachNodeCallback((node) => {
-        if (!hasTag(node, 'IMG')) {
+        if (!hasTag(node, "IMG")) {
             return;
         }
-        app.nodes.attachElementListener('error', node, sendImgAttrs.bind(node));
-        app.nodes.attachElementListener('load', node, sendImgAttrs.bind(node));
-        sendImgAttrs.call(node);
-        observer.observe(node, { attributes: true, attributeFilter: ['src', 'srcset'] });
+        app.nodes.attachElementListener('error', node, sendImgSrc);
+        app.nodes.attachElementListener('load', node, sendImgSrc);
+        sendImgSrc.call(node);
+        observer.observe(node, { attributes: true, attributeFilter: ["src", "srcset"] });
     });
 }

package/lib/modules/input.d.ts

@@ -1,4 +1,4 @@
-import type App from '../app/index.js';
+import type App from "../app/index.js";
 declare type TextEditableElement = HTMLInputElement | HTMLTextAreaElement;
 export declare function getInputLabel(node: TextEditableElement): string;
 export declare const enum InputMode {

package/lib/modules/input.js

@@ -1,18 +1,18 @@
-import { normSpaces, IN_BROWSER, getLabelAttribute, hasOpenreplayAttribute } from '../utils.js';
-import { hasTag } from '../app/guards.js';
-import { SetInputTarget, SetInputValue, SetInputChecked } from '../app/messages.gen.js';
+import { normSpaces, IN_BROWSER, getLabelAttribute, hasOpenreplayAttribute, } from "../utils.js";
+import { hasTag } from "../app/guards.js";
+import { SetInputTarget, SetInputValue, SetInputChecked } from "../common/messages.js";
 const INPUT_TYPES = ['text', 'password', 'email', 'search', 'number', 'range', 'date'];
 function isTextEditable(node) {
-    if (hasTag(node, 'TEXTAREA')) {
+    if (hasTag(node, "TEXTAREA")) {
         return true;
     }
-    if (!hasTag(node, 'INPUT')) {
+    if (!hasTag(node, "INPUT")) {
         return false;
     }
     return INPUT_TYPES.includes(node.type);
 }
 function isCheckable(node) {
-    if (!hasTag(node, 'INPUT')) {
+    if (!hasTag(node, "INPUT")) {
         return false;
     }
     const type = node.type;
@@ -22,7 +22,7 @@ const labelElementFor = IN_BROWSER && 'labels' in HTMLInputElement.prototype
     ? (node) => {
         let p = node;
         while ((p = p.parentNode) !== null) {
-            if (hasTag(p, 'LABEL')) {
+            if (hasTag(p, "LABEL")) {
                 return p;
             }
         }
@@ -34,13 +34,13 @@ const labelElementFor = IN_BROWSER && 'labels' in HTMLInputElement.prototype
     : (node) => {
         let p = node;
         while ((p = p.parentNode) !== null) {
-            if (hasTag(p, 'LABEL')) {
+            if (hasTag(p, "LABEL")) {
                 return p;
             }
         }
         const id = node.id;
         if (id) {
-            const labels = node.ownerDocument.querySelectorAll('label[for="' + id + '"]');
+            const labels = document.querySelectorAll('label[for="' + id + '"]');
             if (labels !== null && labels.length === 1) {
                 return labels[0];
             }
@@ -50,13 +50,12 @@ 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;
+        label = (labelElement && labelElement.innerText)
+            || node.placeholder
+            || node.name
+            || node.id
+            || node.className
+            || node.type;
     }
     return normSpaces(label).slice(0, 100);
 }
@@ -70,7 +69,7 @@ export default function (app, opts) {
     function sendInputTarget(id, node) {
         const label = getInputLabel(node);
         if (label !== '') {
-            app.send(SetInputTarget(id, label));
+            app.send(new SetInputTarget(id, label));
         }
     }
     function sendInputValue(id, node) {
@@ -83,7 +82,8 @@ export default function (app, opts) {
             (inputMode === 0 /* Plain */ &&
                 ((options.obscureInputNumbers && node.type !== 'date' && /\d\d\d\d/.test(value)) ||
                     (options.obscureInputDates && node.type === 'date') ||
-                    (options.obscureInputEmails && (node.type === 'email' || !!~value.indexOf('@')))))) {
+                    (options.obscureInputEmails &&
+                        (node.type === 'email' || !!~value.indexOf('@')))))) {
             inputMode = 1 /* Obscured */;
         }
         let mask = 0;
@@ -97,7 +97,7 @@ export default function (app, opts) {
                 value = '';
                 break;
         }
-        app.send(SetInputValue(id, value, mask));
+        app.send(new SetInputValue(id, value, mask));
     }
     const inputValues = new Map();
     const checkableValues = new Map();
@@ -135,7 +135,7 @@ export default function (app, opts) {
             }
             if (checked !== node.checked) {
                 checkableValues.set(id, node.checked);
-                app.send(SetInputChecked(id, node.checked));
+                app.send(new SetInputChecked(id, node.checked));
             }
         });
     });
@@ -146,9 +146,9 @@ export default function (app, opts) {
             return;
         }
         // TODO: support multiple select (?): use selectedOptions; Need send target?
-        if (hasTag(node, 'SELECT')) {
+        if (hasTag(node, "SELECT")) {
             sendInputValue(id, node);
-            app.attachEventListener(node, 'change', () => {
+            app.attachEventListener(node, "change", () => {
                 sendInputValue(id, node);
             });
         }
@@ -159,7 +159,7 @@ export default function (app, opts) {
         }
         if (isCheckable(node)) {
             checkableValues.set(id, node.checked);
-            app.send(SetInputChecked(id, node.checked));
+            app.send(new SetInputChecked(id, node.checked));
             return;
         }
     }));

package/lib/modules/longtasks.d.ts

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

package/lib/modules/longtasks.js

@@ -0,0 +1,23 @@
+import { LongTask } from "../common/messages.js";
+;
+;
+export default function (app) {
+    if (!('PerformanceObserver' in window) || !('PerformanceLongTaskTiming' in window)) {
+        return;
+    }
+    const contexts = ["unknown", "self", "same-origin-ancestor", "same-origin-descendant", "same-origin", "cross-origin-ancestor", "cross-origin-descendant", "cross-origin-unreachable", "multiple-contexts"];
+    const containerTypes = ["window", "iframe", "embed", "object"];
+    function longTask(entry) {
+        let type = "", src = "", id = "", name = "";
+        const container = entry.attribution[0];
+        if (container != null) {
+            type = container.containerType;
+            name = container.containerName;
+            id = container.containerId;
+            src = container.containerSrc;
+        }
+        app.send(new LongTask(entry.startTime + performance.timing.navigationStart, entry.duration, Math.max(contexts.indexOf(entry.name), 0), Math.max(containerTypes.indexOf(type), 0), name, id, src));
+    }
+    const observer = new PerformanceObserver((list) => list.getEntries().forEach(longTask));
+    observer.observe({ entryTypes: ['longtask'] });
+}

package/lib/modules/mouse.d.ts

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

package/lib/modules/mouse.js

@@ -1,8 +1,8 @@
-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';
-function _getSelector(target, document) {
+import { hasTag, isSVGElement } from "../app/guards.js";
+import { normSpaces, hasOpenreplayAttribute, getLabelAttribute, } from "../utils.js";
+import { MouseMove, MouseClick } from "../common/messages.js";
+import { getInputLabel } from "./input.js";
+function _getSelector(target) {
     let el = target;
     let selector = null;
     do {
@@ -10,10 +10,9 @@ function _getSelector(target, document) {
             return `#${el.id}` + (selector ? ` > ${selector}` : '');
         }
         selector =
-            el.className
-                .split(' ')
-                .map((cn) => cn.trim())
-                .filter((cn) => cn !== '')
+            el.className.split(' ')
+                .map(cn => cn.trim())
+                .filter(cn => cn !== '')
                 .reduce((sel, cn) => `${sel}.${cn}`, el.tagName.toLowerCase()) +
                 (selector ? ` > ${selector}` : '');
         if (el === document.body) {
@@ -25,23 +24,23 @@ function _getSelector(target, document) {
 }
 function isClickable(element) {
     const tag = element.tagName.toUpperCase();
-    return (tag === 'BUTTON' ||
+    return tag === 'BUTTON' ||
         tag === 'A' ||
         tag === 'LI' ||
         tag === 'SELECT' ||
         element.onclick != null ||
-        element.getAttribute('role') === 'button');
+        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')) {
@@ -65,7 +64,8 @@ function _getTarget(target, document) {
         if (tag === 'INPUT') {
             return element;
         }
-        if (isClickable(element) || getLabelAttribute(element) !== null) {
+        if (isClickable(element) ||
+            getLabelAttribute(element) !== null) {
             return element;
         }
         element = element.parentElement;
@@ -78,7 +78,7 @@ export default function (app) {
         if (dl !== null) {
             return dl;
         }
-        if (hasTag(target, 'INPUT')) {
+        if (hasTag(target, "INPUT")) {
             return getInputLabel(target);
         }
         if (isClickable(target)) {
@@ -104,46 +104,39 @@ 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.d.ts

@@ -1,4 +1,4 @@
-import type App from '../app/index.js';
+import type App from "../app/index.js";
 export declare const deviceMemory: number;
 export declare const jsHeapSizeLimit: number;
 export interface Options {

package/lib/modules/performance.js

@@ -1,5 +1,5 @@
-import { IN_BROWSER } from '../utils.js';
-import { PerformanceTrack } from '../app/messages.gen.js';
+import { IN_BROWSER } from "../utils.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.d.ts

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

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

@@ -1,4 +1,4 @@
-import type App from '../app/index.js';
+import type App from "../app/index.js";
 export interface Options {
     captureResourceTimings: boolean;
     capturePageLoadTimings: boolean;