mixpanel-browser 2.61.0 → 2.61.1

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+**2.61.1** (11 Mar 2025)
+- Session recording stops if initial DOM snapshot fails
+- Errors triggered by rrweb's record function are now caught
+- Fix for issue causing opt-out check error messages in `debug` mode
+
+**2.61.0** (6 Mar 2025)
+- Session recordings now continue across page loads within the same tab, using IndexedDB for persistence
+
 **2.60.0** (31 Jan 2025)
 - Expanded Autocapture configs
 - Prevent duplicate values in persistence when using people.union (thanks @chrisdeely)

package/dist/mixpanel-core.cjs.js

@@ -2,7 +2,7 @@
 
 var Config = {
     DEBUG: false,
-    LIB_VERSION: '2.61.0'
+    LIB_VERSION: '2.61.1'
 };
 
 // since es6 imports are static and we run unit tests from the console, window won't be defined when importing this file
@@ -5624,7 +5624,7 @@ IDBStorageWrapper.prototype.makeTransaction = function (mode, storeCb) {
     return this.dbPromise
         .then(doTransaction)
         .catch(function (err) {
-            if (err['name'] === 'InvalidStateError') {
+            if (err && err['name'] === 'InvalidStateError') {
                 // try reopening the DB if the connection is closed
                 this.dbPromise = this._openDb();
                 return this.dbPromise.then(doTransaction);

package/dist/mixpanel-recorder.js

@@ -4894,7 +4894,7 @@
 
     var Config = {
         DEBUG: false,
-        LIB_VERSION: '2.61.0'
+        LIB_VERSION: '2.61.1'
     };
 
     /* eslint camelcase: "off", eqeqeq: "off" */
@@ -6705,7 +6705,7 @@
         return this.dbPromise
             .then(doTransaction)
             .catch(function (err) {
-                if (err['name'] === 'InvalidStateError') {
+                if (err && err['name'] === 'InvalidStateError') {
                     // try reopening the DB if the connection is closed
                     this.dbPromise = this._openDb();
                     return this.dbPromise.then(doTransaction);
@@ -7997,34 +7997,37 @@
             blockSelector = undefined;
         }
 
-        this._stopRecording = this._rrwebRecord({
-            'emit': addOptOutCheckMixpanelLib(function (ev) {
-                if (isUserEvent(ev)) {
-                    if (this.batcher.stopped && new Date().getTime() - this.replayStartTime >= this.recordMinMs) {
-                        // start flushing again after user activity
-                        this.batcher.start();
+        try {
+            this._stopRecording = this._rrwebRecord({
+                'emit': function (ev) {
+                    if (isUserEvent(ev)) {
+                        if (this.batcher.stopped && new Date().getTime() - this.replayStartTime >= this.recordMinMs) {
+                            // start flushing again after user activity
+                            this.batcher.start();
+                        }
+                        resetIdleTimeout();
                     }
-                    resetIdleTimeout();
+                    // promise only used to await during tests
+                    this.__enqueuePromise = this.batcher.enqueue(ev);
+                }.bind(this),
+                'blockClass': this.getConfig('record_block_class'),
+                'blockSelector': blockSelector,
+                'collectFonts': this.getConfig('record_collect_fonts'),
+                'dataURLOptions': { // canvas image options (https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL)
+                    'type': 'image/webp',
+                    'quality': 0.6
+                },
+                'maskAllInputs': true,
+                'maskTextClass': this.getConfig('record_mask_text_class'),
+                'maskTextSelector': this.getConfig('record_mask_text_selector'),
+                'recordCanvas': this.getConfig('record_canvas'),
+                'sampling': {
+                    'canvas': 15
                 }
-
-                // promise only used to await during tests
-                this.__enqueuePromise = this.batcher.enqueue(ev);
-            }.bind(this)),
-            'blockClass': this.getConfig('record_block_class'),
-            'blockSelector': blockSelector,
-            'collectFonts': this.getConfig('record_collect_fonts'),
-            'dataURLOptions': { // canvas image options (https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL)
-                'type': 'image/webp',
-                'quality': 0.6
-            },
-            'maskAllInputs': true,
-            'maskTextClass': this.getConfig('record_mask_text_class'),
-            'maskTextSelector': this.getConfig('record_mask_text_selector'),
-            'recordCanvas': this.getConfig('record_canvas'),
-            'sampling': {
-                'canvas': 15
-            }
-        });
+            });
+        } catch (err) {
+            this.reportError('Unexpected error when starting rrweb recording.', err);
+        }
 
         if (typeof this._stopRecording !== 'function') {
             this.reportError('rrweb failed to start, skipping this recording.');
@@ -8068,12 +8071,21 @@
         return this._stopRecording === null;
     };
 
+
     /**
      * Flushes the current batch of events to the server, but passes an opt-out callback to make sure
      * we stop recording and dump any queued events if the user has opted out.
      */
     SessionRecording.prototype.flushEventsWithOptOut = function (data, options, cb) {
-        this._flushEvents(data, options, cb, this._onOptOut.bind(this));
+        var onOptOut = function (code) {
+            // addOptOutCheckMixpanelLib invokes this function with code=0 when the user has opted out
+            if (code === 0) {
+                this.stopRecording();
+                cb({error: 'Tracking has been opted out, stopping recording.'});
+            }
+        }.bind(this);
+
+        this._flushEvents(data, options, cb, onOptOut);
     };
 
     /**
@@ -8123,13 +8135,6 @@
         return recording;
     };
 
-    SessionRecording.prototype._onOptOut = function (code) {
-        // addOptOutCheckMixpanelLib invokes this function with code=0 when the user has opted out
-        if (code === 0) {
-            this.stopRecording();
-        }
-    };
-
     SessionRecording.prototype._sendRequest = function(currentReplayId, reqParams, reqBody, callback) {
         var onSuccess = function (response, responseBody) {
             // Update batch specific props only if the request was successful to guarantee ordering.
@@ -8172,17 +8177,32 @@
 
         if (numEvents > 0) {
             var replayId = this.replayId;
+
             // each rrweb event has a timestamp - leverage those to get time properties
-            var batchStartTime = data[0].timestamp;
-            if (this.seqNo === 0 || !this.replayStartTime) {
-                // extra safety net so that we don't send a null replay start time
-                if (this.seqNo !== 0) {
-                    this.reportError('Replay start time not set but seqNo is not 0. Using current batch start time as a fallback.');
+            var batchStartTime = Infinity;
+            var batchEndTime = -Infinity;
+            var hasFullSnapshot = false;
+            for (var i = 0; i < numEvents; i++) {
+                batchStartTime = Math.min(batchStartTime, data[i].timestamp);
+                batchEndTime = Math.max(batchEndTime, data[i].timestamp);
+                if (data[i].type === EventType.FullSnapshot) {
+                    hasFullSnapshot = true;
                 }
+            }
 
+            if (this.seqNo === 0) {
+                if (!hasFullSnapshot) {
+                    callback({error: 'First batch does not contain a full snapshot. Aborting recording.'});
+                    this.stopRecording(true);
+                    return;
+                }
+                this.replayStartTime = batchStartTime;
+            } else if (!this.replayStartTime) {
+                this.reportError('Replay start time not set but seqNo is not 0. Using current batch start time as a fallback.');
                 this.replayStartTime = batchStartTime;
             }
-            var replayLengthMs = data[numEvents - 1].timestamp - this.replayStartTime;
+
+            var replayLengthMs = batchEndTime - this.replayStartTime;
 
             var reqParams = {
                 '$current_url': this.batchStartUrl,