mixpanel-browser 2.65.0 → 2.67.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,7 @@
1
+ # .github/dependabot.yml
2
+ version: 2
3
+ updates:
4
+ - package-ecosystem: "npm" # Or "yarn"
5
+ directory: "/" # Tells Dependabot to scan root directory only
6
+ schedule:
7
+ interval: "daily"
package/CHANGELOG.md CHANGED
@@ -1,3 +1,15 @@
1
+ **2.67.0** (17 Jul 2025)
2
+ - Use `get_api_host()` consistently across the SDK
3
+ - Include `device_id` in default Feature Flag context
4
+ - Track latency props in `$experiment_started` event
5
+ - Fix async behavior in `mixpanel.reset()` when a session recording is active
6
+ - Fix recorder integration test race conditions
7
+
8
+ **2.66.0** (8 Jul 2025)
9
+ - Add `api_host` configuration option to support different hosts/proxies for different endpoints (thanks @chrisknu)
10
+ - Add types.d.ts from existing public repo
11
+ - Fix race condition when calling `mixpanel.reset()` while a session recording is active
12
+
1
13
  **2.65.0** (20 May 2025)
2
14
  - `mixpanel.people.track_charge()` (deprecated) no longer sets profile property
3
15
  - Adds page height and width tracking to autocapture click tracking
package/README.md CHANGED
@@ -78,4 +78,4 @@ Mixpanel production releases are tested against a large matrix of browsers and o
78
78
  - Publish to readme.io via the [rdme](https://www.npmjs.com/package/rdme) util: `RDME_API_KEY=<API_KEY> RDME_DOC_VERSION=<version> npm run dox-publish`
79
79
 
80
80
  ## Thanks
81
- For patches and support: @bohanyang, @dehau, @drubin, @D1plo1d, @feychenie, @mogstad, @pfhayes, @sandorfr, @stefansedich, @gfx, @pkaminski, @austince, @danielbaker, @mkdai, @wolever, @dpraul, @chriszamierowski, @JoaoGomesTW, @@aliyalcinkaya, @chrisdeely, @dylan-asos
81
+ For patches and support: @bohanyang, @dehau, @drubin, @D1plo1d, @feychenie, @mogstad, @pfhayes, @sandorfr, @stefansedich, @gfx, @pkaminski, @austince, @danielbaker, @mkdai, @wolever, @dpraul, @chriszamierowski, @JoaoGomesTW, @@aliyalcinkaya, @chrisdeely, @dylan-asos, @chrisknu
@@ -2,7 +2,7 @@
2
2
 
3
3
  var Config = {
4
4
  DEBUG: false,
5
- LIB_VERSION: '2.65.0'
5
+ LIB_VERSION: '2.67.0'
6
6
  };
7
7
 
8
8
  // 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] = {};
3002
3002
  * @constructor
3003
3003
  */
3004
3004
  var FeatureFlagManager = function(initOptions) {
3005
+ this.getFullApiRoute = initOptions.getFullApiRoute;
3005
3006
  this.getMpConfig = initOptions.getConfigFunc;
3006
- this.getDistinctId = initOptions.getDistinctIdFunc;
3007
+ this.getMpProperty = initOptions.getPropertyFunc;
3007
3008
  this.track = initOptions.trackingFunc;
3008
3009
  };
3009
3010
 
@@ -3052,12 +3053,14 @@ FeatureFlagManager.prototype.fetchFlags = function() {
3052
3053
  return;
3053
3054
  }
3054
3055
 
3055
- var distinctId = this.getDistinctId();
3056
+ var distinctId = this.getMpProperty('distinct_id');
3057
+ var deviceId = this.getMpProperty('$device_id');
3056
3058
  logger$3.log('Fetching flags for distinct ID: ' + distinctId);
3057
3059
  var reqParams = {
3058
- 'context': _.extend({'distinct_id': distinctId}, this.getConfig(CONFIG_CONTEXT))
3060
+ 'context': _.extend({'distinct_id': distinctId, 'device_id': deviceId}, this.getConfig(CONFIG_CONTEXT))
3059
3061
  };
3060
- this.fetchPromise = win['fetch'](this.getMpConfig('api_host') + '/' + this.getMpConfig('api_routes')['flags'], {
3062
+ this._fetchInProgressStartTime = Date.now();
3063
+ this.fetchPromise = win['fetch'](this.getFullApiRoute(), {
3061
3064
  'method': 'POST',
3062
3065
  'headers': {
3063
3066
  'Authorization': 'Basic ' + btoa(this.getMpConfig('token') + ':'),
@@ -3065,6 +3068,7 @@ FeatureFlagManager.prototype.fetchFlags = function() {
3065
3068
  },
3066
3069
  'body': JSON.stringify(reqParams)
3067
3070
  }).then(function(response) {
3071
+ this.markFetchComplete();
3068
3072
  return response.json().then(function(responseBody) {
3069
3073
  var responseFlags = responseBody['flags'];
3070
3074
  if (!responseFlags) {
@@ -3079,9 +3083,24 @@ FeatureFlagManager.prototype.fetchFlags = function() {
3079
3083
  });
3080
3084
  this.flags = flags;
3081
3085
  }.bind(this)).catch(function(error) {
3086
+ this.markFetchComplete();
3082
3087
  logger$3.error(error);
3083
- });
3084
- }.bind(this)).catch(function() {});
3088
+ }.bind(this));
3089
+ }.bind(this)).catch(function(error) {
3090
+ this.markFetchComplete();
3091
+ logger$3.error(error);
3092
+ }.bind(this));
3093
+ };
3094
+
3095
+ FeatureFlagManager.prototype.markFetchComplete = function() {
3096
+ if (!this._fetchInProgressStartTime) {
3097
+ logger$3.error('Fetch in progress started time not set, cannot mark fetch complete');
3098
+ return;
3099
+ }
3100
+ this._fetchStartTime = this._fetchInProgressStartTime;
3101
+ this._fetchCompleteTime = Date.now();
3102
+ this._fetchLatency = this._fetchCompleteTime - this._fetchStartTime;
3103
+ this._fetchInProgressStartTime = null;
3085
3104
  };
3086
3105
 
3087
3106
  FeatureFlagManager.prototype.getVariant = function(featureName, fallback) {
@@ -3160,7 +3179,10 @@ FeatureFlagManager.prototype.trackFeatureCheck = function(featureName, feature)
3160
3179
  this.track('$experiment_started', {
3161
3180
  'Experiment name': featureName,
3162
3181
  'Variant name': feature['key'],
3163
- '$experiment_type': 'feature_flag'
3182
+ '$experiment_type': 'feature_flag',
3183
+ 'Variant fetch start time': new Date(this._fetchStartTime).toISOString(),
3184
+ 'Variant fetch complete time': new Date(this._fetchCompleteTime).toISOString(),
3185
+ 'Variant fetch latency (ms)': this._fetchLatency
3164
3186
  });
3165
3187
  };
3166
3188
 
@@ -4789,7 +4811,7 @@ MixpanelGroup.prototype._send_request = function(data, callback) {
4789
4811
  return this._mixpanel._track_or_batch({
4790
4812
  type: 'groups',
4791
4813
  data: date_encoded_data,
4792
- endpoint: this._get_config('api_host') + '/' + this._get_config('api_routes')['groups'],
4814
+ endpoint: this._mixpanel.get_api_host('groups') + '/' + this._get_config('api_routes')['groups'],
4793
4815
  batcher: this._mixpanel.request_batchers.groups
4794
4816
  }, callback);
4795
4817
  };
@@ -5141,7 +5163,7 @@ MixpanelPeople.prototype._send_request = function(data, callback) {
5141
5163
  return this._mixpanel._track_or_batch({
5142
5164
  type: 'people',
5143
5165
  data: date_encoded_data,
5144
- endpoint: this._get_config('api_host') + '/' + this._get_config('api_routes')['engage'],
5166
+ endpoint: this._mixpanel.get_api_host('people') + '/' + this._get_config('api_routes')['engage'],
5145
5167
  batcher: this._mixpanel.request_batchers.people
5146
5168
  }, callback);
5147
5169
  };
@@ -5901,6 +5923,7 @@ var DEFAULT_API_ROUTES = {
5901
5923
  */
5902
5924
  var DEFAULT_CONFIG = {
5903
5925
  'api_host': 'https://api-js.mixpanel.com',
5926
+ 'api_hosts': {},
5904
5927
  'api_routes': DEFAULT_API_ROUTES,
5905
5928
  'api_extra_query_params': {},
5906
5929
  'api_method': 'POST',
@@ -6170,8 +6193,11 @@ MixpanelLib.prototype._init = function(token, config, name) {
6170
6193
  }
6171
6194
 
6172
6195
  this.flags = new FeatureFlagManager({
6196
+ getFullApiRoute: _.bind(function() {
6197
+ return this.get_api_host('flags') + '/' + this.get_config('api_routes')['flags'];
6198
+ }, this),
6173
6199
  getConfigFunc: _.bind(this.get_config, this),
6174
- getDistinctIdFunc: _.bind(this.get_distinct_id, this),
6200
+ getPropertyFunc: _.bind(this.get_property, this),
6175
6201
  trackingFunc: _.bind(this.track, this)
6176
6202
  });
6177
6203
  this.flags.init();
@@ -6286,20 +6312,23 @@ MixpanelLib.prototype.start_session_recording = function () {
6286
6312
 
6287
6313
  MixpanelLib.prototype.stop_session_recording = function () {
6288
6314
  if (this._recorder) {
6289
- this._recorder['stopRecording']();
6315
+ return this._recorder['stopRecording']();
6290
6316
  }
6317
+ return Promise.resolve();
6291
6318
  };
6292
6319
 
6293
6320
  MixpanelLib.prototype.pause_session_recording = function () {
6294
6321
  if (this._recorder) {
6295
- this._recorder['pauseRecording']();
6322
+ return this._recorder['pauseRecording']();
6296
6323
  }
6324
+ return Promise.resolve();
6297
6325
  };
6298
6326
 
6299
6327
  MixpanelLib.prototype.resume_session_recording = function () {
6300
6328
  if (this._recorder) {
6301
- this._recorder['resumeRecording']();
6329
+ return this._recorder['resumeRecording']();
6302
6330
  }
6331
+ return Promise.resolve();
6303
6332
  };
6304
6333
 
6305
6334
  MixpanelLib.prototype.is_recording_heatmap_data = function () {
@@ -6654,11 +6683,10 @@ MixpanelLib.prototype.are_batchers_initialized = function() {
6654
6683
 
6655
6684
  MixpanelLib.prototype.get_batcher_configs = function() {
6656
6685
  var queue_prefix = '__mpq_' + this.get_config('token');
6657
- var api_routes = this.get_config('api_routes');
6658
6686
  this._batcher_configs = this._batcher_configs || {
6659
- events: {type: 'events', endpoint: '/' + api_routes['track'], queue_key: queue_prefix + '_ev'},
6660
- people: {type: 'people', endpoint: '/' + api_routes['engage'], queue_key: queue_prefix + '_pp'},
6661
- groups: {type: 'groups', endpoint: '/' + api_routes['groups'], queue_key: queue_prefix + '_gr'}
6687
+ events: {type: 'events', api_name: 'track', queue_key: queue_prefix + '_ev'},
6688
+ people: {type: 'people', api_name: 'engage', queue_key: queue_prefix + '_pp'},
6689
+ groups: {type: 'groups', api_name: 'groups', queue_key: queue_prefix + '_gr'}
6662
6690
  };
6663
6691
  return this._batcher_configs;
6664
6692
  };
@@ -6672,8 +6700,9 @@ MixpanelLib.prototype.init_batchers = function() {
6672
6700
  libConfig: this['config'],
6673
6701
  errorReporter: this.get_config('error_reporter'),
6674
6702
  sendRequestFunc: _.bind(function(data, options, cb) {
6703
+ var api_routes = this.get_config('api_routes');
6675
6704
  this._send_request(
6676
- this.get_config('api_host') + attrs.endpoint,
6705
+ this.get_api_host(attrs.api_name) + '/' + api_routes[attrs.api_name],
6677
6706
  this._encode_data_for_request(data),
6678
6707
  options,
6679
6708
  this._prepare_callback(cb, data)
@@ -6899,7 +6928,7 @@ MixpanelLib.prototype.track = addOptOutCheckMixpanelLib(function(event_name, pro
6899
6928
  var ret = this._track_or_batch({
6900
6929
  type: 'events',
6901
6930
  data: data,
6902
- endpoint: this.get_config('api_host') + '/' + this.get_config('api_routes')['track'],
6931
+ endpoint: this.get_api_host('events') + '/' + this.get_config('api_routes')['track'],
6903
6932
  batcher: this.request_batchers.events,
6904
6933
  should_send_immediately: should_send_immediately,
6905
6934
  send_request_options: options
@@ -7401,6 +7430,7 @@ MixpanelLib.prototype.identify = function(
7401
7430
  * Useful for clearing data when a user logs out.
7402
7431
  */
7403
7432
  MixpanelLib.prototype.reset = function() {
7433
+ this.stop_session_recording();
7404
7434
  this['persistence'].clear();
7405
7435
  this._flags.identify_called = false;
7406
7436
  var uuid = _.UUID();
@@ -7408,7 +7438,6 @@ MixpanelLib.prototype.reset = function() {
7408
7438
  'distinct_id': DEVICE_ID_PREFIX + uuid,
7409
7439
  '$device_id': uuid
7410
7440
  }, '');
7411
- this.stop_session_recording();
7412
7441
  this._check_and_start_session_recording();
7413
7442
  };
7414
7443
 
@@ -7720,6 +7749,16 @@ MixpanelLib.prototype.get_property = function(property_name) {
7720
7749
  return this['persistence'].load_prop([property_name]);
7721
7750
  };
7722
7751
 
7752
+ /**
7753
+ * Get the API host for a specific endpoint type, falling back to the default api_host if not specified
7754
+ *
7755
+ * @param {String} endpoint_type The type of endpoint (e.g., "events", "people", "groups")
7756
+ * @returns {String} The API host to use for this endpoint
7757
+ */
7758
+ MixpanelLib.prototype.get_api_host = function(endpoint_type) {
7759
+ return this.get_config('api_hosts')[endpoint_type] || this.get_config('api_host');
7760
+ };
7761
+
7723
7762
  MixpanelLib.prototype.toString = function() {
7724
7763
  var name = this.get_config('name');
7725
7764
  if (name !== PRIMARY_INSTANCE_NAME) {
@@ -8015,6 +8054,7 @@ MixpanelLib.prototype['alias'] = MixpanelLib.protot
8015
8054
  MixpanelLib.prototype['name_tag'] = MixpanelLib.prototype.name_tag;
8016
8055
  MixpanelLib.prototype['set_config'] = MixpanelLib.prototype.set_config;
8017
8056
  MixpanelLib.prototype['get_config'] = MixpanelLib.prototype.get_config;
8057
+ MixpanelLib.prototype['get_api_host'] = MixpanelLib.prototype.get_api_host;
8018
8058
  MixpanelLib.prototype['get_property'] = MixpanelLib.prototype.get_property;
8019
8059
  MixpanelLib.prototype['get_distinct_id'] = MixpanelLib.prototype.get_distinct_id;
8020
8060
  MixpanelLib.prototype['toString'] = MixpanelLib.prototype.toString;
@@ -13944,7 +13944,7 @@
13944
13944
  }
13945
13945
 
13946
13946
  var Config = {
13947
- LIB_VERSION: '2.65.0'
13947
+ LIB_VERSION: '2.67.0'
13948
13948
  };
13949
13949
 
13950
13950
  /* eslint camelcase: "off", eqeqeq: "off" */
@@ -16878,6 +16878,13 @@
16878
16878
  * @property {string} replayStartUrl
16879
16879
  */
16880
16880
 
16881
+ /**
16882
+ * @typedef {Object} UserIdInfo
16883
+ * @property {string} distinct_id
16884
+ * @property {string} user_id
16885
+ * @property {string} device_id
16886
+ */
16887
+
16881
16888
 
16882
16889
  /**
16883
16890
  * This class encapsulates a single session recording and its lifecycle.
@@ -16933,6 +16940,30 @@
16933
16940
  });
16934
16941
  };
16935
16942
 
16943
+ /**
16944
+ * @returns {UserIdInfo}
16945
+ */
16946
+ SessionRecording.prototype.getUserIdInfo = function () {
16947
+ if (this.finalFlushUserIdInfo) {
16948
+ return this.finalFlushUserIdInfo;
16949
+ }
16950
+
16951
+ var userIdInfo = {
16952
+ 'distinct_id': String(this._mixpanel.get_distinct_id()),
16953
+ };
16954
+
16955
+ // send ID management props if they exist
16956
+ var deviceId = this._mixpanel.get_property('$device_id');
16957
+ if (deviceId) {
16958
+ userIdInfo['$device_id'] = deviceId;
16959
+ }
16960
+ var userId = this._mixpanel.get_property('$user_id');
16961
+ if (userId) {
16962
+ userIdInfo['$user_id'] = userId;
16963
+ }
16964
+ return userIdInfo;
16965
+ };
16966
+
16936
16967
  SessionRecording.prototype.unloadPersistedData = function () {
16937
16968
  this.batcher.stop();
16938
16969
  return this.batcher.flush()
@@ -17057,6 +17088,9 @@
17057
17088
  };
17058
17089
 
17059
17090
  SessionRecording.prototype.stopRecording = function (skipFlush) {
17091
+ // store the user ID info in case this is getting called in mixpanel.reset()
17092
+ this.finalFlushUserIdInfo = this.getUserIdInfo();
17093
+
17060
17094
  if (!this.isRrwebStopped()) {
17061
17095
  try {
17062
17096
  this._stopRecording();
@@ -17167,8 +17201,8 @@
17167
17201
  retryAfter: response.headers.get('Retry-After')
17168
17202
  });
17169
17203
  }.bind(this);
17170
-
17171
- win['fetch'](this.getConfig('api_host') + '/' + this.getConfig('api_routes')['record'] + '?' + new URLSearchParams(reqParams), {
17204
+ var apiHost = (this._mixpanel.get_api_host && this._mixpanel.get_api_host('record')) || this.getConfig('api_host');
17205
+ win['fetch'](apiHost + '/' + this.getConfig('api_routes')['record'] + '?' + new URLSearchParams(reqParams), {
17172
17206
  'method': 'POST',
17173
17207
  'headers': {
17174
17208
  'Authorization': 'Basic ' + btoa(this.getConfig('token') + ':'),
@@ -17222,7 +17256,6 @@
17222
17256
  '$current_url': this.batchStartUrl,
17223
17257
  '$lib_version': Config.LIB_VERSION,
17224
17258
  'batch_start_time': batchStartTime / 1000,
17225
- 'distinct_id': String(this._mixpanel.get_distinct_id()),
17226
17259
  'mp_lib': 'web',
17227
17260
  'replay_id': replayId,
17228
17261
  'replay_length_ms': replayLengthMs,
@@ -17231,16 +17264,7 @@
17231
17264
  'seq': this.seqNo
17232
17265
  };
17233
17266
  var eventsJson = JSON.stringify(data);
17234
-
17235
- // send ID management props if they exist
17236
- var deviceId = this._mixpanel.get_property('$device_id');
17237
- if (deviceId) {
17238
- reqParams['$device_id'] = deviceId;
17239
- }
17240
- var userId = this._mixpanel.get_property('$user_id');
17241
- if (userId) {
17242
- reqParams['$user_id'] = userId;
17243
- }
17267
+ Object.assign(reqParams, this.getUserIdInfo());
17244
17268
 
17245
17269
  if (CompressionStream) {
17246
17270
  var jsonStream = new Blob([eventsJson], {type: 'application/json'}).stream();
@@ -17385,6 +17409,7 @@
17385
17409
  this._flushInactivePromise = this.recordingRegistry.flushInactiveRecordings();
17386
17410
 
17387
17411
  this.activeRecording = null;
17412
+ this.stopRecordingInProgress = false;
17388
17413
  };
17389
17414
 
17390
17415
  MixpanelRecorder.prototype.startRecording = function(options) {
@@ -17433,19 +17458,26 @@
17433
17458
  };
17434
17459
 
17435
17460
  MixpanelRecorder.prototype.stopRecording = function() {
17436
- var stopPromise = this._stopCurrentRecording(false);
17437
- this.recordingRegistry.clearActiveRecording();
17438
- this.activeRecording = null;
17439
- return stopPromise;
17461
+ // Prevents activeSerializedRecording from being reused when stopping the recording.
17462
+ this.stopRecordingInProgress = true;
17463
+ return this._stopCurrentRecording(false, true).then(function() {
17464
+ return this.recordingRegistry.clearActiveRecording();
17465
+ }.bind(this)).then(function() {
17466
+ this.stopRecordingInProgress = false;
17467
+ }.bind(this));
17440
17468
  };
17441
17469
 
17442
17470
  MixpanelRecorder.prototype.pauseRecording = function() {
17443
17471
  return this._stopCurrentRecording(false);
17444
17472
  };
17445
17473
 
17446
- MixpanelRecorder.prototype._stopCurrentRecording = function(skipFlush) {
17474
+ MixpanelRecorder.prototype._stopCurrentRecording = function(skipFlush, disableActiveRecording) {
17447
17475
  if (this.activeRecording) {
17448
- return this.activeRecording.stopRecording(skipFlush);
17476
+ var stopRecordingPromise = this.activeRecording.stopRecording(skipFlush);
17477
+ if (disableActiveRecording) {
17478
+ this.activeRecording = null;
17479
+ }
17480
+ return stopRecordingPromise;
17449
17481
  }
17450
17482
  return PromisePolyfill.resolve();
17451
17483
  };
@@ -17458,7 +17490,7 @@
17458
17490
 
17459
17491
  return this.recordingRegistry.getActiveRecording()
17460
17492
  .then(function (activeSerializedRecording) {
17461
- if (activeSerializedRecording) {
17493
+ if (activeSerializedRecording && !this.stopRecordingInProgress) {
17462
17494
  return this.startRecording({activeSerializedRecording: activeSerializedRecording});
17463
17495
  } else if (startNewIfInactive) {
17464
17496
  return this.startRecording({shouldStopBatcher: false});