mixpanel-browser 2.66.0 → 2.67.0

package/dist/mixpanel-with-async-recorder.cjs.js

@@ -2,7 +2,7 @@
 
 var Config = {
     DEBUG: false,
-    LIB_VERSION: '2.66.0'
+    LIB_VERSION: '2.67.0'
 };
 
 // since es6 imports are static and we run unit tests from the console, window won't be defined when importing this file
@@ -3002,8 +3002,9 @@ CONFIG_DEFAULTS[CONFIG_CONTEXT] = {};
  * @constructor
  */
 var FeatureFlagManager = function(initOptions) {
+    this.getFullApiRoute = initOptions.getFullApiRoute;
     this.getMpConfig = initOptions.getConfigFunc;
-    this.getDistinctId = initOptions.getDistinctIdFunc;
+    this.getMpProperty = initOptions.getPropertyFunc;
     this.track = initOptions.trackingFunc;
 };
 
@@ -3052,12 +3053,14 @@ FeatureFlagManager.prototype.fetchFlags = function() {
         return;
     }
 
-    var distinctId = this.getDistinctId();
+    var distinctId = this.getMpProperty('distinct_id');
+    var deviceId = this.getMpProperty('$device_id');
     logger$3.log('Fetching flags for distinct ID: ' + distinctId);
     var reqParams = {
-        'context': _.extend({'distinct_id': distinctId}, this.getConfig(CONFIG_CONTEXT))
+        'context': _.extend({'distinct_id': distinctId, 'device_id': deviceId}, this.getConfig(CONFIG_CONTEXT))
     };
-    this.fetchPromise = win['fetch'](this.getMpConfig('api_host') + '/' + this.getMpConfig('api_routes')['flags'], {
+    this._fetchInProgressStartTime = Date.now();
+    this.fetchPromise = win['fetch'](this.getFullApiRoute(), {
         'method': 'POST',
         'headers': {
             'Authorization': 'Basic ' + btoa(this.getMpConfig('token') + ':'),
@@ -3065,6 +3068,7 @@ FeatureFlagManager.prototype.fetchFlags = function() {
         },
         'body': JSON.stringify(reqParams)
     }).then(function(response) {
+        this.markFetchComplete();
         return response.json().then(function(responseBody) {
             var responseFlags = responseBody['flags'];
             if (!responseFlags) {
@@ -3079,9 +3083,24 @@ FeatureFlagManager.prototype.fetchFlags = function() {
             });
             this.flags = flags;
         }.bind(this)).catch(function(error) {
+            this.markFetchComplete();
             logger$3.error(error);
-        });
-    }.bind(this)).catch(function() {});
+        }.bind(this));
+    }.bind(this)).catch(function(error) {
+        this.markFetchComplete();
+        logger$3.error(error);
+    }.bind(this));
+};
+
+FeatureFlagManager.prototype.markFetchComplete = function() {
+    if (!this._fetchInProgressStartTime) {
+        logger$3.error('Fetch in progress started time not set, cannot mark fetch complete');
+        return;
+    }
+    this._fetchStartTime = this._fetchInProgressStartTime;
+    this._fetchCompleteTime = Date.now();
+    this._fetchLatency = this._fetchCompleteTime - this._fetchStartTime;
+    this._fetchInProgressStartTime = null;
 };
 
 FeatureFlagManager.prototype.getVariant = function(featureName, fallback) {
@@ -3160,7 +3179,10 @@ FeatureFlagManager.prototype.trackFeatureCheck = function(featureName, feature)
     this.track('$experiment_started', {
         'Experiment name': featureName,
         'Variant name': feature['key'],
-        '$experiment_type': 'feature_flag'
+        '$experiment_type': 'feature_flag',
+        'Variant fetch start time': new Date(this._fetchStartTime).toISOString(),
+        'Variant fetch complete time': new Date(this._fetchCompleteTime).toISOString(),
+        'Variant fetch latency (ms)': this._fetchLatency
     });
 };
 
@@ -6171,8 +6193,11 @@ MixpanelLib.prototype._init = function(token, config, name) {
     }
 
     this.flags = new FeatureFlagManager({
+        getFullApiRoute: _.bind(function() {
+            return this.get_api_host('flags') + '/' + this.get_config('api_routes')['flags'];
+        }, this),
         getConfigFunc: _.bind(this.get_config, this),
-        getDistinctIdFunc: _.bind(this.get_distinct_id, this),
+        getPropertyFunc: _.bind(this.get_property, this),
         trackingFunc: _.bind(this.track, this)
     });
     this.flags.init();
@@ -6658,11 +6683,10 @@ MixpanelLib.prototype.are_batchers_initialized = function() {
 
 MixpanelLib.prototype.get_batcher_configs = function() {
     var queue_prefix = '__mpq_' + this.get_config('token');
-    var api_routes = this.get_config('api_routes');
     this._batcher_configs = this._batcher_configs || {
-        events: {type: 'events', endpoint: '/' + api_routes['track'], queue_key: queue_prefix + '_ev'},
-        people: {type: 'people', endpoint: '/' + api_routes['engage'], queue_key: queue_prefix + '_pp'},
-        groups: {type: 'groups', endpoint: '/' + api_routes['groups'], queue_key: queue_prefix + '_gr'}
+        events: {type: 'events', api_name: 'track', queue_key: queue_prefix + '_ev'},
+        people: {type: 'people', api_name: 'engage', queue_key: queue_prefix + '_pp'},
+        groups: {type: 'groups', api_name: 'groups', queue_key: queue_prefix + '_gr'}
     };
     return this._batcher_configs;
 };
@@ -6676,8 +6700,9 @@ MixpanelLib.prototype.init_batchers = function() {
                     libConfig: this['config'],
                     errorReporter: this.get_config('error_reporter'),
                     sendRequestFunc: _.bind(function(data, options, cb) {
+                        var api_routes = this.get_config('api_routes');
                         this._send_request(
-                            this.get_config('api_host') + attrs.endpoint,
+                            this.get_api_host(attrs.api_name) + '/' + api_routes[attrs.api_name],
                             this._encode_data_for_request(data),
                             options,
                             this._prepare_callback(cb, data)
@@ -7405,31 +7430,15 @@ MixpanelLib.prototype.identify = function(
  * Useful for clearing data when a user logs out.
  */
 MixpanelLib.prototype.reset = function() {
-    var self = this;
-
-    var reset = function () {
-        self['persistence'].clear();
-        self._flags.identify_called = false;
-        var uuid = _.UUID();
-        self.register_once({
-            'distinct_id': DEVICE_ID_PREFIX + uuid,
-            '$device_id': uuid
-        }, '');
-    };
-
-    if (self._recorder) {
-        self.stop_session_recording()
-            .then(function () {
-                reset();
-                self._check_and_start_session_recording();
-            })
-            .catch(_.bind(function (err) {
-                reset();
-                this.report_error('Error restarting recording session', err);
-            }, this));
-    } else {
-        reset();
-    }
+    this.stop_session_recording();
+    this['persistence'].clear();
+    this._flags.identify_called = false;
+    var uuid = _.UUID();
+    this.register_once({
+        'distinct_id': DEVICE_ID_PREFIX + uuid,
+        '$device_id': uuid
+    }, '');
+    this._check_and_start_session_recording();
 };
 
 /**

package/dist/mixpanel-with-recorder.js

@@ -13945,7 +13945,7 @@
 
     var Config = {
         DEBUG: false,
-        LIB_VERSION: '2.66.0'
+        LIB_VERSION: '2.67.0'
     };
 
     /* eslint camelcase: "off", eqeqeq: "off" */
@@ -17063,6 +17063,13 @@
      * @property {string} replayStartUrl
      */
 
+    /**
+     * @typedef {Object} UserIdInfo
+     * @property {string} distinct_id
+     * @property {string} user_id
+     * @property {string} device_id
+     */
+
 
     /**
      * This class encapsulates a single session recording and its lifecycle.
@@ -17118,6 +17125,30 @@
         });
     };
 
+    /**
+     * @returns {UserIdInfo}
+     */
+    SessionRecording.prototype.getUserIdInfo = function () {
+        if (this.finalFlushUserIdInfo) {
+            return this.finalFlushUserIdInfo;
+        }
+
+        var userIdInfo = {
+            'distinct_id': String(this._mixpanel.get_distinct_id()),
+        };
+
+        // send ID management props if they exist
+        var deviceId = this._mixpanel.get_property('$device_id');
+        if (deviceId) {
+            userIdInfo['$device_id'] = deviceId;
+        }
+        var userId = this._mixpanel.get_property('$user_id');
+        if (userId) {
+            userIdInfo['$user_id'] = userId;
+        }
+        return userIdInfo;
+    };
+
     SessionRecording.prototype.unloadPersistedData = function () {
         this.batcher.stop();
         return this.batcher.flush()
@@ -17242,6 +17273,9 @@
     };
 
     SessionRecording.prototype.stopRecording = function (skipFlush) {
+        // store the user ID info in case this is getting called in mixpanel.reset()
+        this.finalFlushUserIdInfo = this.getUserIdInfo();
+
         if (!this.isRrwebStopped()) {
             try {
                 this._stopRecording();
@@ -17407,7 +17441,6 @@
                 '$current_url': this.batchStartUrl,
                 '$lib_version': Config.LIB_VERSION,
                 'batch_start_time': batchStartTime / 1000,
-                'distinct_id': String(this._mixpanel.get_distinct_id()),
                 'mp_lib': 'web',
                 'replay_id': replayId,
                 'replay_length_ms': replayLengthMs,
@@ -17416,16 +17449,7 @@
                 'seq': this.seqNo
             };
             var eventsJson = JSON.stringify(data);
-
-            // send ID management props if they exist
-            var deviceId = this._mixpanel.get_property('$device_id');
-            if (deviceId) {
-                reqParams['$device_id'] = deviceId;
-            }
-            var userId = this._mixpanel.get_property('$user_id');
-            if (userId) {
-                reqParams['$user_id'] = userId;
-            }
+            Object.assign(reqParams, this.getUserIdInfo());
 
             if (CompressionStream) {
                 var jsonStream = new Blob([eventsJson], {type: 'application/json'}).stream();
@@ -18554,8 +18578,9 @@
      * @constructor
      */
     var FeatureFlagManager = function(initOptions) {
+        this.getFullApiRoute = initOptions.getFullApiRoute;
         this.getMpConfig = initOptions.getConfigFunc;
-        this.getDistinctId = initOptions.getDistinctIdFunc;
+        this.getMpProperty = initOptions.getPropertyFunc;
         this.track = initOptions.trackingFunc;
     };
 
@@ -18604,12 +18629,14 @@
             return;
         }
 
-        var distinctId = this.getDistinctId();
+        var distinctId = this.getMpProperty('distinct_id');
+        var deviceId = this.getMpProperty('$device_id');
         logger.log('Fetching flags for distinct ID: ' + distinctId);
         var reqParams = {
-            'context': _.extend({'distinct_id': distinctId}, this.getConfig(CONFIG_CONTEXT))
+            'context': _.extend({'distinct_id': distinctId, 'device_id': deviceId}, this.getConfig(CONFIG_CONTEXT))
         };
-        this.fetchPromise = win['fetch'](this.getMpConfig('api_host') + '/' + this.getMpConfig('api_routes')['flags'], {
+        this._fetchInProgressStartTime = Date.now();
+        this.fetchPromise = win['fetch'](this.getFullApiRoute(), {
             'method': 'POST',
             'headers': {
                 'Authorization': 'Basic ' + btoa(this.getMpConfig('token') + ':'),
@@ -18617,6 +18644,7 @@
             },
             'body': JSON.stringify(reqParams)
         }).then(function(response) {
+            this.markFetchComplete();
             return response.json().then(function(responseBody) {
                 var responseFlags = responseBody['flags'];
                 if (!responseFlags) {
@@ -18631,9 +18659,24 @@
                 });
                 this.flags = flags;
             }.bind(this)).catch(function(error) {
+                this.markFetchComplete();
                 logger.error(error);
-            });
-        }.bind(this)).catch(function() {});
+            }.bind(this));
+        }.bind(this)).catch(function(error) {
+            this.markFetchComplete();
+            logger.error(error);
+        }.bind(this));
+    };
+
+    FeatureFlagManager.prototype.markFetchComplete = function() {
+        if (!this._fetchInProgressStartTime) {
+            logger.error('Fetch in progress started time not set, cannot mark fetch complete');
+            return;
+        }
+        this._fetchStartTime = this._fetchInProgressStartTime;
+        this._fetchCompleteTime = Date.now();
+        this._fetchLatency = this._fetchCompleteTime - this._fetchStartTime;
+        this._fetchInProgressStartTime = null;
     };
 
     FeatureFlagManager.prototype.getVariant = function(featureName, fallback) {
@@ -18712,7 +18755,10 @@
         this.track('$experiment_started', {
             'Experiment name': featureName,
             'Variant name': feature['key'],
-            '$experiment_type': 'feature_flag'
+            '$experiment_type': 'feature_flag',
+            'Variant fetch start time': new Date(this._fetchStartTime).toISOString(),
+            'Variant fetch complete time': new Date(this._fetchCompleteTime).toISOString(),
+            'Variant fetch latency (ms)': this._fetchLatency
         });
     };
 
@@ -20412,8 +20458,11 @@
         }
 
         this.flags = new FeatureFlagManager({
+            getFullApiRoute: _.bind(function() {
+                return this.get_api_host('flags') + '/' + this.get_config('api_routes')['flags'];
+            }, this),
             getConfigFunc: _.bind(this.get_config, this),
-            getDistinctIdFunc: _.bind(this.get_distinct_id, this),
+            getPropertyFunc: _.bind(this.get_property, this),
             trackingFunc: _.bind(this.track, this)
         });
         this.flags.init();
@@ -20899,11 +20948,10 @@
 
     MixpanelLib.prototype.get_batcher_configs = function() {
         var queue_prefix = '__mpq_' + this.get_config('token');
-        var api_routes = this.get_config('api_routes');
         this._batcher_configs = this._batcher_configs || {
-            events: {type: 'events', endpoint: '/' + api_routes['track'], queue_key: queue_prefix + '_ev'},
-            people: {type: 'people', endpoint: '/' + api_routes['engage'], queue_key: queue_prefix + '_pp'},
-            groups: {type: 'groups', endpoint: '/' + api_routes['groups'], queue_key: queue_prefix + '_gr'}
+            events: {type: 'events', api_name: 'track', queue_key: queue_prefix + '_ev'},
+            people: {type: 'people', api_name: 'engage', queue_key: queue_prefix + '_pp'},
+            groups: {type: 'groups', api_name: 'groups', queue_key: queue_prefix + '_gr'}
         };
         return this._batcher_configs;
     };
@@ -20917,8 +20965,9 @@
                         libConfig: this['config'],
                         errorReporter: this.get_config('error_reporter'),
                         sendRequestFunc: _.bind(function(data, options, cb) {
+                            var api_routes = this.get_config('api_routes');
                             this._send_request(
-                                this.get_config('api_host') + attrs.endpoint,
+                                this.get_api_host(attrs.api_name) + '/' + api_routes[attrs.api_name],
                                 this._encode_data_for_request(data),
                                 options,
                                 this._prepare_callback(cb, data)
@@ -21646,31 +21695,15 @@
      * Useful for clearing data when a user logs out.
      */
     MixpanelLib.prototype.reset = function() {
-        var self = this;
-
-        var reset = function () {
-            self['persistence'].clear();
-            self._flags.identify_called = false;
-            var uuid = _.UUID();
-            self.register_once({
-                'distinct_id': DEVICE_ID_PREFIX + uuid,
-                '$device_id': uuid
-            }, '');
-        };
-
-        if (self._recorder) {
-            self.stop_session_recording()
-                .then(function () {
-                    reset();
-                    self._check_and_start_session_recording();
-                })
-                .catch(_.bind(function (err) {
-                    reset();
-                    this.report_error('Error restarting recording session', err);
-                }, this));
-        } else {
-            reset();
-        }
+        this.stop_session_recording();
+        this['persistence'].clear();
+        this._flags.identify_called = false;
+        var uuid = _.UUID();
+        this.register_once({
+            'distinct_id': DEVICE_ID_PREFIX + uuid,
+            '$device_id': uuid
+        }, '');
+        this._check_and_start_session_recording();
     };
 
     /**