mixpanel-browser 2.60.0 → 2.61.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mixpanel-browser",
-  "version": "2.60.0",
+  "version": "2.61.0",
   "description": "The official Mixpanel JavaScript browser client library",
   "main": "dist/mixpanel.cjs.js",
   "module": "dist/mixpanel.module.js",
@@ -45,6 +45,7 @@
     "dox": "0.9.0",
     "eslint": "4.18.2",
     "express": "4.12.2",
+    "fake-indexeddb": "6.0.0",
     "jsdom": "16.5.0",
     "jsdom-global": "3.0.2",
     "localStorage": "1.0.4",

package/src/config.js

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

package/src/mixpanel-core.js

@@ -1,6 +1,7 @@
 /* eslint camelcase: "off" */
 import Config from './config';
-import { MAX_RECORDING_MS, _, console, userAgent, document, navigator, slice } from './utils';
+import { MAX_RECORDING_MS, _, console, userAgent, document, navigator, slice, NOOP_FUNC } from './utils';
+import { isRecordingExpired } from './recorder/utils';
 import { window } from './window';
 import { Autocapture } from './autocapture';
 import { FormTracker, LinkTracker } from './dom-trackers';
@@ -20,6 +21,7 @@ import {
     clearOptInOut,
     addOptOutCheckMixpanelLib
 } from './gdpr-utils';
+import { IDBStorageWrapper, RECORDING_REGISTRY_STORE_NAME } from './storage/indexed-db';
 
 /*
  * Mixpanel JS Library
@@ -33,11 +35,6 @@ import {
  * Released under the MIT License.
  */
 
-// ==ClosureCompiler==
-// @compilation_level ADVANCED_OPTIMIZATIONS
-// @output_file_name mixpanel-2.8.min.js
-// ==/ClosureCompiler==
-
 /*
 SIMPLE STYLE GUIDE:
 
@@ -60,7 +57,6 @@ var INIT_MODULE  = 0;
 var INIT_SNIPPET = 1;
 
 var IDENTITY_FUNC = function(x) {return x;};
-var NOOP_FUNC = function() {};
 
 /** @const */ var PRIMARY_INSTANCE_NAME = 'mixpanel';
 /** @const */ var PAYLOAD_TYPE_BASE64   = 'base64';
@@ -369,34 +365,125 @@ MixpanelLib.prototype._init = function(token, config, name) {
     this.autocapture = new Autocapture(this);
     this.autocapture.init();
 
-    if (this.get_config('record_sessions_percent') > 0 && Math.random() * 100 <= this.get_config('record_sessions_percent')) {
-        this.start_session_recording();
+    this._init_tab_id();
+    this._check_and_start_session_recording();
+};
+
+/**
+ * Assigns a unique UUID to this tab / window by leveraging sessionStorage.
+ * 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()) {
+        try {
+            var key_suffix = this.get_config('name') + '_' + this.get_config('token');
+            var tab_id_key = 'mp_tab_id_' + key_suffix;
+
+            // A flag is used to determine if sessionStorage is copied over and we need to generate a new tab ID.
+            // This enforces a unique ID in the cases like duplicated tab, window.open(...)
+            var should_generate_new_tab_id_key = 'mp_gen_new_tab_id_' + key_suffix;
+            if (_.sessionStorage.get(should_generate_new_tab_id_key) || !_.sessionStorage.get(tab_id_key)) {
+                _.sessionStorage.set(tab_id_key, '$tab-' + _.UUID());
+            }
+
+            _.sessionStorage.set(should_generate_new_tab_id_key, '1');
+            this.tab_id = _.sessionStorage.get(tab_id_key);
+
+            // Remove the flag when the tab is unloaded to indicate the stored tab ID can be reused. This event is not reliable to detect all page unloads,
+            // but reliable in cases where the user remains in the tab e.g. a refresh or href navigation.
+            // If the flag is absent, this indicates to the next SDK instance that we can reuse the stored tab_id.
+            window.addEventListener('beforeunload', function () {
+                _.sessionStorage.remove(should_generate_new_tab_id_key);
+            });
+        } catch(err) {
+            this.report_error('Error initializing tab id', err);
+        }
+    } else {
+        this.report_error('Session storage is not supported, cannot keep track of unique tab ID.');
     }
 };
 
-MixpanelLib.prototype.start_session_recording = addOptOutCheckMixpanelLib(function () {
+MixpanelLib.prototype.get_tab_id = function () {
+    return this.tab_id || null;
+};
+
+MixpanelLib.prototype._should_load_recorder = function () {
+    var recording_registry_idb = new IDBStorageWrapper(RECORDING_REGISTRY_STORE_NAME);
+    var tab_id = this.get_tab_id();
+    return recording_registry_idb.init()
+        .then(function () {
+            return recording_registry_idb.getAll();
+        })
+        .then(function (recordings) {
+            for (var i = 0; i < recordings.length; i++) {
+                // if there are expired recordings in the registry, we should load the recorder to flush them
+                // if there's a recording for this tab id, we should load the recorder to continue the recording
+                if (isRecordingExpired(recordings[i]) || recordings[i]['tabId'] === tab_id) {
+                    return true;
+                }
+            }
+            return false;
+        })
+        .catch(_.bind(function (err) {
+            this.report_error('Error checking recording registry', err);
+        }, this));
+};
+
+MixpanelLib.prototype._check_and_start_session_recording = addOptOutCheckMixpanelLib(function(force_start) {
     if (!window['MutationObserver']) {
         console.critical('Browser does not support MutationObserver; skipping session recording');
         return;
     }
 
-    var handleLoadedRecorder = _.bind(function() {
-        this._recorder = this._recorder || new window['__mp_recorder'](this);
-        this._recorder['startRecording']();
+    var loadRecorder = _.bind(function(startNewIfInactive) {
+        var handleLoadedRecorder = _.bind(function() {
+            this._recorder = this._recorder || new window['__mp_recorder'](this);
+            this._recorder['resumeRecording'](startNewIfInactive);
+        }, this);
+
+        if (_.isUndefined(window['__mp_recorder'])) {
+            load_extra_bundle(this.get_config('recorder_src'), handleLoadedRecorder);
+        } else {
+            handleLoadedRecorder();
+        }
     }, this);
 
-    if (_.isUndefined(window['__mp_recorder'])) {
-        load_extra_bundle(this.get_config('recorder_src'), handleLoadedRecorder);
+    /**
+     * If the user is sampled or start_session_recording is called, we always load the recorder since it's guaranteed a recording should start.
+     * Otherwise, if the recording registry has any records then it's likely there's a recording in progress or orphaned data that needs to be flushed.
+     */
+    var is_sampled = this.get_config('record_sessions_percent') > 0 && Math.random() * 100 <= this.get_config('record_sessions_percent');
+    if (force_start || is_sampled) {
+        loadRecorder(true);
     } else {
-        handleLoadedRecorder();
+        this._should_load_recorder()
+            .then(function (shouldLoad) {
+                if (shouldLoad) {
+                    loadRecorder(false);
+                }
+            });
     }
 });
 
+MixpanelLib.prototype.start_session_recording = function () {
+    this._check_and_start_session_recording(true);
+};
+
 MixpanelLib.prototype.stop_session_recording = function () {
     if (this._recorder) {
         this._recorder['stopRecording']();
-    } else {
-        console.critical('Session recorder module not loaded');
+    }
+};
+
+MixpanelLib.prototype.pause_session_recording = function () {
+    if (this._recorder) {
+        this._recorder['pauseRecording']();
+    }
+};
+
+MixpanelLib.prototype.resume_session_recording = function () {
+    if (this._recorder) {
+        this._recorder['resumeRecording']();
     }
 };
 
@@ -431,6 +518,11 @@ MixpanelLib.prototype._get_session_replay_id = function () {
     return replay_id || null;
 };
 
+// "private" public method to reach into the recorder in test cases
+MixpanelLib.prototype.__get_recorder = function () {
+    return this._recorder;
+};
+
 // Private methods
 
 MixpanelLib.prototype._loaded = function() {
@@ -770,7 +862,8 @@ MixpanelLib.prototype.init_batchers = function() {
                         return this._run_hook('before_send_' + attrs.type, item);
                     }, this),
                     stopAllBatchingFunc: _.bind(this.stop_batch_senders, this),
-                    usePersistence: true
+                    usePersistence: true,
+                    enqueueThrottleMs: 10,
                 }
             );
         }, this);
@@ -1871,6 +1964,7 @@ MixpanelLib.prototype._gdpr_update_persistence = function(options) {
 
     if (disabled) {
         this.stop_batch_senders();
+        this.stop_session_recording();
     } else {
         // only start batchers after opt-in if they have previously been started
         // in order to avoid unintentionally starting up batching for the first time
@@ -2111,10 +2205,16 @@ MixpanelLib.prototype['start_batch_senders']                = MixpanelLib.protot
 MixpanelLib.prototype['stop_batch_senders']                 = MixpanelLib.prototype.stop_batch_senders;
 MixpanelLib.prototype['start_session_recording']            = MixpanelLib.prototype.start_session_recording;
 MixpanelLib.prototype['stop_session_recording']             = MixpanelLib.prototype.stop_session_recording;
+MixpanelLib.prototype['pause_session_recording']            = MixpanelLib.prototype.pause_session_recording;
+MixpanelLib.prototype['resume_session_recording']           = MixpanelLib.prototype.resume_session_recording;
 MixpanelLib.prototype['get_session_recording_properties']   = MixpanelLib.prototype.get_session_recording_properties;
 MixpanelLib.prototype['get_session_replay_url']             = MixpanelLib.prototype.get_session_replay_url;
+MixpanelLib.prototype['get_tab_id']                         = MixpanelLib.prototype.get_tab_id;
 MixpanelLib.prototype['DEFAULT_API_ROUTES']                 = DEFAULT_API_ROUTES;
 
+// Exports intended only for testing
+MixpanelLib.prototype['__get_recorder']                     = MixpanelLib.prototype.__get_recorder;
+
 // MixpanelPersistence Exports
 MixpanelPersistence.prototype['properties']            = MixpanelPersistence.prototype.properties;
 MixpanelPersistence.prototype['update_search_keyword'] = MixpanelPersistence.prototype.update_search_keyword;

package/src/recorder/index.js

@@ -1,73 +1,4 @@
-import {record} from 'rrweb';
-
-import { SessionRecording } from './session-recording';
-import { console_with_prefix, _ } from '../utils'; // eslint-disable-line camelcase
 import { window } from '../window';
-
-var logger = console_with_prefix('recorder');
-
-/**
- * Recorder API: manages recordings and exposes methods public to the core Mixpanel library.
- * @param {Object} [options.mixpanelInstance] - reference to the core MixpanelLib
- */
-var MixpanelRecorder = function(mixpanelInstance) {
-    this._mixpanel = mixpanelInstance;
-    this.activeRecording = null;
-};
-
-MixpanelRecorder.prototype.startRecording = function(shouldStopBatcher) {
-    if (this.activeRecording && !this.activeRecording.isRrwebStopped()) {
-        logger.log('Recording already in progress, skipping startRecording.');
-        return;
-    }
-
-    var onIdleTimeout = _.bind(function () {
-        logger.log('Idle timeout reached, restarting recording.');
-        this.resetRecording();
-    }, this);
-
-    var onMaxLengthReached = _.bind(function () {
-        logger.log('Max recording length reached, stopping recording.');
-        this.resetRecording();
-    }, this);
-
-    this.activeRecording = new SessionRecording({
-        mixpanelInstance: this._mixpanel,
-        onIdleTimeout: onIdleTimeout,
-        onMaxLengthReached: onMaxLengthReached,
-        replayId: _.UUID(),
-        rrwebRecord: record
-    });
-
-    this.activeRecording.startRecording(shouldStopBatcher);
-};
-
-MixpanelRecorder.prototype.stopRecording = function() {
-    if (this.activeRecording) {
-        this.activeRecording.stopRecording();
-        this.activeRecording = null;
-    }
-};
-
-MixpanelRecorder.prototype.resetRecording = function () {
-    this.stopRecording();
-    this.startRecording(true);
-};
-
-MixpanelRecorder.prototype.getActiveReplayId = function () {
-    if (this.activeRecording && !this.activeRecording.isRrwebStopped()) {
-        return this.activeRecording.replayId;
-    } else {
-        return null;
-    }
-};
-
-// getter so that older mixpanel-core versions can still retrieve the replay ID
-// when pulling the latest recorder bundle from the CDN
-Object.defineProperty(MixpanelRecorder.prototype, 'replayId', {
-    get: function () {
-        return this.getActiveReplayId();
-    }
-});
+import { MixpanelRecorder } from './recorder';
 
 window['__mp_recorder'] = MixpanelRecorder;

package/src/recorder/recorder.js

@@ -0,0 +1,137 @@
+import { record } from 'rrweb';
+import { Promise } from '../promise-polyfill';
+import { SessionRecording } from './session-recording';
+import { RecordingRegistry } from './recording-registry';
+
+import { console_with_prefix, _ } from '../utils'; // eslint-disable-line camelcase
+
+var logger = console_with_prefix('recorder');
+
+/**
+ * Recorder API: bundles rrweb and and exposes methods to start and stop recordings.
+ * @param {Object} [options.mixpanelInstance] - reference to the core MixpanelLib
+*/
+var MixpanelRecorder = function(mixpanelInstance, rrwebRecord, sharedLockStorage) {
+    this.mixpanelInstance = mixpanelInstance;
+    this.rrwebRecord = rrwebRecord || record;
+    this.sharedLockStorage = sharedLockStorage;
+
+    /**
+     * @member {import('./registry').RecordingRegistry}
+     */
+    this.recordingRegistry = new RecordingRegistry({
+        mixpanelInstance: this.mixpanelInstance,
+        errorReporter: logger.error,
+        sharedLockStorage: sharedLockStorage
+    });
+    this._flushInactivePromise = this.recordingRegistry.flushInactiveRecordings();
+
+    this.activeRecording = null;
+};
+
+MixpanelRecorder.prototype.startRecording = function(options) {
+    options = options || {};
+    if (this.activeRecording && !this.activeRecording.isRrwebStopped()) {
+        logger.log('Recording already in progress, skipping startRecording.');
+        return;
+    }
+
+    var onIdleTimeout = function () {
+        logger.log('Idle timeout reached, restarting recording.');
+        this.resetRecording();
+    }.bind(this);
+
+    var onMaxLengthReached = function () {
+        logger.log('Max recording length reached, stopping recording.');
+        this.resetRecording();
+    }.bind(this);
+
+    var onBatchSent = function () {
+        this.recordingRegistry.setActiveRecording(this.activeRecording.serialize());
+        this['__flushPromise'] = this.activeRecording.batcher._flushPromise;
+    }.bind(this);
+
+    /**
+     * @type {import('./session-recording').SessionRecordingOptions}
+     */
+    var sessionRecordingOptions = {
+        mixpanelInstance: this.mixpanelInstance,
+        onBatchSent: onBatchSent,
+        onIdleTimeout: onIdleTimeout,
+        onMaxLengthReached: onMaxLengthReached,
+        replayId: _.UUID(),
+        rrwebRecord: this.rrwebRecord,
+        sharedLockStorage: this.sharedLockStorage
+    };
+
+    if (options.activeSerializedRecording) {
+        this.activeRecording = SessionRecording.deserialize(options.activeSerializedRecording, sessionRecordingOptions);
+    } else {
+        this.activeRecording = new SessionRecording(sessionRecordingOptions);
+    }
+
+    this.activeRecording.startRecording(options.shouldStopBatcher);
+    return this.recordingRegistry.setActiveRecording(this.activeRecording.serialize());
+};
+
+MixpanelRecorder.prototype.stopRecording = function() {
+    var stopPromise = this._stopCurrentRecording(false);
+    this.recordingRegistry.clearActiveRecording();
+    this.activeRecording = null;
+    return stopPromise;
+};
+
+MixpanelRecorder.prototype.pauseRecording = function() {
+    return this._stopCurrentRecording(false);
+};
+
+MixpanelRecorder.prototype._stopCurrentRecording = function(skipFlush) {
+    if (this.activeRecording) {
+        return this.activeRecording.stopRecording(skipFlush);
+    }
+    return Promise.resolve();
+};
+
+MixpanelRecorder.prototype.resumeRecording = function (startNewIfInactive) {
+    if (this.activeRecording && this.activeRecording.isRrwebStopped()) {
+        this.activeRecording.startRecording(false);
+        return Promise.resolve(null);
+    }
+
+    return this.recordingRegistry.getActiveRecording()
+        .then(function (activeSerializedRecording) {
+            if (activeSerializedRecording) {
+                return this.startRecording({activeSerializedRecording: activeSerializedRecording});
+            } else if (startNewIfInactive) {
+                return this.startRecording({shouldStopBatcher: false});
+            } else {
+                logger.log('No resumable recording found.');
+                return null;
+            }
+        }.bind(this));
+};
+
+
+MixpanelRecorder.prototype.resetRecording = function () {
+    this.stopRecording();
+    this.startRecording({shouldStopBatcher: true});
+};
+
+MixpanelRecorder.prototype.getActiveReplayId = function () {
+    if (this.activeRecording && !this.activeRecording.isRrwebStopped()) {
+        return this.activeRecording.replayId;
+    } else {
+        return null;
+    }
+};
+
+// getter so that older mixpanel-core versions can still retrieve the replay ID
+// when pulling the latest recorder bundle from the CDN
+Object.defineProperty(MixpanelRecorder.prototype, 'replayId', {
+    get: function () {
+        return this.getActiveReplayId();
+    }
+});
+
+
+export { MixpanelRecorder };

package/src/recorder/recording-registry.js

@@ -0,0 +1,98 @@
+import { Promise } from '../promise-polyfill';
+import { IDBStorageWrapper, RECORDING_REGISTRY_STORE_NAME } from '../storage/indexed-db';
+import { SessionRecording } from './session-recording';
+import { isRecordingExpired } from './utils';
+
+/**
+ * Module for handling the storage and retrieval of recording metadata as well as any active recordings.
+ * Makes sure that only one tab can be recording at a time.
+ */
+var RecordingRegistry = function (options) {
+    this.idb = new IDBStorageWrapper(RECORDING_REGISTRY_STORE_NAME);
+    this.errorReporter = options.errorReporter;
+    this.mixpanelInstance = options.mixpanelInstance;
+    this.sharedLockStorage = options.sharedLockStorage;
+};
+
+RecordingRegistry.prototype.handleError = function (err) {
+    this.errorReporter('IndexedDB error: ', err);
+};
+
+/**
+ * @param {import('./session-recording').SerializedRecording} serializedRecording
+ */
+RecordingRegistry.prototype.setActiveRecording = function (serializedRecording) {
+    var tabId = serializedRecording['tabId'];
+    if (!tabId) {
+        console.warn('No tab ID is set, cannot persist recording metadata.');
+        return Promise.resolve();
+    }
+
+    return this.idb.init()
+        .then(function () {
+            return this.idb.setItem(tabId, serializedRecording);
+        }.bind(this))
+        .catch(this.handleError.bind(this));
+};
+
+/**
+ * @returns {Promise<import('./session-recording').SerializedRecording>}
+ */
+RecordingRegistry.prototype.getActiveRecording = function () {
+    return this.idb.init()
+        .then(function () {
+            return this.idb.getItem(this.mixpanelInstance.get_tab_id());
+        }.bind(this))
+        .then(function (serializedRecording) {
+            return isRecordingExpired(serializedRecording) ? null : serializedRecording;
+        }.bind(this))
+        .catch(this.handleError.bind(this));
+};
+
+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.
+    return this.getActiveRecording()
+        .then(function (serializedRecording) {
+            if (serializedRecording) {
+                serializedRecording['maxExpires'] = 0;
+                return this.setActiveRecording(serializedRecording);
+            }
+        }.bind(this))
+        .catch(this.handleError.bind(this));
+};
+
+/**
+ * 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 () {
+    return this.idb.init()
+        .then(function() {
+            return this.idb.getAll();
+        }.bind(this))
+        .then(function (serializedRecordings) {
+            // clean up any expired recordings from the registry, non-expired ones may be active in other tabs
+            var unloadPromises = serializedRecordings
+                .filter(function (serializedRecording) {
+                    return isRecordingExpired(serializedRecording);
+                })
+                .map(function (serializedRecording) {
+                    var sessionRecording = SessionRecording.deserialize(serializedRecording, {
+                        mixpanelInstance: this.mixpanelInstance,
+                        sharedLockStorage: this.sharedLockStorage
+                    });
+                    return sessionRecording.unloadPersistedData()
+                        .then(function () {
+                            // expired recording was successfully flushed, we can clean it up from the registry
+                            return this.idb.removeItem(serializedRecording['tabId']);
+                        }.bind(this))
+                        .catch(this.handleError.bind(this));
+                }.bind(this));
+
+            return Promise.all(unloadPromises);
+        }.bind(this))
+        .catch(this.handleError.bind(this));
+};
+
+export { RecordingRegistry };