mixpanel-browser 2.67.0 → 2.69.0

package/src/index.d.ts

@@ -40,6 +40,17 @@ export interface OutTrackingOptions extends ClearOptOutInOutOptions {
   delete_user: boolean;
 }
 
+export type RageClickConfig = 
+  | boolean
+  | {
+    /** Distance threshold in pixels for clicks to be considered within the same area (default: 30) */
+    threshold_px?: number;
+    /** Time window in milliseconds for clicks to be considered rapid (default: 1000) */
+    timeout_ms?: number;
+    /** Number of clicks required to trigger a rage click event (default: 3) */
+    click_count?: number;
+  };
+
 export interface RegisterOptions {
   persistent: boolean;
 }
@@ -66,6 +77,12 @@ export interface AutocaptureConfig {
    * @default 'full-url'
    */
   pageview?: TrackPageView;
+  /**
+   * When set to `true`, Mixpanel will track rage clicks (multiple clicks in a short time on the same element).
+   * Can also be configured as an object to customize rage click detection parameters.
+   * @default true
+   */
+  rage_click?: RageClickConfig;
   /**
    * When set, Mixpanel will collect page scrolls at specified scroll intervals.
    * @default true
@@ -181,9 +198,11 @@ export interface Config {
   record_inline_images: boolean;
   record_mask_text_class: string;
   record_mask_text_selector: string;
+  record_min_ms: number;
   record_max_ms: number;
   record_sessions_percent: number;
   record_canvas: boolean;
+  record_heatmap_data: boolean;
 }
 
 export type VerboseResponse =

package/src/mixpanel-core.js

@@ -149,7 +149,7 @@ var DEFAULT_CONFIG = {
     'batch_autostart':                   true,
     'hooks':                             {},
     'record_block_class':                new RegExp('^(mp-block|fs-exclude|amp-block|rr-block|ph-no-capture)$'),
-    'record_block_selector':             'img, video',
+    'record_block_selector':             'img, video, audio',
     'record_canvas':                     false,
     'record_collect_fonts':              false,
     'record_heatmap_data':               false,
@@ -373,6 +373,7 @@ MixpanelLib.prototype._init = function(token, config, name) {
             return this.get_api_host('flags') + '/' + this.get_config('api_routes')['flags'];
         }, this),
         getConfigFunc: _.bind(this.get_config, this),
+        setConfigFunc: _.bind(this.set_config, this),
         getPropertyFunc: _.bind(this.get_property, this),
         trackingFunc: _.bind(this.track, this)
     });
@@ -391,7 +392,9 @@ MixpanelLib.prototype._init = function(token, config, name) {
  * This is primarily used for session recording, where data must be isolated to the current tab.
  */
 MixpanelLib.prototype._init_tab_id = function() {
-    if (_.sessionStorage.is_supported()) {
+    if (this.get_config('disable_persistence')) {
+        console.log('Tab ID initialization skipped due to disable_persistence config');
+    } else if (_.sessionStorage.is_supported()) {
         try {
             var key_suffix = this.get_config('name') + '_' + this.get_config('token');
             var tab_id_key = 'mp_tab_id_' + key_suffix;
@@ -425,6 +428,11 @@ MixpanelLib.prototype.get_tab_id = function () {
 };
 
 MixpanelLib.prototype._should_load_recorder = function () {
+    if (this.get_config('disable_persistence')) {
+        console.log('Load recorder check skipped due to disable_persistence config');
+        return Promise.resolve(false);
+    }
+
     var recording_registry_idb = new IDBStorageWrapper(RECORDING_REGISTRY_STORE_NAME);
     var tab_id = this.get_tab_id();
     return recording_registry_idb.init()

package/src/recorder/recorder.js

@@ -1,4 +1,4 @@
-import { record } from 'rrweb';
+import { record } from '@mixpanel/rrweb';
 import { Promise } from '../promise-polyfill';
 import { SessionRecording } from './session-recording';
 import { RecordingRegistry } from './recording-registry';

package/src/recorder/recording-registry.js

@@ -8,12 +8,17 @@ import { isRecordingExpired } from './utils';
  * Makes sure that only one tab can be recording at a time.
  */
 var RecordingRegistry = function (options) {
+    /** @type {IDBStorageWrapper} */
     this.idb = new IDBStorageWrapper(RECORDING_REGISTRY_STORE_NAME);
     this.errorReporter = options.errorReporter;
     this.mixpanelInstance = options.mixpanelInstance;
     this.sharedLockStorage = options.sharedLockStorage;
 };
 
+RecordingRegistry.prototype.isPersistenceEnabled = function() {
+    return !this.mixpanelInstance.get_config('disable_persistence');
+};
+
 RecordingRegistry.prototype.handleError = function (err) {
     this.errorReporter('IndexedDB error: ', err);
 };
@@ -22,6 +27,10 @@ RecordingRegistry.prototype.handleError = function (err) {
  * @param {import('./session-recording').SerializedRecording} serializedRecording
  */
 RecordingRegistry.prototype.setActiveRecording = function (serializedRecording) {
+    if (!this.isPersistenceEnabled()) {
+        return Promise.resolve();
+    }
+
     var tabId = serializedRecording['tabId'];
     if (!tabId) {
         console.warn('No tab ID is set, cannot persist recording metadata.');
@@ -39,6 +48,10 @@ RecordingRegistry.prototype.setActiveRecording = function (serializedRecording)
  * @returns {Promise<import('./session-recording').SerializedRecording>}
  */
 RecordingRegistry.prototype.getActiveRecording = function () {
+    if (!this.isPersistenceEnabled()) {
+        return Promise.resolve(null);
+    }
+
     return this.idb.init()
         .then(function () {
             return this.idb.getItem(this.mixpanelInstance.get_tab_id());
@@ -50,8 +63,16 @@ RecordingRegistry.prototype.getActiveRecording = function () {
 };
 
 RecordingRegistry.prototype.clearActiveRecording = function () {
-    // mark recording as expired instead of deleting it in case the page unloads mid-flush and doesn't make it to ingestion.
-    // this will ensure the next pageload will flush the remaining events, but not try to continue the recording.
+    if (this.isPersistenceEnabled()) {
+        // mark recording as expired instead of deleting it in case the page unloads mid-flush and doesn't make it to ingestion.
+        // this will ensure the next pageload will flush the remaining events, but not try to continue the recording.
+        return this.markActiveRecordingExpired();
+    } else {
+        return this.deleteActiveRecording();
+    }
+};
+
+RecordingRegistry.prototype.markActiveRecordingExpired = function () {
     return this.getActiveRecording()
         .then(function (serializedRecording) {
             if (serializedRecording) {
@@ -62,11 +83,25 @@ RecordingRegistry.prototype.clearActiveRecording = function () {
         .catch(this.handleError.bind(this));
 };
 
+RecordingRegistry.prototype.deleteActiveRecording = function () {
+    // avoid initializing IDB if this registry instance hasn't already written a recording
+    if (this.idb.isInitialized()) {
+        return this.idb.removeItem(this.mixpanelInstance.get_tab_id())
+            .catch(this.handleError.bind(this));
+    } else {
+        return Promise.resolve();
+    }
+};
+
 /**
  * Flush any inactive recordings from the registry to minimize data loss.
  * The main idea here is that we can flush remaining rrweb events on the next page load if a tab is closed mid-batch.
  */
 RecordingRegistry.prototype.flushInactiveRecordings = function () {
+    if (!this.isPersistenceEnabled()) {
+        return Promise.resolve([]);
+    }
+
     return this.idb.init()
         .then(function() {
             return this.idb.getAll();

package/src/recorder/session-recording.js

@@ -1,5 +1,5 @@
 import { window } from '../window';
-import { IncrementalSource, EventType } from 'rrweb';
+import { IncrementalSource, EventType } from '@mixpanel/rrweb';
 import { MAX_RECORDING_MS, MAX_VALUE_FOR_MIN_RECORDING_MS, console_with_prefix, NOOP_FUNC, _, localStorageSupported} from '../utils'; // eslint-disable-line camelcase
 import { IDBStorageWrapper, RECORDING_EVENTS_STORE_NAME } from '../storage/indexed-db';
 import { addOptOutCheckMixpanelLib } from '../gdpr-utils';
@@ -101,10 +101,9 @@ var SessionRecording = function(options) {
 
     // disable persistence if localStorage is not supported
     // request-queue will automatically disable persistence if indexedDB fails to initialize
-    var usePersistence = localStorageSupported(options.sharedLockStorage, true);
+    var usePersistence = localStorageSupported(options.sharedLockStorage, true) && !this.getConfig('disable_persistence');
 
     // each replay has its own batcher key to avoid conflicts between rrweb events of different recordings
-    // this will be important when persistence is introduced
     this.batcherKey = '__mprec_' + this.getConfig('name') + '_' + this.getConfig('token') + '_' + this.replayId;
     this.queueStorage = new IDBStorageWrapper(RECORDING_EVENTS_STORE_NAME);
     this.batcher = new RequestBatcher(this.batcherKey, {

package/src/request-queue.js

@@ -50,7 +50,7 @@ var RequestQueue = function (storageKey, options) {
 };
 
 RequestQueue.prototype.ensureInit = function () {
-    if (this.initialized) {
+    if (this.initialized || !this.usePersistence) {
         return Promise.resolve();
     }
 

package/src/storage/indexed-db.js

@@ -61,6 +61,10 @@ IDBStorageWrapper.prototype.init = function () {
         });
 };
 
+IDBStorageWrapper.prototype.isInitialized = function () {
+    return !!this.dbPromise;
+};
+
 /**
  * @param {IDBTransactionMode} mode
  * @param {function(IDBObjectStore): void} storeCb

package/src/storage/local-storage.js

@@ -13,6 +13,10 @@ LocalStorageWrapper.prototype.init = function () {
     return Promise.resolve();
 };
 
+LocalStorageWrapper.prototype.isInitialized = function () {
+    return true;
+};
+
 LocalStorageWrapper.prototype.setItem = function (key, value) {
     return new Promise(_.bind(function (resolve, reject) {
         try {

package/src/storage/wrapper.js

@@ -6,6 +6,7 @@
 /**
  * @typedef {Object} StorageWrapper
  * @property {function():Promise<void>} init - Initializes the wrapper, async storage like IDB needs to create a table and upgrade if needed.
+ * @property {function():boolean} isInitialized - Checks if the storage is initialized.
  * @property {function(string, any):Promise<void>} setItem - Sets an item in storage.
  * @property {function(string):Promise<any>} getItem - Retrieves an item from storage.
  * @property {function(string):Promise<void>} removeItem - Removes an item from storage.