@openreplay/tracker 3.4.15 → 3.4.17

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,7 +41,7 @@ export default class TopObserver extends Observer {
             if (!context) {
                 return;
             }
-            const observer = new IFrameObserver(this.app, this.options, context);
+            const observer = new IFrameObserver(this.app, context);
             this.iframeObservers.push(observer);
             observer.observe(iframe);
         });
@@ -46,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

@@ -2,18 +2,20 @@ import App from "./app/index.js";
 export { default as App } from './app/index.js';
 import * as _Messages from "./messages/index.js";
 export declare const Messages: typeof _Messages;
-import { Options as AppOptions } from "./app/index.js";
-import { Options as ConsoleOptions } from "./modules/console.js";
-import { Options as ExceptionOptions } from "./modules/exception.js";
-import { Options as InputOptions } from "./modules/input.js";
-import { Options as PerformanceOptions } from "./modules/performance.js";
-import { Options as TimingOptions } from "./modules/timing.js";
-export type { OnStartInfo } from './app/index.js';
+import type { Options as AppOptions } from "./app/index.js";
+import type { Options as ConsoleOptions } from "./modules/console.js";
+import type { Options as ExceptionOptions } from "./modules/exception.js";
+import type { Options as InputOptions } from "./modules/input.js";
+import type { Options as PerformanceOptions } from "./modules/performance.js";
+import type { Options as TimingOptions } from "./modules/timing.js";
+import type { StartOptions } from './app/index.js';
+import type { OnStartInfo } from './app/index.js';
 export declare type Options = Partial<AppOptions & ConsoleOptions & ExceptionOptions & InputOptions & PerformanceOptions & TimingOptions> & {
     projectID?: number;
     projectKey: string;
     sessionToken?: string;
     respectDoNotTrack?: boolean;
+    autoResetOnWindowOpen?: boolean;
     __DISABLE_SECURE_MODE?: boolean;
 };
 export default class API {
@@ -23,7 +25,7 @@ export default class API {
     use<T>(fn: (app: App | null, options?: Options) => T): T;
     isActive(): boolean;
     active(): boolean;
-    start(): Promise<import("./app/index.js").OnStartInfo>;
+    start(startOpts?: StartOptions): Promise<OnStartInfo>;
     stop(): void;
     getSessionToken(): string | null | undefined;
     getSessionID(): string | null | undefined;

package/lib/index.js

@@ -77,7 +77,7 @@ export default class API {
             (navigator.doNotTrack == '1'
                 // @ts-ignore
                 || window.doNotTrack == '1');
-        this.app = doNotTrack ||
+        const app = this.app = doNotTrack ||
             !('Map' in window) ||
             !('Set' in window) ||
             !('MutationObserver' in window) ||
@@ -88,20 +88,34 @@ export default class API {
             !('Worker' in window)
             ? null
             : new App(options.projectKey, options.sessionToken, options);
-        if (this.app !== null) {
-            Viewport(this.app);
-            CSSRules(this.app);
-            Connection(this.app);
-            Console(this.app, options);
-            Exception(this.app, options);
-            Img(this.app);
-            Input(this.app, options);
-            Mouse(this.app);
-            Timing(this.app, options);
-            Performance(this.app, options);
-            Scroll(this.app);
-            Longtasks(this.app);
+        if (app !== null) {
+            Viewport(app);
+            CSSRules(app);
+            Connection(app);
+            Console(app, options);
+            Exception(app, options);
+            Img(app);
+            Input(app, options);
+            Mouse(app);
+            Timing(app, options);
+            Performance(app, options);
+            Scroll(app);
+            Longtasks(app);
             window.__OPENREPLAY__ = this;
+            if (options.autoResetOnWindowOpen) {
+                const wOpen = window.open;
+                app.attachStartCallback(() => {
+                    // @ts-ignore ?
+                    window.open = function (...args) {
+                        app.resetNextPageSession(true);
+                        wOpen.call(window, ...args);
+                        app.resetNextPageSession(false);
+                    };
+                });
+                app.attachStopCallback(() => {
+                    window.open = wOpen;
+                });
+            }
         }
         else {
             console.log("OpenReplay: browser doesn't support API required for tracking or doNotTrack is set to 1.");
@@ -111,7 +125,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.15',
+                trackerVersion: '3.4.17',
                 projectKey: options.projectKey,
                 doNotTrack,
                 // TODO: add precise reason (an exact API missing)
@@ -131,7 +145,7 @@ export default class API {
         deprecationWarn("'active' method", "'isActive' method", "/");
         return this.isActive();
     }
-    start() {
+    start(startOpts) {
         if (!IN_BROWSER) {
             console.error(`OpenReplay: you are trying to start Tracker on a node.js environment. If you want to use OpenReplay with SSR, please, use componentDidMount or useEffect API for placing the \`tracker.start()\` line. Check documentation on ${DOCS_HOST}${DOCS_SETUP}`);
             return Promise.reject("Trying to start not in browser.");
@@ -139,7 +153,7 @@ export default class API {
         if (this.app === null) {
             return Promise.reject("Browser doesn't support required api, or doNotTrack is active.");
         }
-        return this.app.start();
+        return this.app.start(startOpts);
     }
     stop() {
         if (this.app === null) {

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.15",
+  "version": "3.4.17",
   "keywords": [
     "logging",
     "replay"

package/cjs/app/observer.d.ts

@@ -1,47 +0,0 @@
-import App from "./index.js";
-interface Window extends WindowProxy {
-    HTMLInputElement: typeof HTMLInputElement;
-    HTMLLinkElement: typeof HTMLLinkElement;
-    HTMLStyleElement: typeof HTMLStyleElement;
-    SVGStyleElement: typeof SVGStyleElement;
-    HTMLIFrameElement: typeof HTMLIFrameElement;
-    Text: typeof Text;
-    Element: typeof Element;
-}
-export interface Options {
-    obscureTextEmails: boolean;
-    obscureTextNumbers: boolean;
-    captureIFrames: boolean;
-}
-export default class Observer {
-    private readonly app;
-    private readonly options;
-    private readonly context;
-    private readonly observer;
-    private readonly commited;
-    private readonly recents;
-    private readonly indexes;
-    private readonly attributesList;
-    private readonly textSet;
-    private readonly textMasked;
-    constructor(app: App, options: Options, context?: Window);
-    private clear;
-    private isInstance;
-    private isIgnored;
-    private sendNodeAttribute;
-    getInnerTextSecure(el: HTMLElement): string;
-    private checkObscure;
-    private sendNodeData;
-    private bindNode;
-    private bindTree;
-    private unbindNode;
-    private _commitNode;
-    private commitNode;
-    private commitNodes;
-    private iframeObservers;
-    private handleIframe;
-    private observeIframe;
-    observe(): void;
-    disconnect(): void;
-}
-export {};