@openreplay/tracker 13.0.1 → 14.0.0

package/lib/index.js

@@ -21,7 +21,7 @@ import Network from './modules/network.js';
 import ConstructedStyleSheets from './modules/constructedStyleSheets.js';
 import Selection from './modules/selection.js';
 import Tabs from './modules/tabs.js';
-import { IN_BROWSER, deprecationWarn, DOCS_HOST } from './utils.js';
+import { IN_BROWSER, deprecationWarn, DOCS_HOST, inIframe } from './utils.js';
 const DOCS_SETUP = '/installation/javascript-sdk';
 function processOptions(obj) {
     if (obj == null) {
@@ -54,6 +54,7 @@ export default class API {
     constructor(options) {
         this.options = options;
         this.app = null;
+        this.crossdomainMode = false;
         this.checkDoNotTrack = () => {
             return (this.options.respectDoNotTrack &&
                 (navigator.doNotTrack == '1' ||
@@ -66,7 +67,7 @@ export default class API {
             const orig = this.options.ingestPoint || DEFAULT_INGEST_POINT;
             req.open('POST', orig + '/v1/web/not-started');
             req.send(JSON.stringify({
-                trackerVersion: '13.0.1',
+                trackerVersion: '14.0.0',
                 projectKey: this.options.projectKey,
                 doNotTrack,
                 reason: missingApi.length ? `missing api: ${missingApi.join(',')}` : reason,
@@ -94,6 +95,7 @@ export default class API {
                 }
             }
         };
+        this.crossdomainMode = Boolean(inIframe() && options.crossdomain?.enabled);
         if (!IN_BROWSER || !processOptions(options)) {
             return;
         }
@@ -148,25 +150,32 @@ export default class API {
             this.signalStartIssue('missing_api', failReason);
             return;
         }
-        const app = new App(options.projectKey, options.sessionToken, options, this.signalStartIssue);
+        const app = new App(options.projectKey, options.sessionToken, options, this.signalStartIssue, this.crossdomainMode);
         this.app = app;
-        Viewport(app);
+        if (!this.crossdomainMode) {
+            // no need to send iframe viewport data since its a node for us
+            Viewport(app);
+            // calculated in main window
+            Connection(app);
+            // while we can calculate it here, trying to compute it for all parts is hard
+            Performance(app, options);
+            // no tabs in iframes yet
+            Tabs(app);
+        }
+        Mouse(app, options.mouse);
+        // inside iframe, we ignore viewport scroll
+        Scroll(app, this.crossdomainMode);
         CSSRules(app);
         ConstructedStyleSheets(app);
-        Connection(app);
         Console(app, options);
         Exception(app, options);
         Img(app);
         Input(app, options);
-        Mouse(app, options.mouse);
         Timing(app, options);
-        Performance(app, options);
-        Scroll(app);
         Focus(app);
         Fonts(app);
         Network(app, options.network);
         Selection(app);
-        Tabs(app);
         window.__OPENREPLAY__ = this;
         if (options.flags && options.flags.onFlagsLoad) {
             this.onFlagsLoad(options.flags.onFlagsLoad);

package/lib/modules/conditionsManager.js

@@ -84,10 +84,10 @@ export default class ConditionsManager {
             case 27 /* Type.CustomEvent */:
                 this.customEvent(message);
                 break;
-            case 69 /* Type.MouseClick */:
+            case 68 /* Type.MouseClick */:
                 this.clickEvent(message);
                 break;
-            case 4 /* Type.SetPageLocation */:
+            case 122 /* Type.SetPageLocation */:
                 this.pageLocationEvent(message);
                 break;
             case 83 /* Type.NetworkRequest */:

package/lib/modules/mouse.js

@@ -163,8 +163,14 @@ export default function (app, options) {
             }
             const id = app.nodes.getID(target);
             if (id !== undefined) {
+                const clickX = e.pageX;
+                const clickY = e.pageY;
+                const contentWidth = document.documentElement.scrollWidth;
+                const contentHeight = document.documentElement.scrollHeight;
+                const normalizedX = roundNumber(clickX / contentWidth);
+                const normalizedY = roundNumber(clickY / contentHeight);
                 sendMouseMove();
-                app.send(MouseClick(id, mouseTarget === target ? Math.round(performance.now() - mouseTargetTime) : 0, getTargetLabel(target), isClickable(target) && !disableClickmaps ? getSelector(id, target, options) : ''), true);
+                app.send(MouseClick(id, mouseTarget === target ? Math.round(performance.now() - mouseTargetTime) : 0, getTargetLabel(target), isClickable(target) && !disableClickmaps ? getSelector(id, target, options) : '', normalizedX, normalizedY), true);
             }
             mouseTarget = null;
         });
@@ -177,3 +183,10 @@ export default function (app, options) {
     patchDocument(document, true);
     app.ticker.attach(sendMouseMove, options?.trackingOffset || 7);
 }
+/**
+ * we get 0 to 1 decimal number, convert and round it, then turn to %
+ * 0.39643 => 396.43 => 396 => 39.6%
+ * */
+function roundNumber(num) {
+    return Math.round(num * 1e3) / 1e1;
+}

package/lib/modules/scroll.d.ts

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

package/lib/modules/scroll.js

@@ -3,17 +3,17 @@ import { isNode, isElementNode, isRootNode, isDocument } from '../app/guards.js'
 function getDocumentScroll(doc) {
     const win = doc.defaultView;
     return [
-        (win && win.pageXOffset) ||
+        (win && win.scrollX) ||
             (doc.documentElement && doc.documentElement.scrollLeft) ||
             (doc.body && doc.body.scrollLeft) ||
             0,
-        (win && win.pageYOffset) ||
+        (win && win.scrollY) ||
             (doc.documentElement && doc.documentElement.scrollTop) ||
             (doc.body && doc.body.scrollTop) ||
             0,
     ];
 }
-export default function (app) {
+export default function (app, insideIframe) {
     let documentScroll = false;
     const nodeScroll = new Map();
     function setNodeScroll(target) {
@@ -27,7 +27,12 @@ export default function (app) {
             nodeScroll.set(target, getDocumentScroll(target));
         }
     }
-    const sendSetViewportScroll = app.safe(() => app.send(SetViewportScroll(...getDocumentScroll(document))));
+    const sendSetViewportScroll = app.safe(() => {
+        if (insideIframe) {
+            return;
+        }
+        app.send(SetViewportScroll(...getDocumentScroll(document)));
+    });
     const sendSetNodeScroll = app.safe((s, node) => {
         const id = app.nodes.getID(node);
         if (id !== undefined) {

package/lib/modules/viewport.js

@@ -8,7 +8,7 @@ export default function (app) {
         const { URL } = document;
         if (URL !== url) {
             url = URL;
-            app.send(SetPageLocation(url, referrer, navigationStart));
+            app.send(SetPageLocation(url, referrer, navigationStart, document.title));
             navigationStart = 0;
             referrer = url;
         }
@@ -25,7 +25,7 @@ export default function (app) {
         ? Function.prototype
         : app.safe(() => app.send(SetPageVisibility(document.hidden)));
     app.attachStartCallback(() => {
-        url = '';
+        url = null;
         navigationStart = getTimeOrigin();
         width = height = -1;
         sendSetPageLocation();

package/lib/utils.d.ts

@@ -16,7 +16,7 @@ export declare function hasOpenreplayAttribute(e: Element, attr: string): boolea
  **/
 export declare function canAccessIframe(iframe: HTMLIFrameElement): boolean;
 export declare function generateRandomId(len?: number): string;
-export declare function inIframe(): boolean;
+export declare function inIframe(): boolean | null;
 /**
  * Because angular devs decided that its a good idea to override a browser apis
  * we need to use this to achieve safe behavior
@@ -26,3 +26,4 @@ export declare function createMutationObserver(cb: MutationCallback): MutationOb
 export declare function createEventListener(target: EventTarget, event: string, cb: EventListenerOrEventListenerObject, capture?: boolean): void;
 export declare function deleteEventListener(target: EventTarget, event: string, cb: EventListenerOrEventListenerObject, capture?: boolean): void;
 export declare function requestIdleCb(callback: () => void): void;
+export declare function simpleMerge<T>(defaultObj: T, givenObj: Partial<T>): T;

package/lib/utils.js

@@ -78,12 +78,17 @@ export function generateRandomId(len) {
     // msCrypto = IE11
     // @ts-ignore
     const safeCrypto = window.crypto || window.msCrypto;
-    safeCrypto.getRandomValues(arr);
-    return Array.from(arr, dec2hex).join('');
+    if (safeCrypto) {
+        safeCrypto.getRandomValues(arr);
+        return Array.from(arr, dec2hex).join('');
+    }
+    else {
+        return Array.from({ length: len || 40 }, () => dec2hex(Math.floor(Math.random() * 16))).join('');
+    }
 }
 export function inIframe() {
     try {
-        return window.self !== window.top;
+        return window.self && window.top && window.self !== window.top;
     }
     catch (e) {
         return true;
@@ -110,9 +115,10 @@ export function createEventListener(target, event, cb, capture) {
         target[safeAddEventListener](event, cb, capture);
     }
     catch (e) {
+        const msg = e.message;
         console.debug(
         // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
-        `Openreplay: ${e.messages}; if this error is caused by an IframeObserver, ignore it`);
+        `Openreplay: ${msg}; if this error is caused by an IframeObserver, ignore it`);
     }
 }
 export function deleteEventListener(target, event, cb, capture) {
@@ -121,9 +127,10 @@ export function deleteEventListener(target, event, cb, capture) {
         target[safeRemoveEventListener](event, cb, capture);
     }
     catch (e) {
+        const msg = e.message;
         console.debug(
         // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
-        `Openreplay: ${e.messages}; if this error is caused by an IframeObserver, ignore it`);
+        `Openreplay: ${msg}; if this error is caused by an IframeObserver, ignore it`);
     }
 }
 class FIFOTaskScheduler {
@@ -183,3 +190,22 @@ export function requestIdleCb(callback) {
     //   })
     // }
 }
+export function simpleMerge(defaultObj, givenObj) {
+    const result = { ...defaultObj };
+    for (const key in givenObj) {
+        // eslint-disable-next-line no-prototype-builtins
+        if (givenObj.hasOwnProperty(key)) {
+            const userOptionValue = givenObj[key];
+            const defaultOptionValue = defaultObj[key];
+            if (typeof userOptionValue === 'object' &&
+                !Array.isArray(userOptionValue) &&
+                userOptionValue !== null) {
+                result[key] = simpleMerge(defaultOptionValue || {}, userOptionValue);
+            }
+            else {
+                result[key] = userOptionValue;
+            }
+        }
+    }
+    return result;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@openreplay/tracker",
   "description": "The OpenReplay tracker main package",
-  "version": "13.0.1",
+  "version": "14.0.0",
   "keywords": [
     "logging",
     "replay"