@openreplay/tracker 17.2.3 → 17.2.5

package/dist/cjs/entry.js

@@ -1746,7 +1746,7 @@ class CanvasRecorder {
         setTimeout(() => {
             this.app.nodes.scanTree(this.captureCanvas);
             this.app.nodes.attachNodeCallback(this.captureCanvas);
-        }, 250);
+        }, 125);
     }
     sendSnaps(images, canvasId, createdAt) {
         if (Object.keys(this.snapshots).length === 0) {
@@ -1777,14 +1777,20 @@ class CanvasRecorder {
     }
     async uploadBatch(images, canvasId, createdAt) {
         if (this.options.isDebug) {
-            const fileEntries = [];
-            images.forEach((snapshot) => {
-                if (!snapshot.data)
-                    return;
-                fileEntries.push({ data: snapshot.data, name: `${createdAt}_${canvasId}_${snapshot.id}.${this.fileExt}` });
-            });
-            void saveArchive(fileEntries, `canvas_${canvasId}_${createdAt}`);
-            return;
+            const packed = await packFrames(images);
+            if (packed) {
+                const fileName = `${createdAt}_${canvasId}.${this.fileExt}.frames`;
+                const url = URL.createObjectURL(new Blob([packed]));
+                const link = document.createElement('a');
+                link.href = url;
+                link.download = fileName;
+                link.style.display = 'none';
+                document.body.appendChild(link);
+                link.click();
+                document.body.removeChild(link);
+                URL.revokeObjectURL(url);
+            }
+            // fall through to also send to backend
         }
         let formData;
         if (this.options.framesSupport) {
@@ -1929,80 +1935,36 @@ function captureSnapshot(canvas, quality = 'medium', dummy, fixedScaling = false
         canvas.toBlob(onBlob, imageFormat, qualityInt[quality]);
     }
 }
-async function saveArchive(files, archiveName) {
-    const zipBlob = await createZipBlob(files);
-    const url = URL.createObjectURL(zipBlob);
-    const link = document.createElement('a');
-    link.href = url;
-    link.download = `${archiveName}.zip`;
-    link.style.display = 'none';
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
-    URL.revokeObjectURL(url);
-}
-async function createZipBlob(files) {
-    const parts = [];
-    const centralDir = [];
+async function packFrames(images) {
+    const buffers = [];
+    let totalSize = 0;
+    for (const snapshot of images) {
+        if (!snapshot.data)
+            continue;
+        const ab = await snapshot.data.arrayBuffer();
+        buffers.push(ab);
+        totalSize += 8 + 4 + ab.byteLength;
+    }
+    if (totalSize === 0)
+        return null;
+    const packed = new ArrayBuffer(totalSize);
+    const view = new DataView(packed);
+    const bytes = new Uint8Array(packed);
     let offset = 0;
-    for (const file of files) {
-        const nameBytes = new TextEncoder().encode(file.name);
-        const dataBytes = new Uint8Array(await file.data.arrayBuffer());
-        const crc = crc32(dataBytes);
-        // Local file header (30 bytes + filename)
-        const local = new Uint8Array(30 + nameBytes.length);
-        const lv = new DataView(local.buffer);
-        lv.setUint32(0, 0x04034b50, true);
-        lv.setUint16(4, 20, true);
-        lv.setUint16(8, 0, true);
-        lv.setUint32(14, crc, true);
-        lv.setUint32(18, dataBytes.length, true);
-        lv.setUint32(22, dataBytes.length, true);
-        lv.setUint16(26, nameBytes.length, true);
-        local.set(nameBytes, 30);
-        // Central directory entry (46 bytes + filename)
-        const cd = new Uint8Array(46 + nameBytes.length);
-        const cv = new DataView(cd.buffer);
-        cv.setUint32(0, 0x02014b50, true);
-        cv.setUint16(4, 20, true);
-        cv.setUint16(6, 20, true);
-        cv.setUint32(16, crc, true);
-        cv.setUint32(20, dataBytes.length, true);
-        cv.setUint32(24, dataBytes.length, true);
-        cv.setUint16(28, nameBytes.length, true);
-        cv.setUint32(42, offset, true);
-        cd.set(nameBytes, 46);
-        parts.push(local);
-        parts.push(dataBytes);
-        centralDir.push(cd);
-        offset += local.length + dataBytes.length;
-    }
-    const cdOffset = offset;
-    let cdSize = 0;
-    for (const entry of centralDir) {
-        parts.push(entry);
-        cdSize += entry.length;
-    }
-    // End of central directory (22 bytes)
-    const eocd = new Uint8Array(22);
-    const ev = new DataView(eocd.buffer);
-    ev.setUint32(0, 0x06054b50, true);
-    ev.setUint16(8, files.length, true);
-    ev.setUint16(10, files.length, true);
-    ev.setUint32(12, cdSize, true);
-    ev.setUint32(16, cdOffset, true);
-    parts.push(eocd);
-    return new Blob(parts, { type: 'application/zip' });
-}
-function crc32(data) {
-    let crc = 0xffffffff;
-    for (let i = 0; i < data.length; i++) {
-        crc ^= data[i];
-        for (let j = 0; j < 8; j++) {
-            crc = (crc >>> 1) ^ (crc & 1 ? 0xedb88320 : 0);
-        }
-    }
-    return (crc ^ 0xffffffff) >>> 0;
+    for (let i = 0; i < images.length; i++) {
+        if (!images[i].data)
+            continue;
+        const ab = buffers.shift();
+        const ts = images[i].id;
+        view.setUint32(offset, ts % 0x100000000, true);
+        view.setUint32(offset + 4, Math.floor(ts / 0x100000000), true);
+        offset += 8;
+        view.setUint32(offset, ab.byteLength, true);
+        offset += 4;
+        bytes.set(new Uint8Array(ab), offset);
+        offset += ab.byteLength;
+    }
+    return packed;
 }
 
 const LogLevel = {
@@ -3852,7 +3814,7 @@ class App {
         this.stopCallbacks = [];
         this.commitCallbacks = [];
         this.activityState = ActivityState.NotActive;
-        this.version = '17.2.3'; // TODO: version compatability check inside each plugin.
+        this.version = '17.2.5'; // TODO: version compatability check inside each plugin.
         this.socketMode = false;
         this.compressionThreshold = 24 * 1000;
         this.bc = null;
@@ -5036,7 +4998,6 @@ class App {
             if (startOpts.startCallback) {
                 startOpts.startCallback(SuccessfulStart(onStartInfo));
             }
-            await this.tagWatcher.fetchTags(this.options.ingestPoint, token);
             this.activityState = ActivityState.Active;
             if (this.options.crossdomain?.enabled) {
                 void this.bootChildrenFrames();
@@ -5073,6 +5034,7 @@ class App {
             }
             this.ticker.start();
             this.canvasRecorder?.startTracking();
+            void this.tagWatcher.fetchTags(this.options.ingestPoint, token);
             return SuccessfulStart(onStartInfo);
         }
         catch (reason) {
@@ -8294,6 +8256,8 @@ function webAnimations(app, options = {}) {
             const lastKF = anim.effect.getKeyframes().at(-1);
             if (!lastKF)
                 return;
+            if (!el || !(el instanceof Element) || !el.isConnected)
+                return;
             const computedStyle = getComputedStyle(el);
             const keys = Object.keys(lastKF).filter((p) => !toIgnore.includes(p));
             // @ts-ignore
@@ -8705,7 +8669,7 @@ class ConstantProperties {
             user_id: this.user_id,
             distinct_id: this.deviceId,
             sdk_edition: 'web',
-            sdk_version: '17.2.3',
+            sdk_version: '17.2.5',
             timezone: getUTCOffsetString(),
             search_engine: this.searchEngine,
         };
@@ -9038,10 +9002,11 @@ class People {
  * Creates batches of events, then sends them at intervals.
  */
 class Batcher {
-    constructor(backendUrl, getToken, init) {
+    constructor(backendUrl, getToken, init, standalone) {
         this.backendUrl = backendUrl;
         this.getToken = getToken;
         this.init = init;
+        this.standalone = standalone;
         this.autosendInterval = 5 * 1000;
         this.retryTimeout = 3 * 1000;
         this.retryLimit = 3;
@@ -9051,10 +9016,20 @@ class Batcher {
             [categories.events]: [],
         };
         this.intervalId = null;
+        this.stopped = false;
+        this.paused = false;
+        this.onVisibilityChange = () => {
+            this.paused = document.hidden;
+        };
     }
     getBatches() {
         this.batch[categories.people] = this.dedupePeopleEvents();
-        const finalData = { data: this.batch };
+        const finalData = {
+            data: {
+                [categories.people]: [...this.batch[categories.people]],
+                [categories.events]: [...this.batch[categories.events]],
+            },
+        };
         return finalData;
     }
     addEvent(event) {
@@ -9130,6 +9105,9 @@ class Batcher {
         return Array.from(uniqueEventsByType.values());
     }
     sendBatch(batch) {
+        if (this.stopped) {
+            return;
+        }
         const sentBatch = batch;
         let attempts = 0;
         const send = () => {
@@ -9146,8 +9124,21 @@ class Batcher {
                 },
                 body: JSON.stringify(sentBatch),
             })
-                .then((response) => {
-                if ([403, 401].includes(response.status)) {
+                .then(async (response) => {
+                if (response.status === 401) {
+                    const body = await response.json().catch(() => null);
+                    if (!this.standalone && body?.error === 'token expired') {
+                        this.stop();
+                        return;
+                    }
+                    if (attempts < this.retryLimit) {
+                        return this.init().then(() => {
+                            send();
+                        });
+                    }
+                    return;
+                }
+                if (response.status === 403) {
                     if (attempts < this.retryLimit) {
                         return this.init().then(() => {
                             send();
@@ -9171,8 +9162,12 @@ class Batcher {
         if (this.intervalId) {
             clearInterval(this.intervalId);
         }
+        this.paused = document.hidden;
+        document.addEventListener('visibilitychange', this.onVisibilityChange);
         this.intervalId = setInterval(() => {
-            this.flush();
+            if (!this.paused) {
+                this.flush();
+            }
         }, this.autosendInterval);
     }
     flush() {
@@ -9192,6 +9187,12 @@ class Batcher {
             clearInterval(this.intervalId);
             this.intervalId = null;
         }
+        document.removeEventListener('visibilitychange', this.onVisibilityChange);
+        this.stopped = true;
+    }
+    restart() {
+        this.stopped = false;
+        this.startAutosend();
     }
 }
 
@@ -9258,6 +9259,19 @@ class Analytics {
                 }
             }
         };
+        /**
+         * Used by tracker when running in blundled mode
+         */
+        this.onStart = () => {
+            if (!this.standalone) {
+                this.batcher.restart();
+            }
+        };
+        this.onStop = () => {
+            if (!this.standalone) {
+                this.batcher.stop();
+            }
+        };
         this.reset = () => {
             this.people.reset(true);
             this.events.reset();
@@ -9296,7 +9310,7 @@ class Analytics {
         this.standalone = !options.notStandalone;
         this.token = this.sessionStorage.getItem(STORAGEKEY);
         this.constantProperties = new ConstantProperties(this.localStorage, this.sessionStorage);
-        this.batcher = new Batcher(this.backendUrl, this._getToken, this.init);
+        this.batcher = new Batcher(this.backendUrl, this._getToken, this.init, this.standalone);
         this.events = new Events(this.constantProperties, this._getTimestamp, this.batcher);
         this.people = new People(this.constantProperties, this._getTimestamp, this.setUserId, this.batcher);
         if (options.notStandalone) {
@@ -9357,7 +9371,7 @@ class API {
         this.signalStartIssue = (reason, missingApi) => {
             const doNotTrack = this.checkDoNotTrack();
             console.log("Tracker couldn't start due to:", JSON.stringify({
-                trackerVersion: '17.2.3',
+                trackerVersion: '17.2.5',
                 projectKey: this.options.projectKey,
                 doNotTrack,
                 reason: missingApi.length ? `missing api: ${missingApi.join(',')}` : reason,
@@ -9509,6 +9523,12 @@ class API {
                     : (options.analytics?.ingestPoint ?? options.ingestPoint ?? defaultEdp),
                 projectKey: options.projectKey,
             });
+            app.attachStartCallback(() => {
+                this.analytics?.onStart();
+            });
+            app.attachStopCallback(() => {
+                this.analytics?.onStop();
+            });
         }
         if (!this.crossdomainMode) {
             // no need to send iframe viewport data since its a node for us