mixpanel-browser 2.54.1 → 2.55.1

package/dist/mixpanel.umd.js

@@ -4513,7 +4513,7 @@
 
     var Config = {
         DEBUG: false,
-        LIB_VERSION: '2.54.1'
+        LIB_VERSION: '2.55.1'
     };
 
     /* eslint camelcase: "off", eqeqeq: "off" */
@@ -4525,7 +4525,7 @@
             hostname: ''
         };
         win = {
-            navigator: { userAgent: '' },
+            navigator: { userAgent: '', onLine: true },
             document: {
                 location: loc,
                 referrer: ''
@@ -4539,6 +4539,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
@@ -5479,7 +5481,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);
@@ -5936,8 +5938,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) {
@@ -6219,6 +6221,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;
@@ -7182,7 +7193,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;
@@ -7333,6 +7349,7 @@
         this.maxTimeoutId = null;
 
         this.recordMaxMs = MAX_RECORDING_MS;
+        this.recordMinMs = 0;
         this._initBatcher();
     };
 
@@ -7364,16 +7381,24 @@
             logger.critical('record_max_ms cannot be greater than ' + MAX_RECORDING_MS + 'ms. Capping value.');
         }
 
+        this.recordMinMs = this.get_config('record_min_ms');
+        if (this.recordMinMs > MAX_VALUE_FOR_MIN_RECORDING_MS) {
+            this.recordMinMs = MAX_VALUE_FOR_MIN_RECORDING_MS;
+            logger.critical('record_min_ms cannot be greater than ' + MAX_VALUE_FOR_MIN_RECORDING_MS + 'ms. Capping value.');
+        }
+
         this.recEvents = [];
         this.seqNo = 0;
-        this.replayStartTime = null;
+        this.replayStartTime = new Date().getTime();
 
         this.replayId = _.UUID();
 
-        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();
@@ -7387,11 +7412,16 @@
             }, this), this.get_config('record_idle_timeout_ms'));
         }, this);
 
+        var blockSelector = this.get_config('record_block_selector');
+        if (blockSelector === '' || blockSelector === null) {
+            blockSelector = undefined;
+        }
+
         this._stopRecording = record({
             '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();
                     }
@@ -7399,7 +7429,7 @@
                 }
             }, this),
             'blockClass': this.get_config('record_block_class'),
-            'blockSelector': this.get_config('record_block_selector'),
+            'blockSelector': blockSelector,
             'collectFonts': this.get_config('record_collect_fonts'),
             'inlineImages': this.get_config('record_inline_images'),
             'maskAllInputs': true,
@@ -7453,14 +7483,14 @@
         }
     };
 
-    MixpanelRecorder.prototype._sendRequest = function(reqParams, reqBody, callback) {
+    MixpanelRecorder.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.
             // 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++;
             }
-
             callback({
                 status: 0,
                 httpStatusCode: response.status,
@@ -7483,7 +7513,7 @@
                 callback({error: error});
             });
         }).catch(function (error) {
-            callback({error: error});
+            callback({error: error, httpStatusCode: 0});
         });
     };
 
@@ -7491,9 +7521,15 @@
         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;
@@ -7502,7 +7538,7 @@
                 'distinct_id': String(this._mixpanel.get_distinct_id()),
                 'seq': this.seqNo,
                 'batch_start_time': batchStartTime / 1000,
-                'replay_id': this.replayId,
+                'replay_id': replayId,
                 'replay_length_ms': replayLengthMs,
                 'replay_start_time': this.replayStartTime / 1000
             };
@@ -7525,11 +7561,11 @@
                     .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);
             }
         }
     });
@@ -9017,6 +9053,7 @@
         'record_mask_text_class':            new RegExp('^(mp-mask|fs-mask|amp-mask|rr-mask|ph-mask)$'),
         'record_mask_text_selector':         '*',
         'record_max_ms':                     MAX_RECORDING_MS,
+        'record_min_ms':                     0,
         'record_sessions_percent':           0,
         'recorder_src':                      'https://cdn.mxpnl.com/libs/mixpanel-recorder.min.js'
     };

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "mixpanel-browser",
-  "version": "2.54.1",
+  "version": "2.55.1",
   "description": "The official Mixpanel JavaScript browser client library",
   "main": "dist/mixpanel.cjs.js",
+  "module": "dist/mixpanel.module.js",
   "directories": {
     "test": "tests"
   },

package/src/config.js

@@ -1,6 +1,6 @@
 var Config = {
     DEBUG: false,
-    LIB_VERSION: '2.54.1'
+    LIB_VERSION: '2.55.1'
 };
 
 export default Config;

package/src/mixpanel-core.js

@@ -152,6 +152,7 @@ var DEFAULT_CONFIG = {
     'record_mask_text_class':            new RegExp('^(mp-mask|fs-mask|amp-mask|rr-mask|ph-mask)$'),
     'record_mask_text_selector':         '*',
     'record_max_ms':                     MAX_RECORDING_MS,
+    'record_min_ms':                     0,
     'record_sessions_percent':           0,
     'recorder_src':                      'https://cdn.mxpnl.com/libs/mixpanel-recorder.min.js'
 };

package/src/recorder/index.js

@@ -1,7 +1,7 @@
 import { record } from 'rrweb';
 import { IncrementalSource, EventType } from '@rrweb/types';
 
-import { MAX_RECORDING_MS, console_with_prefix, _, window} from '../utils'; // eslint-disable-line camelcase
+import { MAX_RECORDING_MS, MAX_VALUE_FOR_MIN_RECORDING_MS, console_with_prefix, _, window} from '../utils'; // eslint-disable-line camelcase
 import { addOptOutCheckMixpanelLib } from '../gdpr-utils';
 import { RequestBatcher } from '../request-batcher';
 
@@ -47,6 +47,7 @@ var MixpanelRecorder = function(mixpanelInstance) {
     this.maxTimeoutId = null;
 
     this.recordMaxMs = MAX_RECORDING_MS;
+    this.recordMinMs = 0;
     this._initBatcher();
 };
 
@@ -78,16 +79,24 @@ MixpanelRecorder.prototype.startRecording = function (shouldStopBatcher) {
         logger.critical('record_max_ms cannot be greater than ' + MAX_RECORDING_MS + 'ms. Capping value.');
     }
 
+    this.recordMinMs = this.get_config('record_min_ms');
+    if (this.recordMinMs > MAX_VALUE_FOR_MIN_RECORDING_MS) {
+        this.recordMinMs = MAX_VALUE_FOR_MIN_RECORDING_MS;
+        logger.critical('record_min_ms cannot be greater than ' + MAX_VALUE_FOR_MIN_RECORDING_MS + 'ms. Capping value.');
+    }
+
     this.recEvents = [];
     this.seqNo = 0;
-    this.replayStartTime = null;
+    this.replayStartTime = new Date().getTime();
 
     this.replayId = _.UUID();
 
-    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();
@@ -101,11 +110,16 @@ MixpanelRecorder.prototype.startRecording = function (shouldStopBatcher) {
         }, this), this.get_config('record_idle_timeout_ms'));
     }, this);
 
+    var blockSelector = this.get_config('record_block_selector');
+    if (blockSelector === '' || blockSelector === null) {
+        blockSelector = undefined;
+    }
+
     this._stopRecording = record({
         '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();
                 }
@@ -113,7 +127,7 @@ MixpanelRecorder.prototype.startRecording = function (shouldStopBatcher) {
             }
         }, this),
         'blockClass': this.get_config('record_block_class'),
-        'blockSelector': this.get_config('record_block_selector'),
+        'blockSelector': blockSelector,
         'collectFonts': this.get_config('record_collect_fonts'),
         'inlineImages': this.get_config('record_inline_images'),
         'maskAllInputs': true,
@@ -167,14 +181,14 @@ MixpanelRecorder.prototype._onOptOut = function (code) {
     }
 };
 
-MixpanelRecorder.prototype._sendRequest = function(reqParams, reqBody, callback) {
+MixpanelRecorder.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.
         // 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++;
         }
-
         callback({
             status: 0,
             httpStatusCode: response.status,
@@ -197,7 +211,7 @@ MixpanelRecorder.prototype._sendRequest = function(reqParams, reqBody, callback)
             callback({error: error});
         });
     }).catch(function (error) {
-        callback({error: error});
+        callback({error: error, httpStatusCode: 0});
     });
 };
 
@@ -205,9 +219,15 @@ MixpanelRecorder.prototype._flushEvents = addOptOutCheckMixpanelLib(function (da
     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;
@@ -216,7 +236,7 @@ MixpanelRecorder.prototype._flushEvents = addOptOutCheckMixpanelLib(function (da
             'distinct_id': String(this._mixpanel.get_distinct_id()),
             'seq': this.seqNo,
             'batch_start_time': batchStartTime / 1000,
-            'replay_id': this.replayId,
+            'replay_id': replayId,
             'replay_length_ms': replayLengthMs,
             'replay_start_time': this.replayStartTime / 1000
         };
@@ -239,11 +259,11 @@ MixpanelRecorder.prototype._flushEvents = addOptOutCheckMixpanelLib(function (da
                 .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);
         }
     }
 });

package/src/request-batcher.js

@@ -1,6 +1,6 @@
 import Config from './config';
 import { RequestQueue } from './request-queue';
-import { console_with_prefix, _ } from './utils'; // eslint-disable-line camelcase
+import { console_with_prefix, isOnline, _ } from './utils'; // eslint-disable-line camelcase
 
 // maximum interval between request retries after exponential backoff
 var MAX_RETRY_INTERVAL_MS = 10 * 60 * 1000; // 10 minutes
@@ -198,7 +198,12 @@ RequestBatcher.prototype.flush = function(options) {
                     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;

package/src/utils.js

@@ -8,7 +8,7 @@ if (typeof(window) === 'undefined') {
         hostname: ''
     };
     win = {
-        navigator: { userAgent: '' },
+        navigator: { userAgent: '', onLine: true },
         document: {
             location: loc,
             referrer: ''
@@ -22,6 +22,8 @@ if (typeof(window) === 'undefined') {
 
 // 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
@@ -962,7 +964,7 @@ _.HTTPBuildQuery = function(formdata, arg_separator) {
 _.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);
@@ -1419,8 +1421,8 @@ _.dom_query = (function() {
     };
 })();
 
-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) {
@@ -1702,6 +1704,15 @@ var extract_domain = function(hostname) {
     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;
@@ -1724,18 +1735,20 @@ _['info']['browserVersion'] = _.info.browserVersion;
 _['info']['properties']     = _.info.properties;
 
 export {
-    MAX_RECORDING_MS,
     _,
-    userAgent,
-    console,
-    win as window,
-    document,
-    navigator,
     cheap_guid,
     console_with_prefix,
+    console,
+    document,
     extract_domain,
-    localStorageSupported,
-    JSONStringify,
     JSONParse,
-    slice
+    JSONStringify,
+    isOnline,
+    localStorageSupported,
+    MAX_RECORDING_MS,
+    MAX_VALUE_FOR_MIN_RECORDING_MS,
+    navigator,
+    slice,
+    userAgent,
+    win as window
 };