@openreplay/tracker 3.4.14 → 3.4.17-beta.1

package/lib/app/observer/top_observer.js

@@ -1,15 +1,18 @@
-import Observer, { isInstance } from "./observer.js";
+import Observer from "./observer.js";
+import { isInstance } from "../context.js";
 import IFrameObserver from "./iframe_observer.js";
 import ShadowRootObserver from "./shadow_root_observer.js";
 import { CreateDocument } from "../../messages/index.js";
-const attachShadowNativeFn = Element.prototype.attachShadow;
+import { IN_BROWSER } from '../../utils.js';
+const attachShadowNativeFn = IN_BROWSER ? Element.prototype.attachShadow : () => new ShadowRoot();
 export default class TopObserver extends Observer {
     constructor(app, options) {
-        super(app, Object.assign({
-            captureIFrames: false
-        }, options));
+        super(app);
         this.iframeObservers = [];
         this.shadowRootObservers = [];
+        this.options = Object.assign({
+            captureIFrames: false
+        }, options);
         // IFrames
         this.app.nodes.attachNodeCallback(node => {
             if (isInstance(node, HTMLIFrameElement) &&
@@ -38,11 +41,7 @@ export default class TopObserver extends Observer {
             if (!context) {
                 return;
             }
-            const observer = new IFrameObserver(this.app, this.options, context);
-            // @ts-ignore
-            observer.commited = this.commited;
-            // @ts-ignore
-            //observers.recents = this.recents
+            const observer = new IFrameObserver(this.app, context);
             this.iframeObservers.push(observer);
             observer.observe(iframe);
         });
@@ -50,7 +49,7 @@ export default class TopObserver extends Observer {
         handle();
     }
     handleShadowRoot(shRoot) {
-        const observer = new ShadowRootObserver(this.app, this.options, this.context);
+        const observer = new ShadowRootObserver(this.app, this.context);
         this.shadowRootObservers.push(observer);
         observer.observe(shRoot.host);
     }

package/lib/app/sanitizer.d.ts

@@ -0,0 +1,16 @@
+import App from "./index.js";
+export interface Options {
+    obscureTextEmails: boolean;
+    obscureTextNumbers: boolean;
+}
+export default class Sanitizer {
+    private readonly app;
+    private readonly masked;
+    private readonly options;
+    constructor(app: App, options: Partial<Options>);
+    handleNode(id: number, parentID: number, node: Node): void;
+    sanitize(id: number, data: string): string;
+    isMasked(id: number): boolean;
+    getInnerTextSecure(el: HTMLElement): string;
+    clear(): void;
+}

package/lib/app/sanitizer.js

@@ -1 +1,44 @@
-"use strict";
+import { stars, hasOpenreplayAttribute } from "../utils.js";
+import { isInstance } from "./context.js";
+export default class Sanitizer {
+    constructor(app, options) {
+        this.app = app;
+        this.masked = new Set();
+        this.options = Object.assign({
+            obscureTextEmails: true,
+            obscureTextNumbers: false,
+        }, options);
+    }
+    handleNode(id, parentID, node) {
+        if (this.masked.has(parentID) ||
+            (isInstance(node, Element) && hasOpenreplayAttribute(node, 'masked'))) {
+            this.masked.add(id);
+        }
+    }
+    sanitize(id, data) {
+        if (this.masked.has(id)) {
+            // TODO: is it the best place to put trim() ? Might trimmed spaces be considered in layout in certain cases?
+            return data.trim().replace(/[^\f\n\r\t\v\u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]/g, '█');
+        }
+        if (this.options.obscureTextNumbers) {
+            data = data.replace(/\d/g, '0');
+        }
+        if (this.options.obscureTextEmails) {
+            data = data.replace(/([^\s]+)@([^\s]+)\.([^\s]+)/g, (...f) => stars(f[1]) + '@' + stars(f[2]) + '.' + stars(f[3]));
+        }
+        return data;
+    }
+    isMasked(id) {
+        return this.masked.has(id);
+    }
+    getInnerTextSecure(el) {
+        const id = this.app.nodes.getID(el);
+        if (!id) {
+            return '';
+        }
+        return this.sanitize(id, el.innerText);
+    }
+    clear() {
+        this.masked.clear();
+    }
+}

package/lib/index.d.ts

@@ -37,4 +37,5 @@ export default class API {
     event(key: string, payload: any, issue?: boolean): void;
     issue(key: string, payload: any): void;
     handleError: (e: Error | ErrorEvent | PromiseRejectionEvent) => void;
+    resetNextPageSession(flag: boolean): void;
 }

package/lib/index.js

@@ -111,7 +111,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: '3.4.14',
+                trackerVersion: '3.4.17-beta.1',
                 projectKey: options.projectKey,
                 doNotTrack,
                 // TODO: add precise reason (an exact API missing)
@@ -219,4 +219,10 @@ export default class API {
             this.app.send(new CustomIssue(key, payload));
         }
     }
+    resetNextPageSession(flag) {
+        if (typeof flag !== 'boolean' || !this.app) {
+            return;
+        }
+        this.app.resetNextPageSession(flag);
+    }
 }

package/lib/modules/exception.js

@@ -37,7 +37,14 @@ export function getExceptionMessageFromEvent(e) {
             return getExceptionMessage(e.reason, []);
         }
         else {
-            return new JSException('Unhandled Promise Rejection', String(e.reason), '[]');
+            let message;
+            try {
+                message = JSON.stringify(e.reason);
+            }
+            catch (_) {
+                message = String(e.reason);
+            }
+            return new JSException('Unhandled Promise Rejection', message, '[]');
         }
     }
     return null;

package/lib/modules/img.js

@@ -1,6 +1,17 @@
 import { timestamp, isURL } from "../utils.js";
-import { ResourceTiming, SetNodeAttributeURLBased } from "../messages/index.js";
+import { ResourceTiming, SetNodeAttributeURLBased, SetNodeAttribute } from "../messages/index.js";
+const PLACEHOLDER_SRC = "https://static.openreplay.com/tracker/placeholder.jpeg";
 export default function (app) {
+    function sendPlaceholder(id, node) {
+        app.send(new SetNodeAttribute(id, "src", PLACEHOLDER_SRC));
+        const { width, height } = node.getBoundingClientRect();
+        if (!node.hasAttribute("width")) {
+            app.send(new SetNodeAttribute(id, "width", String(width)));
+        }
+        if (!node.hasAttribute("height")) {
+            app.send(new SetNodeAttribute(id, "height", String(height)));
+        }
+    }
     const sendImgSrc = app.safe(function () {
         const id = app.nodes.getID(this);
         if (id === undefined) {
@@ -15,7 +26,10 @@ export default function (app) {
                 app.send(new ResourceTiming(timestamp(), 0, 0, 0, 0, 0, src, 'img'));
             }
         }
-        else if (src.length < 1e5) {
+        else if (src.length >= 1e5 || app.sanitizer.isMasked(id)) {
+            sendPlaceholder(id, this);
+        }
+        else {
             app.send(new SetNodeAttributeURLBased(id, 'src', src, app.getBaseHref()));
         }
     });

package/lib/modules/input.d.ts

@@ -1,5 +1,6 @@
 import App from "../app/index.js";
-export declare function getInputLabel(node: HTMLInputElement): string;
+declare type TextEditableElement = HTMLInputElement | HTMLTextAreaElement;
+export declare function getInputLabel(node: TextEditableElement): string;
 export declare const enum InputMode {
     Plain = 0,
     Obscured = 1,
@@ -11,3 +12,4 @@ export interface Options {
     defaultInputMode: InputMode;
 }
 export default function (app: App, opts: Partial<Options>): void;
+export {};

package/lib/modules/input.js

@@ -1,6 +1,9 @@
 import { normSpaces, IN_BROWSER, getLabelAttribute, hasOpenreplayAttribute } from "../utils.js";
 import { SetInputTarget, SetInputValue, SetInputChecked } from "../messages/index.js";
-function isInput(node) {
+function isTextEditable(node) {
+    if (node instanceof HTMLTextAreaElement) {
+        return true;
+    }
     if (!(node instanceof HTMLInputElement)) {
         return false;
     }
@@ -107,7 +110,7 @@ export default function (app, opts) {
     app.ticker.attach(() => {
         inputValues.forEach((value, id) => {
             const node = app.nodes.getNode(id);
-            if (!isInput(node)) {
+            if (!isTextEditable(node)) {
                 inputValues.delete(id);
                 return;
             }
@@ -138,7 +141,7 @@ export default function (app, opts) {
         if (id === undefined) {
             return;
         }
-        if (isInput(node)) {
+        if (isTextEditable(node)) {
             inputValues.set(id, node.value);
             sendInputValue(id, node);
             return;

package/lib/modules/mouse.js

@@ -83,7 +83,7 @@ export default function (app) {
             tag === 'LI' ||
             target.onclick != null ||
             target.getAttribute('role') === 'button') {
-            const label = app.observer.getInnerTextSecure(target);
+            const label = app.sanitizer.getInnerTextSecure(target);
             return normSpaces(label).slice(0, 100);
         }
         return '';

package/package.json

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