mixpanel-browser 2.59.0 → 2.61.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mixpanel-browser",
-  "version": "2.59.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/autocapture/index.js

@@ -13,9 +13,17 @@ var PAGEVIEW_OPTION_FULL_URL = 'full-url';
 var PAGEVIEW_OPTION_URL_WITH_PATH_AND_QUERY_STRING = 'url-with-path-and-query-string';
 var PAGEVIEW_OPTION_URL_WITH_PATH = 'url-with-path';
 
+var CONFIG_ALLOW_ELEMENT_CALLBACK = 'allow_element_callback';
+var CONFIG_ALLOW_SELECTORS = 'allow_selectors';
+var CONFIG_ALLOW_URL_REGEXES = 'allow_url_regexes';
+var CONFIG_BLOCK_ATTRS = 'block_attrs';
+var CONFIG_BLOCK_ELEMENT_CALLBACK = 'block_element_callback';
 var CONFIG_BLOCK_SELECTORS = 'block_selectors';
 var CONFIG_BLOCK_URL_REGEXES = 'block_url_regexes';
+var CONFIG_CAPTURE_EXTRA_ATTRS = 'capture_extra_attrs';
 var CONFIG_CAPTURE_TEXT_CONTENT = 'capture_text_content';
+var CONFIG_SCROLL_CAPTURE_ALL = 'scroll_capture_all';
+var CONFIG_SCROLL_CHECKPOINTS = 'scroll_depth_percent_checkpoints';
 var CONFIG_TRACK_CLICK = 'click';
 var CONFIG_TRACK_INPUT = 'input';
 var CONFIG_TRACK_PAGEVIEW = 'pageview';
@@ -23,7 +31,16 @@ var CONFIG_TRACK_SCROLL = 'scroll';
 var CONFIG_TRACK_SUBMIT = 'submit';
 
 var CONFIG_DEFAULTS = {};
+CONFIG_DEFAULTS[CONFIG_ALLOW_SELECTORS] = [];
+CONFIG_DEFAULTS[CONFIG_ALLOW_URL_REGEXES] = [];
+CONFIG_DEFAULTS[CONFIG_BLOCK_ATTRS] = [];
+CONFIG_DEFAULTS[CONFIG_BLOCK_ELEMENT_CALLBACK] = null;
+CONFIG_DEFAULTS[CONFIG_BLOCK_SELECTORS] = [];
+CONFIG_DEFAULTS[CONFIG_BLOCK_URL_REGEXES] = [];
+CONFIG_DEFAULTS[CONFIG_CAPTURE_EXTRA_ATTRS] = [];
 CONFIG_DEFAULTS[CONFIG_CAPTURE_TEXT_CONTENT] = false;
+CONFIG_DEFAULTS[CONFIG_SCROLL_CAPTURE_ALL] = false;
+CONFIG_DEFAULTS[CONFIG_SCROLL_CHECKPOINTS] = [25, 50, 75, 100];
 CONFIG_DEFAULTS[CONFIG_TRACK_CLICK] = true;
 CONFIG_DEFAULTS[CONFIG_TRACK_INPUT] = true;
 CONFIG_DEFAULTS[CONFIG_TRACK_PAGEVIEW] = PAGEVIEW_OPTION_FULL_URL;
@@ -78,13 +95,37 @@ Autocapture.prototype.getConfig = function(key) {
 };
 
 Autocapture.prototype.currentUrlBlocked = function() {
+    var i;
+    var currentUrl = _.info.currentUrl();
+
+    var allowUrlRegexes = this.getConfig(CONFIG_ALLOW_URL_REGEXES) || [];
+    if (allowUrlRegexes.length) {
+        // we're using an allowlist, only track if current URL matches
+        var allowed = false;
+        for (i = 0; i < allowUrlRegexes.length; i++) {
+            var allowRegex = allowUrlRegexes[i];
+            try {
+                if (currentUrl.match(allowRegex)) {
+                    allowed = true;
+                    break;
+                }
+            } catch (err) {
+                logger.critical('Error while checking block URL regex: ' + allowRegex, err);
+                return true;
+            }
+        }
+        if (!allowed) {
+            // wasn't allowed by any regex
+            return true;
+        }
+    }
+
     var blockUrlRegexes = this.getConfig(CONFIG_BLOCK_URL_REGEXES) || [];
     if (!blockUrlRegexes || !blockUrlRegexes.length) {
         return false;
     }
 
-    var currentUrl = _.info.currentUrl();
-    for (var i = 0; i < blockUrlRegexes.length; i++) {
+    for (i = 0; i < blockUrlRegexes.length; i++) {
         try {
             if (currentUrl.match(blockUrlRegexes[i])) {
                 return true;
@@ -112,11 +153,15 @@ Autocapture.prototype.trackDomEvent = function(ev, mpEventName) {
         return;
     }
 
-    var props = getPropsForDOMEvent(
-        ev,
-        this.getConfig(CONFIG_BLOCK_SELECTORS),
-        this.getConfig(CONFIG_CAPTURE_TEXT_CONTENT)
-    );
+    var props = getPropsForDOMEvent(ev, {
+        allowElementCallback: this.getConfig(CONFIG_ALLOW_ELEMENT_CALLBACK),
+        allowSelectors: this.getConfig(CONFIG_ALLOW_SELECTORS),
+        blockAttrs: this.getConfig(CONFIG_BLOCK_ATTRS),
+        blockElementCallback: this.getConfig(CONFIG_BLOCK_ELEMENT_CALLBACK),
+        blockSelectors: this.getConfig(CONFIG_BLOCK_SELECTORS),
+        captureExtraAttrs: this.getConfig(CONFIG_CAPTURE_EXTRA_ATTRS),
+        captureTextContent: this.getConfig(CONFIG_CAPTURE_TEXT_CONTENT)
+    });
     if (props) {
         _.extend(props, DEFAULT_PROPS);
         this.mp.track(mpEventName, props);
@@ -201,13 +246,14 @@ Autocapture.prototype.initPageviewTracking = function() {
 
         var currentUrl = _.info.currentUrl();
         var shouldTrack = false;
+        var didPathChange = currentUrl.split('#')[0].split('?')[0] !== previousTrackedUrl.split('#')[0].split('?')[0];
         var trackPageviewOption = this.pageviewTrackingConfig();
         if (trackPageviewOption === PAGEVIEW_OPTION_FULL_URL) {
             shouldTrack = currentUrl !== previousTrackedUrl;
         } else if (trackPageviewOption === PAGEVIEW_OPTION_URL_WITH_PATH_AND_QUERY_STRING) {
             shouldTrack = currentUrl.split('#')[0] !== previousTrackedUrl.split('#')[0];
         } else if (trackPageviewOption === PAGEVIEW_OPTION_URL_WITH_PATH) {
-            shouldTrack = currentUrl.split('#')[0].split('?')[0] !== previousTrackedUrl.split('#')[0].split('?')[0];
+            shouldTrack = didPathChange;
         }
 
         if (shouldTrack) {
@@ -215,6 +261,10 @@ Autocapture.prototype.initPageviewTracking = function() {
             if (tracked) {
                 previousTrackedUrl = currentUrl;
             }
+            if (didPathChange) {
+                this.lastScrollCheckpoint = 0;
+                logger.log('Path change: re-initializing scroll depth checkpoints');
+            }
         }
     }.bind(this)));
 };
@@ -226,6 +276,7 @@ Autocapture.prototype.initScrollTracking = function() {
         return;
     }
     logger.log('Initializing scroll tracking');
+    this.lastScrollCheckpoint = 0;
 
     this.listenerScroll = window.addEventListener(EV_SCROLLEND, safewrap(function() {
         if (!this.getConfig(CONFIG_TRACK_SCROLL)) {
@@ -235,6 +286,11 @@ Autocapture.prototype.initScrollTracking = function() {
             return;
         }
 
+        var shouldTrack = this.getConfig(CONFIG_SCROLL_CAPTURE_ALL);
+        var scrollCheckpoints = (this.getConfig(CONFIG_SCROLL_CHECKPOINTS) || [])
+            .slice()
+            .sort(function(a, b) { return a - b; });
+
         var scrollTop = window.scrollY;
         var props = _.extend({'$scroll_top': scrollTop}, DEFAULT_PROPS);
         try {
@@ -242,10 +298,25 @@ Autocapture.prototype.initScrollTracking = function() {
             var scrollPercentage = Math.round((scrollTop / (scrollHeight - window.innerHeight)) * 100);
             props['$scroll_height'] = scrollHeight;
             props['$scroll_percentage'] = scrollPercentage;
+            if (scrollPercentage > this.lastScrollCheckpoint) {
+                for (var i = 0; i < scrollCheckpoints.length; i++) {
+                    var checkpoint = scrollCheckpoints[i];
+                    if (
+                        scrollPercentage >= checkpoint &&
+                        this.lastScrollCheckpoint < checkpoint
+                    ) {
+                        props['$scroll_checkpoint'] = checkpoint;
+                        this.lastScrollCheckpoint = checkpoint;
+                        shouldTrack = true;
+                    }
+                }
+            }
         } catch (err) {
             logger.critical('Error while calculating scroll percentage', err);
         }
-        this.mp.track(MP_EV_SCROLL, props);
+        if (shouldTrack) {
+            this.mp.track(MP_EV_SCROLL, props);
+        }
     }.bind(this)));
 };
 

package/src/autocapture/utils.js

@@ -70,7 +70,7 @@ function getPreviousElementSibling(el) {
     }
 }
 
-function getPropertiesFromElement(el) {
+function getPropertiesFromElement(el, ev, blockAttrsSet, extraAttrs, allowElementCallback, allowSelectors) {
     var props = {
         '$classes': getClassName(el).split(' '),
         '$tag_name': el.tagName.toLowerCase()
@@ -80,9 +80,9 @@ function getPropertiesFromElement(el) {
         props['$id'] = elId;
     }
 
-    if (shouldTrackElement(el)) {
-        _.each(TRACKED_ATTRS, function(attr) {
-            if (el.hasAttribute(attr)) {
+    if (shouldTrackElementDetails(el, ev, allowElementCallback, allowSelectors)) {
+        _.each(TRACKED_ATTRS.concat(extraAttrs), function(attr) {
+            if (el.hasAttribute(attr) && !blockAttrsSet[attr]) {
                 var attrVal = el.getAttribute(attr);
                 if (shouldTrackValue(attrVal)) {
                     props['$attr-' + attr] = attrVal;
@@ -106,8 +106,21 @@ function getPropertiesFromElement(el) {
     return props;
 }
 
-function getPropsForDOMEvent(ev, blockSelectors, captureTextContent) {
-    blockSelectors = blockSelectors || [];
+function getPropsForDOMEvent(ev, config) {
+    var allowElementCallback = config.allowElementCallback;
+    var allowSelectors = config.allowSelectors || [];
+    var blockAttrs = config.blockAttrs || [];
+    var blockElementCallback = config.blockElementCallback;
+    var blockSelectors = config.blockSelectors || [];
+    var captureTextContent = config.captureTextContent || false;
+    var captureExtraAttrs = config.captureExtraAttrs || [];
+
+    // convert array to set every time, as the config may have changed
+    var blockAttrsSet = {};
+    _.each(blockAttrs, function(attr) {
+        blockAttrsSet[attr] = true;
+    });
+
     var props = null;
 
     var target = typeof ev.target === 'undefined' ? ev.srcElement : ev.target;
@@ -115,7 +128,11 @@ function getPropsForDOMEvent(ev, blockSelectors, captureTextContent) {
         target = target.parentNode;
     }
 
-    if (shouldTrackDomEvent(target, ev)) {
+    if (
+        shouldTrackDomEvent(target, ev) &&
+        isElementAllowed(target, ev, allowElementCallback, allowSelectors) &&
+        !isElementBlocked(target, ev, blockElementCallback, blockSelectors)
+    ) {
         var targetElementList = [target];
         var curEl = target;
         while (curEl.parentNode && !isTag(curEl, 'body')) {
@@ -126,37 +143,20 @@ function getPropsForDOMEvent(ev, blockSelectors, captureTextContent) {
         var elementsJson = [];
         var href, explicitNoTrack = false;
         _.each(targetElementList, function(el) {
-            var shouldTrackEl = shouldTrackElement(el);
+            var shouldTrackDetails = shouldTrackElementDetails(el, ev, allowElementCallback, allowSelectors);
 
             // if the element or a parent element is an anchor tag
             // include the href as a property
-            if (el.tagName.toLowerCase() === 'a') {
+            if (!blockAttrsSet['href'] && el.tagName.toLowerCase() === 'a') {
                 href = el.getAttribute('href');
-                href = shouldTrackEl && shouldTrackValue(href) && href;
+                href = shouldTrackDetails && shouldTrackValue(href) && href;
             }
 
-            // allow users to programmatically prevent tracking of elements by adding classes such as 'mp-no-track'
-            var classes = getClasses(el);
-            _.each(OPT_OUT_CLASSES, function(cls) {
-                if (classes[cls]) {
-                    explicitNoTrack = true;
-                }
-            });
-
-            if (!explicitNoTrack) {
-                // programmatically prevent tracking of elements that match CSS selectors
-                _.each(blockSelectors, function(sel) {
-                    try {
-                        if (el['matches'](sel)) {
-                            explicitNoTrack = true;
-                        }
-                    } catch (err) {
-                        logger.critical('Error while checking selector: ' + sel, err);
-                    }
-                });
+            if (isElementBlocked(el, ev, blockElementCallback, blockSelectors)) {
+                explicitNoTrack = true;
             }
 
-            elementsJson.push(getPropertiesFromElement(el));
+            elementsJson.push(getPropertiesFromElement(el, ev, blockAttrsSet, captureExtraAttrs, allowElementCallback, allowSelectors));
         }, this);
 
         if (!explicitNoTrack) {
@@ -170,9 +170,17 @@ function getPropsForDOMEvent(ev, blockSelectors, captureTextContent) {
                 '$viewportHeight': Math.max(docElement['clientHeight'], window['innerHeight'] || 0),
                 '$viewportWidth': Math.max(docElement['clientWidth'], window['innerWidth'] || 0)
             };
+            _.each(captureExtraAttrs, function(attr) {
+                if (!blockAttrsSet[attr] && target.hasAttribute(attr)) {
+                    var attrVal = target.getAttribute(attr);
+                    if (shouldTrackValue(attrVal)) {
+                        props['$el_attr__' + attr] = attrVal;
+                    }
+                }
+            });
 
             if (captureTextContent) {
-                elementText = getSafeText(target);
+                elementText = getSafeText(target, ev, allowElementCallback, allowSelectors);
                 if (elementText && elementText.length) {
                     props['$el_text'] = elementText;
                 }
@@ -188,14 +196,22 @@ function getPropsForDOMEvent(ev, blockSelectors, captureTextContent) {
             }
             // prioritize text content from "real" click target if different from original target
             if (captureTextContent) {
-                var elementText = getSafeText(target);
+                var elementText = getSafeText(target, ev, allowElementCallback, allowSelectors);
                 if (elementText && elementText.length) {
                     props['$el_text'] = elementText;
                 }
             }
 
             if (target) {
-                var targetProps = getPropertiesFromElement(target);
+                // target may have been recalculated; check allowlists and blocklists again
+                if (
+                    !isElementAllowed(target, ev, allowElementCallback, allowSelectors) ||
+                    isElementBlocked(target, ev, blockElementCallback, blockSelectors)
+                ) {
+                    return null;
+                }
+
+                var targetProps = getPropertiesFromElement(target, ev, blockAttrsSet, captureExtraAttrs, allowElementCallback, allowSelectors);
                 props['$target'] = targetProps;
                 // pull up more props onto main event props
                 props['$el_classes'] = targetProps['$classes'];
@@ -211,19 +227,20 @@ function getPropsForDOMEvent(ev, blockSelectors, captureTextContent) {
 }
 
 
-/*
+/**
  * Get the direct text content of an element, protecting against sensitive data collection.
  * Concats textContent of each of the element's text node children; this avoids potential
  * collection of sensitive data that could happen if we used element.textContent and the
  * element had sensitive child elements, since element.textContent includes child content.
  * Scrubs values that look like they could be sensitive (i.e. cc or ssn number).
  * @param {Element} el - element to get the text of
+ * @param {Array<string>} allowSelectors - CSS selectors for elements that should be included
  * @returns {string} the element's direct text content
  */
-function getSafeText(el) {
+function getSafeText(el, ev, allowElementCallback, allowSelectors) {
     var elText = '';
 
-    if (shouldTrackElement(el) && el.childNodes && el.childNodes.length) {
+    if (shouldTrackElementDetails(el, ev, allowElementCallback, allowSelectors) && el.childNodes && el.childNodes.length) {
         _.each(el.childNodes, function(child) {
             if (isTextNode(child) && child.textContent) {
                 elText += _.trim(child.textContent)
@@ -262,6 +279,75 @@ function guessRealClickTarget(ev) {
     return target;
 }
 
+function isElementAllowed(el, ev, allowElementCallback, allowSelectors) {
+    if (allowElementCallback) {
+        try {
+            if (!allowElementCallback(el, ev)) {
+                return false;
+            }
+        } catch (err) {
+            logger.critical('Error while checking element in allowElementCallback', err);
+            return false;
+        }
+    }
+
+    if (!allowSelectors.length) {
+        // no allowlist; all elements are fair game
+        return true;
+    }
+
+    for (var i = 0; i < allowSelectors.length; i++) {
+        var sel = allowSelectors[i];
+        try {
+            if (el['matches'](sel)) {
+                return true;
+            }
+        } catch (err) {
+            logger.critical('Error while checking selector: ' + sel, err);
+        }
+    }
+    return false;
+}
+
+function isElementBlocked(el, ev, blockElementCallback, blockSelectors) {
+    var i;
+
+    if (blockElementCallback) {
+        try {
+            if (blockElementCallback(el, ev)) {
+                return true;
+            }
+        } catch (err) {
+            logger.critical('Error while checking element in blockElementCallback', err);
+            return true;
+        }
+    }
+
+    if (blockSelectors && blockSelectors.length) {
+        // programmatically prevent tracking of elements that match CSS selectors
+        for (i = 0; i < blockSelectors.length; i++) {
+            var sel = blockSelectors[i];
+            try {
+                if (el['matches'](sel)) {
+                    return true;
+                }
+            } catch (err) {
+                logger.critical('Error while checking selector: ' + sel, err);
+            }
+        }
+    }
+
+    // allow users to programmatically prevent tracking of elements by adding default classes such as 'mp-no-track'
+    var classes = getClasses(el);
+    for (i = 0; i < OPT_OUT_CLASSES.length; i++) {
+        if (classes[OPT_OUT_CLASSES[i]]) {
+            return true;
+        }
+    }
+
+    return false;
+}
+
 /*
  * Check whether a DOM node has nodeType Node.ELEMENT_NODE
  * @param {Node} node - node to check
@@ -336,11 +422,16 @@ function shouldTrackDomEvent(el, ev) {
  * Check whether a DOM element should be "tracked" or if it may contain sensitive data
  * using a variety of heuristics.
  * @param {Element} el - element to check
+ * @param {Array<string>} allowSelectors - CSS selectors for elements that should be included
  * @returns {boolean} whether the element should be tracked
  */
-function shouldTrackElement(el) {
+function shouldTrackElementDetails(el, ev, allowElementCallback, allowSelectors) {
     var i;
 
+    if (!isElementAllowed(el, ev, allowElementCallback, allowSelectors)) {
+        return false;
+    }
+
     for (var curEl = el; curEl.parentNode && !isTag(curEl, 'body'); curEl = curEl.parentNode) {
         var classes = getClasses(curEl);
         for (i = 0; i < SENSITIVE_DATA_CLASSES.length; i++) {
@@ -428,7 +519,7 @@ export {
     getSafeText,
     logger,
     minDOMApisSupported,
-    shouldTrackDomEvent, shouldTrackElement, shouldTrackValue,
+    shouldTrackDomEvent, shouldTrackElementDetails, shouldTrackValue,
     EV_CHANGE, EV_CLICK, EV_HASHCHANGE, EV_MP_LOCATION_CHANGE, EV_POPSTATE,
     EV_SCROLLEND, EV_SUBMIT
 };

package/src/config.js

@@ -1,6 +1,6 @@
 var Config = {
     DEBUG: false,
-    LIB_VERSION: '2.59.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;