mixpanel-browser 2.78.0 → 2.79.0

package/src/flags/flags-persistence.js

@@ -0,0 +1,176 @@
+import { _, console_with_prefix } from '../utils'; // eslint-disable-line camelcase
+import { IDBStorageWrapper } from '../storage/indexed-db';
+
+var logger = console_with_prefix('flags');
+
+var MIXPANEL_FLAGS_DB_NAME = 'mixpanelFlagsDb';
+var FLAGS_STORE_NAME = 'mixpanelFlags';
+
+// Keeping these two properties closeby, as adding additional stores to a DB in IndexedDB requires a version increment
+var FLAGS_VERSION_DATA = { version: 1, storeNames: [FLAGS_STORE_NAME] };
+
+var PERSISTED_VARIANTS_KEY_PREFIX = 'persisted_variants_for_';
+var DEFAULT_TTL_MS = 24 * 60 * 60 * 1000;
+
+var VariantLookupPolicy = Object.freeze({
+    NETWORK_ONLY: 'networkOnly',
+    NETWORK_FIRST: 'networkFirst',
+    PERSISTENCE_UNTIL_NETWORK_SUCCESS: 'persistenceUntilNetworkSuccess'
+});
+
+var VALID_POLICIES = [
+    VariantLookupPolicy.NETWORK_ONLY,
+    VariantLookupPolicy.NETWORK_FIRST,
+    VariantLookupPolicy.PERSISTENCE_UNTIL_NETWORK_SUCCESS
+];
+
+/**
+ * Module for handling the storage and retrieval of persisted feature flag variants.
+ */
+var FeatureFlagPersistence = function(persistenceConfig, token, isGloballyDisabled) {
+    this.idb = new IDBStorageWrapper(MIXPANEL_FLAGS_DB_NAME, FLAGS_STORE_NAME, FLAGS_VERSION_DATA);
+    this.persistenceConfig = persistenceConfig;
+    this.persistedVariantsKey = PERSISTED_VARIANTS_KEY_PREFIX + token;
+    this.isGloballyDisabled = isGloballyDisabled || function() { return false; };
+};
+
+FeatureFlagPersistence.prototype.getPolicy = function() {
+    if (this.isGloballyDisabled() || !this._isConfigValid()) {
+        return VariantLookupPolicy.NETWORK_ONLY;
+    }
+    return this.persistenceConfig['variantLookupPolicy'];
+};
+
+FeatureFlagPersistence.prototype.getTtlMs = function() {
+    if (!this._isConfigValid()) {
+        return DEFAULT_TTL_MS;
+    }
+    var configuredTtl = this.persistenceConfig['persistenceTtlMs'];
+    return (configuredTtl === undefined || configuredTtl === null) ? DEFAULT_TTL_MS : configuredTtl;
+};
+
+FeatureFlagPersistence.prototype._isConfigValid = function() {
+    var config = this.persistenceConfig;
+    if (!config) {
+        return false;
+    }
+
+    if (VALID_POLICIES.indexOf(config['variantLookupPolicy']) === -1) {
+        logger.error('Invalid variantLookupPolicy:', config['variantLookupPolicy']);
+        return false;
+    }
+
+    if (config['persistenceTtlMs'] !== undefined &&
+        config['persistenceTtlMs'] !== null &&
+        config['persistenceTtlMs'] <= 0) {
+        logger.error('If provided, persistenceTtlMs must be a positive number. Provided value:', config['persistenceTtlMs']);
+        return false;
+    }
+
+    return true;
+};
+
+FeatureFlagPersistence.prototype.loadFlagsFromStorage = function(context) {
+    var clearAndReturnNull = _.bind(function() {
+        return this.clear().then(function() { return null; }).catch(function() { return null; });
+    }, this);
+
+    if (this.getPolicy() === VariantLookupPolicy.NETWORK_ONLY) {
+        return clearAndReturnNull();
+    }
+
+    var ttlMs = this.getTtlMs();
+
+    return this.idb.init().then(_.bind(function() {
+        return this.idb.getItem(this.persistedVariantsKey);
+    }, this)).then(_.bind(function(data) {
+        if (!data) {
+            logger.log('No persisted variants found in IndexedDB');
+            return null;
+        }
+
+        if (ttlMs && Date.now() - data['persistedAt'] >= ttlMs) {
+            logger.log('Persisted variants are expiring');
+            return null;
+        }
+
+        if (!context || data['distinctId'] !== context['distinct_id']) {
+            logger.log('Persisted variants found, but for a different distinct_id so clearing.');
+            return clearAndReturnNull();
+        }
+
+        var persistedFlags = new Map();
+        _.each(data['flagVariants'], function(variantData, key) {
+            persistedFlags.set(key, {
+                'key': variantData['variant_key'],
+                'value': variantData['variant_value'],
+                'experiment_id': variantData['experiment_id'],
+                'is_experiment_active': variantData['is_experiment_active'],
+                'is_qa_tester': variantData['is_qa_tester'],
+                'variant_source': 'persistence',
+                'persisted_at_in_ms': data['persistedAt'],
+                'ttl_in_ms': ttlMs
+            });
+        });
+
+        logger.log('Loaded', persistedFlags.size, 'variants from IndexedDB for distinct_id', data['distinctId']);
+
+        return {
+            flags: persistedFlags,
+            pendingFirstTimeEvents: data['pendingFirstTimeEvents'] || {},
+            persistedAtMs: data['persistedAt'],
+            ttlMs: ttlMs
+        };
+    }, this)).catch(_.bind(function(error) {
+        logger.error('Failed to load persisted variants from IndexedDB, so clearing', error);
+        return clearAndReturnNull();
+    }, this));
+};
+
+FeatureFlagPersistence.prototype.save = function(context, flagsMap, pendingFirstTimeEvents) {
+    if (this.getPolicy() === VariantLookupPolicy.NETWORK_ONLY) {
+        return Promise.resolve();
+    }
+
+    var flagVariants = {};
+    flagsMap.forEach(function(variant, key) {
+        flagVariants[key] = {
+            'variant_key': variant['key'],
+            'variant_value': variant['value'],
+            'experiment_id': variant['experiment_id'],
+            'is_experiment_active': variant['is_experiment_active'],
+            'is_qa_tester': variant['is_qa_tester']
+        };
+    });
+
+    var data = {
+        'persistedAt': Date.now(),
+        'distinctId': context && context['distinct_id'],
+        'context': context,
+        'flagVariants': flagVariants,
+        'pendingFirstTimeEvents': pendingFirstTimeEvents || {}
+    };
+
+    return this.idb.init().then(_.bind(function() {
+        return this.idb.setItem(this.persistedVariantsKey, data);
+    }, this)).then(function() {
+        logger.log('Saved', flagsMap.size, 'variants to IndexedDB for distinct_id', data['distinctId']);
+    }).catch(function(error) {
+        logger.error('Failed to persist variants to IndexedDB:', error);
+    });
+};
+
+FeatureFlagPersistence.prototype.clear = function() {
+    if (this.isGloballyDisabled()) {
+        return Promise.resolve();
+    }
+    return this.idb.init().then(_.bind(function() {
+        return this.idb.removeItem(this.persistedVariantsKey);
+    }, this)).then(function() {
+        logger.log('Cleared persisted variants from IndexedDB');
+    }).catch(function(error) {
+        logger.error('Failed to clear persisted variants from IndexedDB:', error);
+    });
+};
+
+export { FeatureFlagPersistence, VariantLookupPolicy, FLAGS_STORE_NAME, PERSISTED_VARIANTS_KEY_PREFIX };

package/src/flags/index.js

@@ -4,11 +4,13 @@ import { Config, TARGETING_GLOBAL_NAME } from '../config';
 import {
     getTargetingPromise
 } from '../targeting/loader';
+import { FeatureFlagPersistence, VariantLookupPolicy } from './flags-persistence';
 
 var logger = console_with_prefix('flags');
 var FLAGS_CONFIG_KEY = 'flags';
 
 var CONFIG_CONTEXT = 'context';
+var CONFIG_PERSISTENCE = 'persistence';
 var CONFIG_DEFAULTS = {};
 CONFIG_DEFAULTS[CONFIG_CONTEXT] = {};
 
@@ -31,6 +33,13 @@ var getFlagKeyFromPendingEventKey = function(eventKey) {
     return eventKey.split(':')[0];
 };
 
+var withFallbackSource = function(fallback) {
+    if (_.isObject(fallback)) {
+        return _.extend({}, fallback, {'variant_source': 'fallback'});
+    }
+    return {'value': fallback, 'variant_source': 'fallback'};
+};
+
 /**
  * FeatureFlagManager: support for Mixpanel's feature flagging product
  * @constructor
@@ -53,13 +62,63 @@ FeatureFlagManager.prototype.init = function() {
     }
 
     this.flags = null;
-    this.fetchFlags().catch(function() {
-        logger.error('Error fetching flags during init');
-    });
-
     this.trackedFeatures = new Set();
     this.pendingFirstTimeEvents = {};
     this.activatedFirstTimeEvents = {};
+    this._loadedPersistedAtMs = null;
+    this._loadedTtlMs = null;
+
+    this.persistence = new FeatureFlagPersistence(
+        this.getConfig(CONFIG_PERSISTENCE),
+        this.getMpConfig('token'),
+        _.bind(function() { return this.getMpConfig('disable_persistence'); }, this)
+    );
+
+    this.persistenceLoadedPromise = this.persistence.loadFlagsFromStorage(this._buildContext())
+        .then(_.bind(function(loaded) {
+            if (loaded) {
+                this.flags = loaded.flags;
+                this.pendingFirstTimeEvents = loaded.pendingFirstTimeEvents;
+                this._loadedPersistedAtMs = loaded.persistedAtMs;
+                this._loadedTtlMs = loaded.ttlMs;
+            }
+        }, this));
+
+    return this.persistenceLoadedPromise
+        .then(_.bind(function() {
+            return this.fetchFlags();
+        }, this))
+        .catch(function() {
+            logger.error('Error initializing feature flags');
+        });
+};
+
+FeatureFlagManager.prototype._buildContext = function() {
+    return _.extend(
+        {'distinct_id': this.getMpProperty('distinct_id'), 'device_id': this.getMpProperty('$device_id')},
+        this.getConfig(CONFIG_CONTEXT)
+    );
+};
+
+FeatureFlagManager.prototype.reset = function() {
+    if (!this.persistence) {
+        return Promise.resolve();
+    }
+
+    this.flags = null;
+    this.pendingFirstTimeEvents = {};
+    this.activatedFirstTimeEvents = {};
+    this.trackedFeatures = new Set();
+    this.fetchPromise = null;
+    this._fetchInProgressStartTime = null;
+    this._loadedPersistedAtMs = null;
+    this._loadedTtlMs = null;
+
+    return this.persistence.clear().then(_.bind(function() {
+        return this.fetchFlags();
+    }, this)).catch(function() {
+        logger.error('Error during flags reset');
+    });
 };
 
 FeatureFlagManager.prototype.getFullConfig = function() {
@@ -116,12 +175,11 @@ FeatureFlagManager.prototype.fetchFlags = function() {
         return Promise.resolve();
     }
 
-    var distinctId = this.getMpProperty('distinct_id');
-    var deviceId = this.getMpProperty('$device_id');
+    var context = this._buildContext();
+    var distinctId = context['distinct_id'];
     var traceparent = generateTraceparent();
     logger.log('Fetching flags for distinct ID: ' + distinctId);
 
-    var context = _.extend({'distinct_id': distinctId, 'device_id': deviceId}, this.getConfig(CONFIG_CONTEXT));
     var searchParams = new URLSearchParams();
     searchParams.set('context', JSON.stringify(context));
     searchParams.set('token', this.getMpConfig('token'));
@@ -171,7 +229,8 @@ FeatureFlagManager.prototype.fetchFlags = function() {
                     'value': data['variant_value'],
                     'experiment_id': data['experiment_id'],
                     'is_experiment_active': data['is_experiment_active'],
-                    'is_qa_tester': data['is_qa_tester']
+                    'is_qa_tester': data['is_qa_tester'],
+                    'variant_source': 'network'
                 });
             }
         }, this);
@@ -213,10 +272,15 @@ FeatureFlagManager.prototype.fetchFlags = function() {
         }
 
         this.flags = flags;
+        this.trackedFeatures = new Set();
         this.pendingFirstTimeEvents = pendingFirstTimeEvents;
+        this._loadedPersistedAtMs = null;
+        this._loadedTtlMs = null;
         this._traceparent = traceparent;
 
         this._loadTargetingIfNeeded();
+
+        this.persistence.save(context, this.flags, this.pendingFirstTimeEvents);
     }.bind(this)).catch(function(error) {
         if (this._fetchInProgressStartTime) {
             this.markFetchComplete();
@@ -376,6 +440,7 @@ FeatureFlagManager.prototype._processFirstTimeEventCheck = function(eventName, p
         };
 
         this.flags.set(flagKey, newVariant);
+        this.trackedFeatures.delete(flagKey);
         this.activatedFirstTimeEvents[eventKey] = true;
 
         this.recordFirstTimeEvent(
@@ -425,35 +490,106 @@ FeatureFlagManager.prototype.recordFirstTimeEvent = function(flagId, projectId,
 };
 
 FeatureFlagManager.prototype.getVariant = function(featureName, fallback) {
-    if (!this.fetchPromise) {
+    if (!this.persistenceLoadedPromise) {
         return new Promise(function(resolve) {
             logger.critical('Feature Flags not initialized');
-            resolve(fallback);
+            resolve(withFallbackSource(fallback));
         });
     }
 
-    return this.fetchPromise.then(function() {
-        return this.getVariantSync(featureName, fallback);
-    }.bind(this)).catch(function(error) {
-        logger.error(error);
-        return fallback;
-    });
+    var policy = this.persistence.getPolicy();
+
+    return this.persistenceLoadedPromise.then(_.bind(function() {
+        // Serve from persistence until the network completes a successful fetch. If a non-expired cached value is available, return it without waiting on the in-flight fetch.
+        if (policy === VariantLookupPolicy.PERSISTENCE_UNTIL_NETWORK_SUCCESS) {
+            if (this.areFlagsReady() && !this._loadedPersistenceIsStale()) {
+                return this.getVariantSync(featureName, fallback);
+            }
+            if (!this.fetchPromise) {
+                return withFallbackSource(fallback);
+            }
+            return this.fetchPromise.then(_.bind(function() {
+                return this.getVariantSync(featureName, fallback);
+            }, this)).catch(function(error) {
+                logger.error(error);
+                return withFallbackSource(fallback);
+            });
+        }
+
+        var serve = _.bind(function() { return this.getVariantSync(featureName, fallback); }, this);
+        if (!this.fetchPromise) {
+            return withFallbackSource(fallback);
+        }
+        return this.fetchPromise.then(serve).catch(serve);
+    }, this));
+};
+
+FeatureFlagManager.prototype._loadedPersistenceIsStale = function() {
+    if (!this._loadedPersistedAtMs || !this._loadedTtlMs) {
+        return false;
+    }
+    return Date.now() - this._loadedPersistedAtMs >= this._loadedTtlMs;
 };
 
 FeatureFlagManager.prototype.getVariantSync = function(featureName, fallback) {
+    if (this._loadedPersistenceIsStale()) {
+        logger.log('Loaded persisted variants are past TTL so returning fallback for "' + featureName + '"');
+        return withFallbackSource(fallback);
+    }
     if (!this.areFlagsReady()) {
         logger.log('Flags not loaded yet');
-        return fallback;
+        return withFallbackSource(fallback);
     }
     var feature = this.flags.get(featureName);
     if (!feature) {
         logger.log('No flag found: "' + featureName + '"');
-        return fallback;
+        return withFallbackSource(fallback);
     }
     this.trackFeatureCheck(featureName, feature);
     return feature;
 };
 
+FeatureFlagManager.prototype.getAllVariants = function() {
+    if (!this.persistenceLoadedPromise) {
+        logger.critical('Feature Flags not initialized');
+        return Promise.resolve(new Map());
+    }
+
+    var policy = this.persistence.getPolicy();
+
+    return this.persistenceLoadedPromise.then(_.bind(function() {
+        // Serve from persistence until the network completes a successful fetch. If a non-expired cached value is available, return it without waiting on the in-flight fetch.
+        if (policy === VariantLookupPolicy.PERSISTENCE_UNTIL_NETWORK_SUCCESS) {
+            if (this.areFlagsReady() && !this._loadedPersistenceIsStale()) {
+                return this.getAllVariantsSync();
+            }
+            if (!this.fetchPromise) {
+                return new Map();
+            }
+            return this.fetchPromise.then(_.bind(function() {
+                return this.getAllVariantsSync();
+            }, this)).catch(function(error) {
+                logger.error(error);
+                return new Map();
+            });
+        }
+
+        var serve = _.bind(this.getAllVariantsSync, this);
+        if (!this.fetchPromise) {
+            return new Map();
+        }
+        return this.fetchPromise.then(serve).catch(serve);
+    }, this));
+};
+
+FeatureFlagManager.prototype.getAllVariantsSync = function() {
+    if (this._loadedPersistenceIsStale()) {
+        logger.log('Loaded persisted variants are past TTL so returning empty Map');
+        return new Map();
+    }
+    return this.flags || new Map();
+};
+
 FeatureFlagManager.prototype.getVariantValue = function(featureName, fallbackValue) {
     return this.getVariant(featureName, {'value': fallbackValue}).then(function(feature) {
         return feature['value'];
@@ -492,6 +628,10 @@ FeatureFlagManager.prototype.isEnabledSync = function(featureName, fallbackValue
     return val;
 };
 
+function isPresent(v) {
+    return v !== undefined && v !== null;
+}
+
 FeatureFlagManager.prototype.trackFeatureCheck = function(featureName, feature) {
     if (this.trackedFeatures.has(featureName)) {
         return;
@@ -502,21 +642,30 @@ FeatureFlagManager.prototype.trackFeatureCheck = function(featureName, feature)
         'Experiment name': featureName,
         'Variant name': feature['key'],
         '$experiment_type': 'feature_flag',
-        'Variant fetch start time': new Date(this._fetchStartTime).toISOString(),
-        'Variant fetch complete time': new Date(this._fetchCompleteTime).toISOString(),
+        'Variant fetch start time': isPresent(this._fetchStartTime) ? new Date(this._fetchStartTime).toISOString() : null,
+        'Variant fetch complete time': isPresent(this._fetchCompleteTime) ? new Date(this._fetchCompleteTime).toISOString() : null,
         'Variant fetch latency (ms)': this._fetchLatency,
         'Variant fetch traceparent': this._traceparent,
     };
 
-    if (feature['experiment_id'] !== 'undefined') {
+    if (isPresent(feature['experiment_id'])) {
         trackingProperties['$experiment_id'] = feature['experiment_id'];
     }
-    if (feature['is_experiment_active'] !== 'undefined') {
+    if (isPresent(feature['is_experiment_active'])) {
         trackingProperties['$is_experiment_active'] = feature['is_experiment_active'];
     }
-    if (feature['is_qa_tester'] !== 'undefined') {
+    if (isPresent(feature['is_qa_tester'])) {
         trackingProperties['$is_qa_tester'] = feature['is_qa_tester'];
     }
+    if (isPresent(feature['variant_source'])) {
+        trackingProperties['$variant_source'] = feature['variant_source'];
+    }
+    if (isPresent(feature['persisted_at_in_ms'])) {
+        trackingProperties['$persisted_at_in_ms'] = feature['persisted_at_in_ms'];
+    }
+    if (isPresent(feature['ttl_in_ms'])) {
+        trackingProperties['$ttl_in_ms'] = feature['ttl_in_ms'];
+    }
 
     this.track('$experiment_started', trackingProperties);
 };
@@ -540,6 +689,8 @@ safewrapClass(FeatureFlagManager);
 FeatureFlagManager.prototype['are_flags_ready'] = FeatureFlagManager.prototype.areFlagsReady;
 FeatureFlagManager.prototype['get_variant'] = FeatureFlagManager.prototype.getVariant;
 FeatureFlagManager.prototype['get_variant_sync'] = FeatureFlagManager.prototype.getVariantSync;
+FeatureFlagManager.prototype['get_all_variants'] = FeatureFlagManager.prototype.getAllVariants;
+FeatureFlagManager.prototype['get_all_variants_sync'] = FeatureFlagManager.prototype.getAllVariantsSync;
 FeatureFlagManager.prototype['get_variant_value'] = FeatureFlagManager.prototype.getVariantValue;
 FeatureFlagManager.prototype['get_variant_value_sync'] = FeatureFlagManager.prototype.getVariantValueSync;
 FeatureFlagManager.prototype['is_enabled'] = FeatureFlagManager.prototype.isEnabled;

package/src/index.d.ts

@@ -165,8 +165,47 @@ export interface AutocaptureConfig {
   block_element_callback?: (element: Element, event: Event) => boolean;
 }
 
+/**
+ * Network-only variant lookup - no persistence. Default behavior.
+ */
+export interface NetworkOnlyFlagsPolicy {
+  variantLookupPolicy: "networkOnly";
+}
+
+/**
+ * Network-first variant lookup - prioritizes freshness.
+ * Attempts network fetch first, falls back to persisted variants on failure.
+ */
+export interface NetworkFirstFlagsPolicy {
+  variantLookupPolicy: "networkFirst";
+  /**
+   * Time-to-live in milliseconds. Persisted variants older than this are discarded.
+   * Defaults to 24 hours.
+   */
+  persistenceTtlMs?: number;
+}
+
+/**
+ * Serves persisted variants immediately while a network fetch runs in the background.
+ * Once the fetch succeeds, its result replaces the cached variants for the rest of the session.
+ */
+export interface PersistenceUntilNetworkSuccessFlagsPolicy {
+  variantLookupPolicy: "persistenceUntilNetworkSuccess";
+  /**
+   * Time-to-live in milliseconds. Persisted variants older than this are discarded.
+   * Defaults to 24 hours.
+   */
+  persistenceTtlMs?: number;
+}
+
+export type FlagsPersistencePolicy =
+  | NetworkOnlyFlagsPolicy
+  | NetworkFirstFlagsPolicy
+  | PersistenceUntilNetworkSuccessFlagsPolicy;
+
 export interface FlagsConfig {
-  context: Dict;
+  context?: Dict;
+  persistence?: FlagsPersistencePolicy;
 }
 
 export interface BeforeSendHookPayload {
@@ -349,6 +388,8 @@ export interface FlagsVariant {
   experiment_id?: string;
   is_experiment_active?: boolean;
   is_qa_tester?: boolean;
+  variant_source?: string;
+  persisted_at_in_ms?: number;
 }
 
 export interface FlagsUpdateContextOptions {
@@ -365,12 +406,15 @@ export interface FlagsManager {
   get_variant_sync(featureName: string, fallback: FlagsVariant): FlagsVariant;
   get_variant_value(featureName: string, fallbackValue: any): Promise<any>;
   get_variant_value_sync(featureName: string, fallbackValue: any): any;
+  get_all_variants(): Promise<Map<string, FlagsVariant>>;
+  get_all_variants_sync(): Map<string, FlagsVariant>;
   is_enabled(featureName: string, fallbackValue?: boolean): Promise<boolean>;
   is_enabled_sync(featureName: string, fallbackValue?: boolean): boolean;
   update_context(
     context: Dict,
     options?: FlagsUpdateContextOptions
   ): Promise<void>;
+  when_ready(): Promise<void>;
 }
 
 export interface Mixpanel {

package/src/mixpanel-core.js

@@ -1,6 +1,6 @@
 /* eslint camelcase: "off" */
 import {Config, TARGETING_FILENAME} from './config';
-import { MAX_RECORDING_MS, _, console, userAgent, document, navigator, slice, NOOP_FUNC, JSONStringify } from './utils';
+import { MAX_RECORDING_MS, _, console, userAgent, document, navigator, slice, NOOP_FUNC, JSONStringify, safewrap } from './utils';
 import { window } from './window';
 import { Autocapture } from './autocapture';
 import { FeatureFlagManager } from './flags';
@@ -341,6 +341,7 @@ MixpanelLib.prototype._init = function(token, config, name) {
         'disable_all_events': false,
         'identify_called': false
     };
+    this._remote_settings_strict_disabled = false;
 
     // set up request queueing/batching
     this.request_batchers = {};
@@ -415,9 +416,6 @@ MixpanelLib.prototype._init = function(token, config, name) {
     this.flags.init();
     this['flags'] = this.flags;
 
-    this.autocapture = new Autocapture(this);
-    this.autocapture.init();
-
     this._init_tab_id();
 
     // Based on remote_settings_mode, fetch remote settings and then start session recording if applicable
@@ -429,6 +427,9 @@ MixpanelLib.prototype._init = function(token, config, name) {
     } else {
         this.__session_recording_init_promise = this._check_and_start_session_recording();
     }
+
+    this.autocapture = new Autocapture(this);
+    this.autocapture.init();
 };
 
 /**
@@ -475,9 +476,19 @@ MixpanelLib.prototype._check_and_start_session_recording = addOptOutCheckMixpane
     return this.recorderManager.checkAndStartSessionRecording(force_start);
 });
 
-MixpanelLib.prototype._start_recording_on_event = function(event_name, properties) {
-    return this.recorderManager.startRecordingOnEvent(event_name, properties);
-};
+MixpanelLib.prototype._start_recording_on_event = safewrap(function(event_name, properties) {
+    // Wait for recording init to complete before evaluating event triggers.
+    // This ensures recording_event_triggers config is fully loaded when remote settings are used.
+    if (this.__session_recording_init_promise) {
+        this.__session_recording_init_promise.then(_.bind(function() {
+            // In strict mode, skip recording if remote settings failed
+            if (this._remote_settings_strict_disabled) {
+                return;
+            }
+            return this.recorderManager.startRecordingOnEvent(event_name, properties);
+        }, this));
+    }
+});
 
 MixpanelLib.prototype.start_session_recording = function () {
     return this._check_and_start_session_recording(true);
@@ -776,6 +787,7 @@ MixpanelLib.prototype._fetch_remote_settings = function(mode) {
     var disableRecordingIfStrict = function() {
         if (mode === 'strict') {
             self.set_config({'record_sessions_percent': 0});
+            self._remote_settings_strict_disabled = true;
         }
     };
 
@@ -1401,6 +1413,10 @@ MixpanelLib.prototype.track_pageview = addOptOutCheckMixpanelLib(function(proper
         properties
     );
 
+    if (this.is_recording_heatmap_data()) {
+        event_properties['$captured_for_heatmap'] = true;
+    }
+
     return this.track(event_name, event_properties);
 });
 
@@ -1744,6 +1760,7 @@ MixpanelLib.prototype.reset = function() {
         '$device_id': uuid
     }, '');
     this._check_and_start_session_recording();
+    this.flags.reset();
 };
 
 /**

package/src/recorder/idb-config.js

@@ -0,0 +1,16 @@
+var MIXPANEL_BROWSER_DB_NAME = 'mixpanelBrowserDb';
+var RECORDING_EVENTS_STORE_NAME = 'mixpanelRecordingEvents';
+var RECORDING_REGISTRY_STORE_NAME = 'mixpanelRecordingRegistry';
+
+// Keeping these two properties closeby, as adding additional stores to a DB in IndexedDB requires a version increment
+var RECORDER_VERSION_DATA = {
+    version: 1,
+    storeNames: [RECORDING_EVENTS_STORE_NAME, RECORDING_REGISTRY_STORE_NAME]
+};
+
+export {
+    MIXPANEL_BROWSER_DB_NAME,
+    RECORDING_EVENTS_STORE_NAME,
+    RECORDING_REGISTRY_STORE_NAME,
+    RECORDER_VERSION_DATA
+};

package/src/recorder/recording-registry.js

@@ -1,5 +1,10 @@
 import { Promise } from '../promise-polyfill';
-import { IDBStorageWrapper, RECORDING_REGISTRY_STORE_NAME } from '../storage/indexed-db';
+import { IDBStorageWrapper } from '../storage/indexed-db';
+import {
+    MIXPANEL_BROWSER_DB_NAME,
+    RECORDING_REGISTRY_STORE_NAME,
+    RECORDER_VERSION_DATA
+} from './idb-config';
 import { SessionRecording } from './session-recording';
 import { isRecordingExpired } from './utils';
 
@@ -9,7 +14,7 @@ import { isRecordingExpired } from './utils';
  */
 var RecordingRegistry = function (options) {
     /** @type {IDBStorageWrapper} */
-    this.idb = new IDBStorageWrapper(RECORDING_REGISTRY_STORE_NAME);
+    this.idb = new IDBStorageWrapper(MIXPANEL_BROWSER_DB_NAME, RECORDING_REGISTRY_STORE_NAME, RECORDER_VERSION_DATA);
     this.errorReporter = options.errorReporter;
     this.mixpanelInstance = options.mixpanelInstance;
     this.sharedLockStorage = options.sharedLockStorage;