mixpanel-browser 2.55.0 → 2.56.0

package/dist/mixpanel-recorder.js

@@ -4510,7 +4510,7 @@
 
     var Config = {
         DEBUG: false,
-        LIB_VERSION: '2.55.0'
+        LIB_VERSION: '2.56.0'
     };
 
     /* eslint camelcase: "off", eqeqeq: "off" */
@@ -4522,7 +4522,7 @@
             hostname: ''
         };
         win = {
-            navigator: { userAgent: '' },
+            navigator: { userAgent: '', onLine: true },
             document: {
                 location: loc,
                 referrer: ''
@@ -4536,6 +4536,8 @@
 
     // Maximum allowed session recording length
     var MAX_RECORDING_MS = 24 * 60 * 60 * 1000; // 24 hours
+    // Maximum allowed value for minimum session recording length
+    var MAX_VALUE_FOR_MIN_RECORDING_MS = 8 * 1000; // 8 seconds
 
     /*
      * Saved references to long variable names, so that closure compiler can
@@ -5447,7 +5449,7 @@
     _.getQueryParam = function(url, param) {
         // Expects a raw URL
 
-        param = param.replace(/[[]/, '\\[').replace(/[\]]/, '\\]');
+        param = param.replace(/[[]/g, '\\[').replace(/[\]]/g, '\\]');
         var regexS = '[\\?&]' + param + '=([^&#]*)',
             regex = new RegExp(regexS),
             results = regex.exec(url);
@@ -5904,8 +5906,8 @@
         };
     })();
 
-    var CAMPAIGN_KEYWORDS = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_content', 'utm_term'];
-    var CLICK_IDS = ['dclid', 'fbclid', 'gclid', 'ko_click_id', 'li_fat_id', 'msclkid', 'ttclid', 'twclid', 'wbraid'];
+    var CAMPAIGN_KEYWORDS = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_content', 'utm_term', 'utm_id', 'utm_source_platform','utm_campaign_id', 'utm_creative_format', 'utm_marketing_tactic'];
+    var CLICK_IDS = ['dclid', 'fbclid', 'gclid', 'ko_click_id', 'li_fat_id', 'msclkid', 'sccid', 'ttclid', 'twclid', 'wbraid'];
 
     _.info = {
         campaignParams: function(default_value) {
@@ -6187,6 +6189,15 @@
         return matches ? matches[0] : '';
     };
 
+    /**
+     * Check whether we have network connection. default to true for browsers that don't support navigator.onLine (IE)
+     * @returns {boolean}
+     */
+    var isOnline = function() {
+        var onLine = win.navigator['onLine'];
+        return _.isUndefined(onLine) || onLine;
+    };
+
     var JSONStringify = null, JSONParse = null;
     if (typeof JSON !== 'undefined') {
         JSONStringify = JSON.stringify;
@@ -6375,7 +6386,7 @@
         };
     }
 
-    var logger$3 = console_with_prefix('lock');
+    var logger$4 = console_with_prefix('lock');
 
     /**
      * SharedLock: a mutex built on HTML5 localStorage, to ensure that only one browser
@@ -6432,7 +6443,7 @@
 
         var delay = function(cb) {
             if (new Date().getTime() - startTime > timeoutMS) {
-                logger$3.error('Timeout waiting for mutex on ' + key + '; clearing lock. [' + i + ']');
+                logger$4.error('Timeout waiting for mutex on ' + key + '; clearing lock. [' + i + ']');
                 storage.removeItem(keyZ);
                 storage.removeItem(keyY);
                 loop();
@@ -6521,7 +6532,7 @@
         }
     };
 
-    var logger$2 = console_with_prefix('batch');
+    var logger$3 = console_with_prefix('batch');
 
     /**
      * RequestQueue: queue for batching API requests with localStorage backup for retries.
@@ -6542,11 +6553,13 @@
     var RequestQueue = function(storageKey, options) {
         options = options || {};
         this.storageKey = storageKey;
-        this.storage = options.storage || window.localStorage;
-        this.reportError = options.errorReporter || _.bind(logger$2.error, logger$2);
-        this.lock = new SharedLock(storageKey, {storage: this.storage});
-
         this.usePersistence = options.usePersistence;
+        if (this.usePersistence) {
+            this.storage = options.storage || window.localStorage;
+            this.lock = new SharedLock(storageKey, {storage: this.storage});
+        }
+        this.reportError = options.errorReporter || _.bind(logger$3.error, logger$3);
+
         this.pid = options.pid || null; // pass pid to test out storage lock contention scenarios
 
         this.memQueue = [];
@@ -6825,7 +6838,7 @@
     // maximum interval between request retries after exponential backoff
     var MAX_RETRY_INTERVAL_MS = 10 * 60 * 1000; // 10 minutes
 
-    var logger$1 = console_with_prefix('batch');
+    var logger$2 = console_with_prefix('batch');
 
     /**
      * RequestBatcher: manages the queueing, flushing, retry etc of requests of one
@@ -6939,7 +6952,7 @@
         try {
 
             if (this.requestInProgress) {
-                logger$1.log('Flush: Request already in progress');
+                logger$2.log('Flush: Request already in progress');
                 return;
             }
 
@@ -7018,7 +7031,12 @@
                         this.flush();
                     } else if (
                         _.isObject(res) &&
-                        (res.httpStatusCode >= 500 || res.httpStatusCode === 429 || res.error === 'timeout')
+                        (
+                            res.httpStatusCode >= 500
+                            || res.httpStatusCode === 429
+                            || (res.httpStatusCode <= 0 && !isOnline())
+                            || res.error === 'timeout'
+                        )
                     ) {
                         // network or API error, or 429 Too Many Requests, retry
                         var retryMS = this.flushInterval * 2;
@@ -7102,7 +7120,7 @@
             if (options.unloading) {
                 requestOptions.transport = 'sendBeacon';
             }
-            logger$1.log('MIXPANEL REQUEST:', dataForRequest);
+            logger$2.log('MIXPANEL REQUEST:', dataForRequest);
             this.sendRequest(dataForRequest, requestOptions, batchSendCallback);
         } catch(err) {
             this.reportError('Error flushing request queue', err);
@@ -7114,7 +7132,7 @@
      * Log error to global logger and optional user-defined logger.
      */
     RequestBatcher.prototype.reportError = function(msg, err) {
-        logger$1.error.apply(logger$1.error, arguments);
+        logger$2.error.apply(logger$2.error, arguments);
         if (this.errorReporter) {
             try {
                 if (!(err instanceof Error)) {
@@ -7122,12 +7140,12 @@
                 }
                 this.errorReporter(msg, err);
             } catch(err) {
-                logger$1.error(err);
+                logger$2.error(err);
             }
         }
     };
 
-    var logger = console_with_prefix('recorder');
+    var logger$1 = console_with_prefix('recorder');
     var CompressionStream = win['CompressionStream'];
 
     var RECORDER_BATCHER_LIB_CONFIG = {
@@ -7153,63 +7171,85 @@
         return ev.type === EventType.IncrementalSnapshot && ACTIVE_SOURCES.has(ev.data.source);
     }
 
-    var MixpanelRecorder = function(mixpanelInstance) {
-        this._mixpanel = mixpanelInstance;
+    /**
+     * This class encapsulates a single session recording and its lifecycle.
+     * @param {Object} [options.mixpanelInstance] - reference to the core MixpanelLib
+     * @param {String} [options.replayId] - unique uuid for a single replay
+     * @param {Function} [options.onIdleTimeout] - callback when a recording reaches idle timeout
+     * @param {Function} [options.onMaxLengthReached] - callback when a recording reaches its maximum length
+     * @param {Function} [options.rrwebRecord] - rrweb's `record` function
+     */
+    var SessionRecording = function(options) {
+        this._mixpanel = options.mixpanelInstance;
+        this._onIdleTimeout = options.onIdleTimeout;
+        this._onMaxLengthReached = options.onMaxLengthReached;
+        this._rrwebRecord = options.rrwebRecord;
+
+        this.replayId = options.replayId;
 
         // internal rrweb stopRecording function
         this._stopRecording = null;
 
-        this.recEvents = [];
         this.seqNo = 0;
-        this.replayId = null;
         this.replayStartTime = null;
-        this.sendBatchId = null;
+        this.batchStartUrl = null;
 
         this.idleTimeoutId = null;
         this.maxTimeoutId = null;
 
         this.recordMaxMs = MAX_RECORDING_MS;
-        this._initBatcher();
-    };
-
+        this.recordMinMs = 0;
 
-    MixpanelRecorder.prototype._initBatcher = function () {
-        this.batcher = new RequestBatcher('__mprec', {
-            libConfig: RECORDER_BATCHER_LIB_CONFIG,
-            sendRequestFunc: _.bind(this.flushEventsWithOptOut, this),
+        // each replay has its own batcher key to avoid conflicts between rrweb events of different recordings
+        // this will be important when persistence is introduced
+        var batcherKey = '__mprec_' + this.getConfig('token') + '_' + this.replayId;
+        this.batcher = new RequestBatcher(batcherKey, {
             errorReporter: _.bind(this.reportError, this),
             flushOnlyOnInterval: true,
+            libConfig: RECORDER_BATCHER_LIB_CONFIG,
+            sendRequestFunc: _.bind(this.flushEventsWithOptOut, this),
             usePersistence: false
         });
     };
 
-    // eslint-disable-next-line camelcase
-    MixpanelRecorder.prototype.get_config = function(configVar) {
+    SessionRecording.prototype.getConfig = function(configVar) {
         return this._mixpanel.get_config(configVar);
     };
 
-    MixpanelRecorder.prototype.startRecording = function (shouldStopBatcher) {
+    // Alias for getConfig, used by the common addOptOutCheckMixpanelLib function which
+    // reaches into this class instance and expects the snake case version of the function.
+    // eslint-disable-next-line camelcase
+    SessionRecording.prototype.get_config = function(configVar) {
+        return this.getConfig(configVar);
+    };
+
+    SessionRecording.prototype.startRecording = function (shouldStopBatcher) {
         if (this._stopRecording !== null) {
-            logger.log('Recording already in progress, skipping startRecording.');
+            logger$1.log('Recording already in progress, skipping startRecording.');
             return;
         }
 
-        this.recordMaxMs = this.get_config('record_max_ms');
+        this.recordMaxMs = this.getConfig('record_max_ms');
         if (this.recordMaxMs > MAX_RECORDING_MS) {
             this.recordMaxMs = MAX_RECORDING_MS;
-            logger.critical('record_max_ms cannot be greater than ' + MAX_RECORDING_MS + 'ms. Capping value.');
+            logger$1.critical('record_max_ms cannot be greater than ' + MAX_RECORDING_MS + 'ms. Capping value.');
         }
 
-        this.recEvents = [];
-        this.seqNo = 0;
-        this.replayStartTime = null;
+        this.recordMinMs = this.getConfig('record_min_ms');
+        if (this.recordMinMs > MAX_VALUE_FOR_MIN_RECORDING_MS) {
+            this.recordMinMs = MAX_VALUE_FOR_MIN_RECORDING_MS;
+            logger$1.critical('record_min_ms cannot be greater than ' + MAX_VALUE_FOR_MIN_RECORDING_MS + 'ms. Capping value.');
+        }
 
-        this.replayId = _.UUID();
+        this.replayStartTime = new Date().getTime();
+        this.batchStartUrl = _.info.currentUrl();
 
-        if (shouldStopBatcher) {
-            // this is the case when we're starting recording after a reset
+        if (shouldStopBatcher || this.recordMinMs > 0) {
+            // the primary case for shouldStopBatcher is when we're starting recording after a reset
             // and don't want to send anything over the network until there's
             // actual user activity
+            // this also applies if the minimum recording length has not been hit yet
+            // so that we don't send data until we know the recording will be long enough
             this.batcher.stop();
         } else {
             this.batcher.start();
@@ -7217,45 +7257,52 @@
 
         var resetIdleTimeout = _.bind(function () {
             clearTimeout(this.idleTimeoutId);
-            this.idleTimeoutId = setTimeout(_.bind(function () {
-                logger.log('Idle timeout reached, restarting recording.');
-                this.resetRecording();
-            }, this), this.get_config('record_idle_timeout_ms'));
+            this.idleTimeoutId = setTimeout(this._onIdleTimeout, this.getConfig('record_idle_timeout_ms'));
         }, this);
 
-        this._stopRecording = record({
+        var blockSelector = this.getConfig('record_block_selector');
+        if (blockSelector === '' || blockSelector === null) {
+            blockSelector = undefined;
+        }
+
+        this._stopRecording = this._rrwebRecord({
             'emit': _.bind(function (ev) {
                 this.batcher.enqueue(ev);
                 if (isUserEvent(ev)) {
-                    if (this.batcher.stopped) {
+                    if (this.batcher.stopped && new Date().getTime() - this.replayStartTime >= this.recordMinMs) {
                         // start flushing again after user activity
                         this.batcher.start();
                     }
                     resetIdleTimeout();
                 }
             }, this),
-            'blockClass': this.get_config('record_block_class'),
-            'blockSelector': this.get_config('record_block_selector'),
-            'collectFonts': this.get_config('record_collect_fonts'),
-            'inlineImages': this.get_config('record_inline_images'),
+            'blockClass': this.getConfig('record_block_class'),
+            'blockSelector': blockSelector,
+            'collectFonts': this.getConfig('record_collect_fonts'),
             'maskAllInputs': true,
-            'maskTextClass': this.get_config('record_mask_text_class'),
-            'maskTextSelector': this.get_config('record_mask_text_selector')
+            'maskTextClass': this.getConfig('record_mask_text_class'),
+            'maskTextSelector': this.getConfig('record_mask_text_selector')
         });
 
-        resetIdleTimeout();
+        if (typeof this._stopRecording !== 'function') {
+            this.reportError('rrweb failed to start, skipping this recording.');
+            this._stopRecording = null;
+            this.stopRecording(); // stop batcher looping and any timeouts
+            return;
+        }
 
-        this.maxTimeoutId = setTimeout(_.bind(this.resetRecording, this), this.recordMaxMs);
-    };
+        resetIdleTimeout();
 
-    MixpanelRecorder.prototype.resetRecording = function () {
-        this.stopRecording();
-        this.startRecording(true);
+        this.maxTimeoutId = setTimeout(_.bind(this._onMaxLengthReached, this), this.recordMaxMs);
     };
 
-    MixpanelRecorder.prototype.stopRecording = function () {
-        if (this._stopRecording !== null) {
-            this._stopRecording();
+    SessionRecording.prototype.stopRecording = function () {
+        if (!this.isRrwebStopped()) {
+            try {
+                this._stopRecording();
+            } catch (err) {
+                this.reportError('Error with rrweb stopRecording', err);
+            }
             this._stopRecording = null;
         }
 
@@ -7267,36 +7314,39 @@
             this.batcher.flush();
             this.batcher.stop();
         }
-        this.replayId = null;
 
         clearTimeout(this.idleTimeoutId);
         clearTimeout(this.maxTimeoutId);
     };
 
+    SessionRecording.prototype.isRrwebStopped = function () {
+        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.
      */
-    MixpanelRecorder.prototype.flushEventsWithOptOut = function (data, options, cb) {
+    SessionRecording.prototype.flushEventsWithOptOut = function (data, options, cb) {
         this._flushEvents(data, options, cb, _.bind(this._onOptOut, this));
     };
 
-    MixpanelRecorder.prototype._onOptOut = function (code) {
+    SessionRecording.prototype._onOptOut = function (code) {
         // addOptOutCheckMixpanelLib invokes this function with code=0 when the user has opted out
         if (code === 0) {
-            this.recEvents = [];
             this.stopRecording();
         }
     };
 
-    MixpanelRecorder.prototype._sendRequest = function(reqParams, reqBody, callback) {
+    SessionRecording.prototype._sendRequest = function(currentReplayId, reqParams, reqBody, callback) {
         var onSuccess = _.bind(function (response, responseBody) {
-            // Increment sequence counter only if the request was successful to guarantee ordering.
+            // Update batch specific props only if the request was successful to guarantee ordering.
             // RequestBatcher will always flush the next batch after the previous one succeeds.
-            if (response.status === 200) {
+            // extra check to see if the replay ID has changed so that we don't increment the seqNo on the wrong replay
+            if (response.status === 200 && this.replayId === currentReplayId) {
                 this.seqNo++;
+                this.batchStartUrl = _.info.currentUrl();
             }
-
             callback({
                 status: 0,
                 httpStatusCode: response.status,
@@ -7305,10 +7355,10 @@
             });
         }, this);
 
-        win['fetch'](this.get_config('api_host') + '/' + this.get_config('api_routes')['record'] + '?' + new URLSearchParams(reqParams), {
+        win['fetch'](this.getConfig('api_host') + '/' + this.getConfig('api_routes')['record'] + '?' + new URLSearchParams(reqParams), {
             'method': 'POST',
             'headers': {
-                'Authorization': 'Basic ' + btoa(this.get_config('token') + ':'),
+                'Authorization': 'Basic ' + btoa(this.getConfig('token') + ':'),
                 'Content-Type': 'application/octet-stream'
             },
             'body': reqBody,
@@ -7319,28 +7369,37 @@
                 callback({error: error});
             });
         }).catch(function (error) {
-            callback({error: error});
+            callback({error: error, httpStatusCode: 0});
         });
     };
 
-    MixpanelRecorder.prototype._flushEvents = addOptOutCheckMixpanelLib(function (data, options, callback) {
+    SessionRecording.prototype._flushEvents = addOptOutCheckMixpanelLib(function (data, options, callback) {
         const numEvents = data.length;
 
         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) {
+            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.');
+                }
+
                 this.replayStartTime = batchStartTime;
             }
             var replayLengthMs = data[numEvents - 1].timestamp - this.replayStartTime;
 
             var reqParams = {
-                'distinct_id': String(this._mixpanel.get_distinct_id()),
-                'seq': this.seqNo,
+                '$current_url': this.batchStartUrl,
+                '$lib_version': Config.LIB_VERSION,
                 'batch_start_time': batchStartTime / 1000,
-                'replay_id': this.replayId,
+                'distinct_id': String(this._mixpanel.get_distinct_id()),
+                'mp_lib': 'web',
+                'replay_id': replayId,
                 'replay_length_ms': replayLengthMs,
-                'replay_start_time': this.replayStartTime / 1000
+                'replay_start_time': this.replayStartTime / 1000,
+                'seq': this.seqNo
             };
             var eventsJson = _.JSONEncode(data);
 
@@ -7361,28 +7420,93 @@
                     .blob()
                     .then(_.bind(function(compressedBlob) {
                         reqParams['format'] = 'gzip';
-                        this._sendRequest(reqParams, compressedBlob, callback);
+                        this._sendRequest(replayId, reqParams, compressedBlob, callback);
                     }, this));
             } else {
                 reqParams['format'] = 'body';
-                this._sendRequest(reqParams, eventsJson, callback);
+                this._sendRequest(replayId, reqParams, eventsJson, callback);
             }
         }
     });
 
 
-    MixpanelRecorder.prototype.reportError = function(msg, err) {
-        logger.error.apply(logger.error, arguments);
+    SessionRecording.prototype.reportError = function(msg, err) {
+        logger$1.error.apply(logger$1.error, arguments);
         try {
             if (!err && !(msg instanceof Error)) {
                 msg = new Error(msg);
             }
-            this.get_config('error_reporter')(msg, err);
+            this.getConfig('error_reporter')(msg, err);
         } catch(err) {
-            logger.error(err);
+            logger$1.error(err);
+        }
+    };
+
+    var logger = console_with_prefix('recorder');
+
+    /**
+     * Recorder API: manages recordings and exposes methods public to the core Mixpanel library.
+     * @param {Object} [options.mixpanelInstance] - reference to the core MixpanelLib
+     */
+    var MixpanelRecorder = function(mixpanelInstance) {
+        this._mixpanel = mixpanelInstance;
+        this.activeRecording = null;
+    };
+
+    MixpanelRecorder.prototype.startRecording = function(shouldStopBatcher) {
+        if (this.activeRecording && !this.activeRecording.isRrwebStopped()) {
+            logger.log('Recording already in progress, skipping startRecording.');
+            return;
+        }
+
+        var onIdleTimeout = _.bind(function () {
+            logger.log('Idle timeout reached, restarting recording.');
+            this.resetRecording();
+        }, this);
+
+        var onMaxLengthReached = _.bind(function () {
+            logger.log('Max recording length reached, stopping recording.');
+            this.resetRecording();
+        }, this);
+
+        this.activeRecording = new SessionRecording({
+            mixpanelInstance: this._mixpanel,
+            onIdleTimeout: onIdleTimeout,
+            onMaxLengthReached: onMaxLengthReached,
+            replayId: _.UUID(),
+            rrwebRecord: record
+        });
+
+        this.activeRecording.startRecording(shouldStopBatcher);
+    };
+
+    MixpanelRecorder.prototype.stopRecording = function() {
+        if (this.activeRecording) {
+            this.activeRecording.stopRecording();
+            this.activeRecording = null;
         }
     };
 
+    MixpanelRecorder.prototype.resetRecording = function () {
+        this.stopRecording();
+        this.startRecording(true);
+    };
+
+    MixpanelRecorder.prototype.getActiveReplayId = function () {
+        if (this.activeRecording && !this.activeRecording.isRrwebStopped()) {
+            return this.activeRecording.replayId;
+        } else {
+            return null;
+        }
+    };
+
+    // getter so that older mixpanel-core versions can still retrieve the replay ID
+    // when pulling the latest recorder bundle from the CDN
+    Object.defineProperty(MixpanelRecorder.prototype, 'replayId', {
+        get: function () {
+            return this.getActiveReplayId();
+        }
+    });
 
     win['__mp_recorder'] = MixpanelRecorder;