@openreplay/tracker 17.1.5 → 17.1.6

package/dist/lib/index.js

@@ -1131,7 +1131,7 @@ const stars = 'repeat' in String.prototype
     ? (str) => '*'.repeat(str.length)
     : (str) => str.replace(/./g, '*');
 function normSpaces(str) {
-    return str.trim().replace(/\s+/g, ' ');
+    return str ? str.trim().replace(/\s+/g, ' ') : '';
 }
 // isAbsoluteUrl regexp:  /^([a-z][a-z\d\+\-\.]*:)?\/\//i.test(url)
 function isURL(s) {
@@ -2328,7 +2328,13 @@ class CanvasRecorder {
         this.app = app;
         this.options = options;
         this.snapshots = {};
-        this.intervals = [];
+        this.intervals = new Map();
+        this.observers = new Map();
+        this.uploadQueue = 0;
+        this.MAX_CONCURRENT_UPLOADS = 2;
+        this.MAX_QUEUE_SIZE = 50; // ~500 images max (50 batches × 10 images)
+        this.pendingBatches = [];
+        this.isProcessingQueue = false;
         this.restartTracking = () => {
             this.clear();
             this.app.nodes.scanTree(this.captureCanvas);
@@ -2339,34 +2345,33 @@ class CanvasRecorder {
                 return;
             }
             const isIgnored = this.app.sanitizer.isObscured(id) || this.app.sanitizer.isHidden(id);
-            if (isIgnored || !hasTag(node, 'canvas') || this.snapshots[id]) {
+            if (isIgnored || this.snapshots[id]) {
                 return;
             }
             const observer = new IntersectionObserver((entries) => {
                 entries.forEach((entry) => {
                     if (entry.isIntersecting) {
-                        if (entry.target) {
-                            if (this.snapshots[id] && this.snapshots[id].createdAt) {
-                                this.snapshots[id].paused = false;
-                            }
-                            else {
-                                this.recordCanvas(entry.target, id);
-                            }
-                            /**
-                             * We can switch this to start observing when element is in the view
-                             * but otherwise right now we're just pausing when it's not
-                             * just to save some bandwidth and space on backend
-                             * */
-                            // observer.unobserve(entry.target)
+                        if (this.snapshots[id] && this.snapshots[id].createdAt) {
+                            this.snapshots[id].paused = false;
                         }
                         else {
-                            if (this.snapshots[id]) {
-                                this.snapshots[id].paused = true;
-                            }
+                            this.recordCanvas(entry.target, id);
+                        }
+                        /**
+                         * We can switch this to start observing when element is in the view
+                         * but otherwise right now we're just pausing when it's not
+                         * just to save some bandwidth and space on backend
+                         * */
+                        // observer.unobserve(entry.target)
+                    }
+                    else {
+                        if (this.snapshots[id]) {
+                            this.snapshots[id].paused = true;
                         }
                     }
                 });
             });
+            this.observers.set(id, observer);
             observer.observe(node);
         };
         this.recordCanvas = (node, id) => {
@@ -2376,15 +2381,23 @@ class CanvasRecorder {
                 createdAt: ts,
                 paused: false,
                 dummy: document.createElement('canvas'),
+                isCapturing: false,
+                isStopped: false,
             };
             const canvasMsg = CanvasNode(id.toString(), ts);
             this.app.send(canvasMsg);
+            const cachedCanvas = node;
             const captureFn = (canvas) => {
+                if (!this.snapshots[id] || this.snapshots[id].isCapturing || this.snapshots[id].isStopped) {
+                    return;
+                }
+                this.snapshots[id].isCapturing = true;
                 captureSnapshot(canvas, this.options.quality, this.snapshots[id].dummy, this.options.fixedScaling, this.fileExt, (blob) => {
-                    if (!blob)
+                    if (this.snapshots[id]) {
+                        this.snapshots[id].isCapturing = false;
+                    }
+                    if (!blob || !this.snapshots[id] || this.snapshots[id].isStopped) {
                         return;
-                    if (!this.snapshots[id]) {
-                        return this.app.debug.warn('Canvas not present in snapshots after capture:', this.snapshots, id);
                     }
                     this.snapshots[id].images.push({ id: this.app.timestamp(), data: blob });
                     if (this.snapshots[id].images.length > 9) {
@@ -2394,32 +2407,29 @@ class CanvasRecorder {
                 });
             };
             const int = setInterval(() => {
-                const cid = this.app.nodes.getID(node);
-                const canvas = cid ? this.app.nodes.getNode(cid) : undefined;
-                if (!this.snapshots[id]) {
+                const snapshot = this.snapshots[id];
+                if (!snapshot || snapshot.isStopped) {
                     this.app.debug.log('Canvas is not present in {snapshots}');
-                    clearInterval(int);
+                    this.cleanupCanvas(id);
                     return;
                 }
-                if (!canvas || !hasTag(canvas, 'canvas') || canvas !== node) {
-                    this.app.debug.log('Canvas element not in sync', canvas, node);
-                    clearInterval(int);
+                if (!document.contains(cachedCanvas)) {
+                    this.app.debug.log('Canvas element not in sync', cachedCanvas, node);
+                    this.cleanupCanvas(id);
                     return;
                 }
-                else {
-                    if (!this.snapshots[id].paused) {
-                        if (this.options.useAnimationFrame) {
-                            requestAnimationFrame(() => {
-                                captureFn(canvas);
-                            });
-                        }
-                        else {
-                            captureFn(canvas);
-                        }
+                if (!snapshot.paused) {
+                    if (this.options.useAnimationFrame) {
+                        requestAnimationFrame(() => {
+                            captureFn(cachedCanvas);
+                        });
+                    }
+                    else {
+                        captureFn(cachedCanvas);
                     }
                 }
             }, this.interval);
-            this.intervals.push(int);
+            this.intervals.set(id, int);
         };
         this.fileExt = options.fileExt ?? 'webp';
         this.interval = 1000 / options.fps;
@@ -2434,6 +2444,30 @@ class CanvasRecorder {
         if (Object.keys(this.snapshots).length === 0) {
             return;
         }
+        if (this.pendingBatches.length >= this.MAX_QUEUE_SIZE) {
+            this.app.debug.warn('Upload queue full, dropping canvas batch');
+            return;
+        }
+        this.pendingBatches.push({ images, canvasId, createdAt });
+        if (!this.isProcessingQueue) {
+            this.processUploadQueue();
+        }
+    }
+    async processUploadQueue() {
+        this.isProcessingQueue = true;
+        while (this.pendingBatches.length > 0) {
+            if (this.uploadQueue >= this.MAX_CONCURRENT_UPLOADS) {
+                await new Promise((resolve) => setTimeout(resolve, 100));
+                continue;
+            }
+            const batch = this.pendingBatches.shift();
+            if (!batch)
+                break;
+            this.uploadBatch(batch.images, batch.canvasId, batch.createdAt);
+        }
+        this.isProcessingQueue = false;
+    }
+    uploadBatch(images, canvasId, createdAt) {
         const formData = new FormData();
         images.forEach((snapshot) => {
             const blob = snapshot.data;
@@ -2451,6 +2485,7 @@ class CanvasRecorder {
                 void this.app.start({}, true);
             }, 250);
         };
+        this.uploadQueue++;
         fetch(this.app.options.ingestPoint + '/v1/web/images', {
             method: 'POST',
             headers: {
@@ -2466,10 +2501,50 @@ class CanvasRecorder {
         })
             .catch((e) => {
             this.app.debug.error('error saving canvas', e);
+        })
+            .finally(() => {
+            this.uploadQueue--;
         });
     }
+    cleanupCanvas(id) {
+        if (this.snapshots[id]) {
+            this.snapshots[id].isStopped = true;
+        }
+        const interval = this.intervals.get(id);
+        if (interval) {
+            clearInterval(interval);
+            this.intervals.delete(id);
+        }
+        const observer = this.observers.get(id);
+        if (observer) {
+            observer.disconnect();
+            this.observers.delete(id);
+        }
+        if (this.snapshots[id]?.dummy) {
+            const dummy = this.snapshots[id].dummy;
+            dummy.width = 0;
+            dummy.height = 0;
+        }
+        delete this.snapshots[id];
+    }
     clear() {
-        this.intervals.forEach((int) => clearInterval(int));
+        // Flush remaining images before cleanup
+        Object.keys(this.snapshots).forEach((idStr) => {
+            const id = parseInt(idStr, 10);
+            const snapshot = this.snapshots[id];
+            if (snapshot && snapshot.images.length > 0) {
+                this.sendSnaps(snapshot.images, id, snapshot.createdAt);
+                snapshot.images = [];
+            }
+        });
+        Object.keys(this.snapshots).forEach((idStr) => {
+            const id = parseInt(idStr, 10);
+            this.cleanupCanvas(id);
+        });
+        // don't clear pendingBatches or stop queue processing
+        // to allow flushed images to finish uploading in the background
+        this.intervals.clear();
+        this.observers.clear();
         this.snapshots = {};
     }
 }
@@ -4345,7 +4420,7 @@ class App {
         this.stopCallbacks = [];
         this.commitCallbacks = [];
         this.activityState = ActivityState.NotActive;
-        this.version = '17.1.5'; // TODO: version compatability check inside each plugin.
+        this.version = '17.1.6'; // TODO: version compatability check inside each plugin.
         this.socketMode = false;
         this.compressionThreshold = 24 * 1000;
         this.bc = null;
@@ -9182,7 +9257,7 @@ class ConstantProperties {
             user_id: this.user_id,
             distinct_id: this.deviceId,
             sdk_edition: 'web',
-            sdk_version: '17.1.5',
+            sdk_version: '17.1.6',
             timezone: getUTCOffsetString(),
             search_engine: this.searchEngine,
         };
@@ -9826,7 +9901,7 @@ class API {
         this.signalStartIssue = (reason, missingApi) => {
             const doNotTrack = this.checkDoNotTrack();
             console.log("Tracker couldn't start due to:", JSON.stringify({
-                trackerVersion: '17.1.5',
+                trackerVersion: '17.1.6',
                 projectKey: this.options.projectKey,
                 doNotTrack,
                 reason: missingApi.length ? `missing api: ${missingApi.join(',')}` : reason,