@openreplay/tracker 11.0.3 → 11.0.5

package/CHANGELOG.md

@@ -1,3 +1,12 @@
+# 11.0.5
+
+- add method to restart canvas tracking (in case of context recreation)
+- scan dom tree for canvas els on tracker start
+
+# 11.0.4
+
+- some additional security for canvas capture (check if canvas el itself is obscured/ignored)
+
 # 11.0.3
 
 - move all logs under internal debugger

package/cjs/app/canvas.d.ts

@@ -2,6 +2,7 @@ import App from '../app/index.js';
 interface Options {
     fps: number;
     quality: 'low' | 'medium' | 'high';
+    isDebug?: boolean;
 }
 declare class CanvasRecorder {
     private readonly app;
@@ -11,6 +12,8 @@ declare class CanvasRecorder {
     private readonly interval;
     constructor(app: App, options: Options);
     startTracking(): void;
+    restartTracking: () => void;
+    handleCanvasEl: (node: Node) => void;
     sendSnaps(images: {
         data: string;
         id: number;

package/cjs/app/canvas.js

@@ -8,12 +8,17 @@ class CanvasRecorder {
         this.options = options;
         this.snapshots = {};
         this.intervals = [];
-        this.interval = 1000 / options.fps;
-    }
-    startTracking() {
-        this.app.nodes.attachNodeCallback((node) => {
+        this.restartTracking = () => {
+            this.clear();
+            this.app.nodes.scanTree(this.handleCanvasEl);
+        };
+        this.handleCanvasEl = (node) => {
             const id = this.app.nodes.getID(node);
-            if (!id || !(0, guards_js_1.hasTag)(node, 'canvas') || this.snapshots[id]) {
+            if (!id || !(0, guards_js_1.hasTag)(node, 'canvas')) {
+                return;
+            }
+            const isIgnored = this.app.sanitizer.isObscured(id) || this.app.sanitizer.isHidden(id);
+            if (isIgnored || !(0, guards_js_1.hasTag)(node, 'canvas') || this.snapshots[id]) {
                 return;
             }
             const ts = this.app.timestamp();
@@ -40,7 +45,16 @@ class CanvasRecorder {
                 }
             }, this.interval);
             this.intervals.push(int);
-        });
+        };
+        this.interval = 1000 / options.fps;
+    }
+    startTracking() {
+        setTimeout(() => {
+            this.app.nodes.scanTree(this.handleCanvasEl);
+            this.app.nodes.attachNodeCallback((node) => {
+                this.handleCanvasEl(node);
+            });
+        }, 500);
     }
     sendSnaps(images, canvasId, createdAt) {
         var _a;
@@ -51,7 +65,9 @@ class CanvasRecorder {
         images.forEach((snapshot) => {
             const blob = dataUrlToBlob(snapshot.data)[0];
             formData.append('snapshot', blob, `${createdAt}_${canvasId}_${snapshot.id}.jpeg`);
-            // saveImageData(snapshot.data, `${createdAt}_${canvasId}_${snapshot.id}.jpeg`)
+            if (this.options.isDebug) {
+                saveImageData(snapshot.data, `${createdAt}_${canvasId}_${snapshot.id}.jpeg`);
+            }
         });
         fetch(this.app.options.ingestPoint + '/v1/web/images', {
             method: 'POST',

package/cjs/app/index.d.ts

@@ -50,6 +50,7 @@ type AppOptions = {
     __is_snippet: boolean;
     __debug_report_edp: string | null;
     __debug__?: LoggerOptions;
+    __save_canvas_locally?: boolean;
     localStorage: Storage | null;
     sessionStorage: Storage | null;
     forceSingleTab?: boolean;
@@ -127,6 +128,7 @@ export default class App {
     active(): boolean;
     resetNextPageSession(flag: boolean): void;
     private _start;
+    restartCanvasTracking: () => void;
     onUxtCb: never[];
     addOnUxtCb(cb: (id: number) => void): void;
     getUxtId(): number | null;

package/cjs/app/index.js

@@ -42,13 +42,17 @@ class App {
         this.stopCallbacks = [];
         this.commitCallbacks = [];
         this.activityState = ActivityState.NotActive;
-        this.version = '11.0.3'; // TODO: version compatability check inside each plugin.
+        this.version = '11.0.5'; // TODO: version compatability check inside each plugin.
         this.compressionThreshold = 24 * 1000;
         this.restartAttempts = 0;
         this.bc = null;
         this.canvasRecorder = null;
         this._usingOldFetchPlugin = false;
         this.delay = 0;
+        this.restartCanvasTracking = () => {
+            var _a;
+            (_a = this.canvasRecorder) === null || _a === void 0 ? void 0 : _a.restartTracking();
+        };
         this.onUxtCb = [];
         // if (options.onStart !== undefined) {
         //   deprecationWarn("'onStart' option", "tracker.start().then(/* handle session info */)")
@@ -69,6 +73,7 @@ class App {
             verbose: false,
             __is_snippet: false,
             __debug_report_edp: null,
+            __save_canvas_locally: false,
             localStorage: null,
             sessionStorage: null,
             disableStringDict: false,
@@ -498,15 +503,19 @@ class App {
             });
             this.compressionThreshold = compressionThreshold;
             const onStartInfo = { sessionToken: token, userUUID, sessionID };
-            // TODO: start as early as possible (before receiving the token)
-            this.startCallbacks.forEach((cb) => cb(onStartInfo)); // MBTODO: callbacks after DOM "mounted" (observed)
-            this.observer.observe();
-            this.ticker.start();
             if (canvasEnabled) {
                 this.canvasRecorder =
-                    (_a = this.canvasRecorder) !== null && _a !== void 0 ? _a : new canvas_js_1.default(this, { fps: canvasFPS, quality: canvasQuality });
+                    (_a = this.canvasRecorder) !== null && _a !== void 0 ? _a : new canvas_js_1.default(this, {
+                        fps: canvasFPS,
+                        quality: canvasQuality,
+                        isDebug: this.options.__save_canvas_locally,
+                    });
                 this.canvasRecorder.startTracking();
             }
+            // TODO: start as early as possible (before receiving the token)
+            this.startCallbacks.forEach((cb) => cb(onStartInfo)); // MBTODO: callbacks after DOM "mounted" (observed)
+            this.observer.observe();
+            this.ticker.start();
             this.activityState = ActivityState.Active;
             this.notify.log('OpenReplay tracking started.');
             // get rid of onStart ?

package/cjs/app/nodes.d.ts

@@ -7,6 +7,7 @@ export default class Nodes {
     private readonly elementListeners;
     constructor(node_id: string);
     attachNodeCallback(nodeCallback: NodeCallback): void;
+    scanTree: (cb: (node: Node | void) => void) => void;
     attachNodeListener(node: Node, type: string, listener: EventListener, useCapture?: boolean): void;
     registerNode(node: Node): [/*id:*/ number, /*isNew:*/ boolean];
     unregisterNode(node: Node): number | undefined;

package/cjs/app/nodes.js

@@ -8,6 +8,9 @@ class Nodes {
         this.totalNodeAmount = 0;
         this.nodeCallbacks = [];
         this.elementListeners = new Map();
+        this.scanTree = (cb) => {
+            this.nodes.forEach((node) => cb(node));
+        };
     }
     // Attached once per Tracker instance
     attachNodeCallback(nodeCallback) {

package/cjs/index.d.ts

@@ -39,6 +39,7 @@ export default class API {
     reloadFlags(): Promise<void>;
     getFeatureFlag(flagName: string): IFeatureFlag | undefined;
     getAllFeatureFlags(): IFeatureFlag[];
+    restartCanvasTracking: () => void;
     use<T>(fn: (app: App | null, options?: Options) => T): T;
     isActive(): boolean;
     start(startOpts?: Partial<StartOptions>): Promise<StartPromiseReturn>;

package/cjs/index.js

@@ -60,6 +60,12 @@ class API {
     constructor(options) {
         this.options = options;
         this.app = null;
+        this.restartCanvasTracking = () => {
+            if (this.app === null) {
+                return;
+            }
+            this.app.restartCanvasTracking();
+        };
         this.handleError = (e, metadata = {}) => {
             if (this.app === null) {
                 return;
@@ -162,7 +168,7 @@ 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: '11.0.3',
+                trackerVersion: '11.0.5',
                 projectKey: options.projectKey,
                 doNotTrack,
                 // TODO: add precise reason (an exact API missing)