mixpanel-browser 2.59.0 → 2.61.0

package/dist/mixpanel.globals.js

@@ -3,7 +3,7 @@
 
     var Config = {
         DEBUG: false,
-        LIB_VERSION: '2.59.0'
+        LIB_VERSION: '2.61.0'
     };
 
     // since es6 imports are static and we run unit tests from the console, window won't be defined when importing this file
@@ -1467,15 +1467,9 @@
         }
     };
 
-    var _localStorageSupported = null;
-    var localStorageSupported = function(storage, forceCheck) {
-        if (_localStorageSupported !== null && !forceCheck) {
-            return _localStorageSupported;
-        }
-
+    var _testStorageSupported = function (storage) {
         var supported = true;
         try {
-            storage = storage || win.localStorage;
             var key = '__mplss_' + cheap_guid(8),
                 val = 'xyz';
             storage.setItem(key, val);
@@ -1486,59 +1480,74 @@
         } catch (err) {
             supported = false;
         }
-
-        _localStorageSupported = supported;
         return supported;
     };
 
-    // _.localStorage
-    _.localStorage = {
-        is_supported: function(force_check) {
-            var supported = localStorageSupported(null, force_check);
-            if (!supported) {
-                console.error('localStorage unsupported; falling back to cookie store');
-            }
-            return supported;
-        },
-
-        error: function(msg) {
-            console.error('localStorage error: ' + msg);
-        },
+    var _localStorageSupported = null;
+    var localStorageSupported = function(storage, forceCheck) {
+        if (_localStorageSupported !== null && !forceCheck) {
+            return _localStorageSupported;
+        }
+        return _localStorageSupported = _testStorageSupported(storage || win.localStorage);
+    };
 
-        get: function(name) {
-            try {
-                return win.localStorage.getItem(name);
-            } catch (err) {
-                _.localStorage.error(err);
-            }
-            return null;
-        },
+    var _sessionStorageSupported = null;
+    var sessionStorageSupported = function(storage, forceCheck) {
+        if (_sessionStorageSupported !== null && !forceCheck) {
+            return _sessionStorageSupported;
+        }
+        return _sessionStorageSupported = _testStorageSupported(storage || win.sessionStorage);
+    };
 
-        parse: function(name) {
-            try {
-                return _.JSONDecode(_.localStorage.get(name)) || {};
-            } catch (err) {
-                // noop
-            }
-            return null;
-        },
+    function _storageWrapper(storage, name, is_supported_fn) {
+        var log_error = function(msg) {
+            console.error(name + ' error: ' + msg);
+        };
 
-        set: function(name, value) {
-            try {
-                win.localStorage.setItem(name, value);
-            } catch (err) {
-                _.localStorage.error(err);
+        return {
+            is_supported: function(forceCheck) {
+                var supported = is_supported_fn(storage, forceCheck);
+                if (!supported) {
+                    console.error(name + ' unsupported');
+                }
+                return supported;
+            },
+            error: log_error,
+            get: function(key) {
+                try {
+                    return storage.getItem(key);
+                } catch (err) {
+                    log_error(err);
+                }
+                return null;
+            },
+            parse: function(key) {
+                try {
+                    return _.JSONDecode(storage.getItem(key)) || {};
+                } catch (err) {
+                    // noop
+                }
+                return null;
+            },
+            set: function(key, value) {
+                try {
+                    storage.setItem(key, value);
+                } catch (err) {
+                    log_error(err);
+                }
+            },
+            remove: function(key) {
+                try {
+                    storage.removeItem(key);
+                } catch (err) {
+                    log_error(err);
+                }
             }
-        },
+        };
+    }
 
-        remove: function(name) {
-            try {
-                win.localStorage.removeItem(name);
-            } catch (err) {
-                _.localStorage.error(err);
-            }
-        }
-    };
+    _.localStorage = _storageWrapper(win.localStorage, 'localStorage', localStorageSupported);
+    _.sessionStorage = _storageWrapper(win.sessionStorage, 'sessionStorage', sessionStorageSupported);
 
     _.register_event = (function() {
         // written by Dean Edwards, 2005
@@ -2065,6 +2074,31 @@
         }
     };
 
+    /**
+     * Returns a throttled function that will only run at most every `waitMs` and returns a promise that resolves with the next invocation.
+     * Throttled calls will build up a batch of args and invoke the callback with all args since the last invocation.
+     */
+    var batchedThrottle = function (fn, waitMs) {
+        var timeoutPromise = null;
+        var throttledItems = [];
+        return function (item) {
+            var self = this;
+            throttledItems.push(item);
+
+            if (!timeoutPromise) {
+                timeoutPromise = new PromisePolyfill(function (resolve) {
+                    setTimeout(function () {
+                        var returnValue = fn.apply(self, [throttledItems]);
+                        timeoutPromise = null;
+                        throttledItems = [];
+                        resolve(returnValue);
+                    }, waitMs);
+                });
+            }
+            return timeoutPromise;
+        };
+    };
+
     var cheap_guid = function(maxlen) {
         var guid = Math.random().toString(36).substring(2, 10) + Math.random().toString(36).substring(2, 10);
         return maxlen ? guid.substring(0, maxlen) : guid;
@@ -2107,6 +2141,8 @@
         return _.isUndefined(onLine) || onLine;
     };
 
+    var NOOP_FUNC = function () {};
+
     var JSONStringify = null, JSONParse = null;
     if (typeof JSON !== 'undefined') {
         JSONStringify = JSON.stringify;
@@ -2115,20 +2151,29 @@
     JSONStringify = JSONStringify || _.JSONEncode;
     JSONParse = JSONParse || _.JSONDecode;
 
-    // EXPORTS (for closure compiler)
-    _['toArray']                = _.toArray;
-    _['isObject']               = _.isObject;
-    _['JSONEncode']             = _.JSONEncode;
-    _['JSONDecode']             = _.JSONDecode;
-    _['isBlockedUA']            = _.isBlockedUA;
-    _['isEmptyObject']          = _.isEmptyObject;
+    // UNMINIFIED EXPORTS (for closure compiler)
     _['info']                   = _.info;
-    _['info']['device']         = _.info.device;
     _['info']['browser']        = _.info.browser;
     _['info']['browserVersion'] = _.info.browserVersion;
+    _['info']['device']         = _.info.device;
     _['info']['properties']     = _.info.properties;
+    _['isBlockedUA']            = _.isBlockedUA;
+    _['isEmptyObject']          = _.isEmptyObject;
+    _['isObject']               = _.isObject;
+    _['JSONDecode']             = _.JSONDecode;
+    _['JSONEncode']             = _.JSONEncode;
+    _['toArray']                = _.toArray;
     _['NPO']                    = NpoPromise;
 
+    /**
+     * @param {import('./session-recording').SerializedRecording} serializedRecording
+     * @returns {boolean}
+     */
+    var isRecordingExpired = function(serializedRecording) {
+        var now = Date.now();
+        return !serializedRecording || now > serializedRecording['maxExpires'] || now > serializedRecording['idleExpires'];
+    };
+
     // stateless utils
 
     var EV_CHANGE = 'change';
@@ -2197,7 +2242,7 @@
         }
     }
 
-    function getPropertiesFromElement(el) {
+    function getPropertiesFromElement(el, ev, blockAttrsSet, extraAttrs, allowElementCallback, allowSelectors) {
         var props = {
             '$classes': getClassName(el).split(' '),
             '$tag_name': el.tagName.toLowerCase()
@@ -2207,9 +2252,9 @@
             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;
@@ -2233,8 +2278,21 @@
         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;
@@ -2242,7 +2300,11 @@
             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')) {
@@ -2253,37 +2315,20 @@
             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$3.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) {
@@ -2297,9 +2342,17 @@
                     '$viewportHeight': Math.max(docElement['clientHeight'], win['innerHeight'] || 0),
                     '$viewportWidth': Math.max(docElement['clientWidth'], win['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;
                     }
@@ -2315,14 +2368,22 @@
                 }
                 // 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'];
@@ -2338,19 +2399,20 @@
     }
 
 
-    /*
+    /**
      * 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)
@@ -2389,6 +2451,75 @@
         return target;
     }
 
+    function isElementAllowed(el, ev, allowElementCallback, allowSelectors) {
+        if (allowElementCallback) {
+            try {
+                if (!allowElementCallback(el, ev)) {
+                    return false;
+                }
+            } catch (err) {
+                logger$3.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$3.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$3.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$3.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
@@ -2463,11 +2594,16 @@
      * 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++) {
@@ -2557,9 +2693,17 @@
     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';
@@ -2567,7 +2711,16 @@
     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;
@@ -2622,13 +2775,37 @@
     };
 
     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$3.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;
@@ -2656,11 +2833,15 @@
             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);
@@ -2745,13 +2926,14 @@
 
             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) {
@@ -2759,6 +2941,10 @@
                 if (tracked) {
                     previousTrackedUrl = currentUrl;
                 }
+                if (didPathChange) {
+                    this.lastScrollCheckpoint = 0;
+                    logger$3.log('Path change: re-initializing scroll depth checkpoints');
+                }
             }
         }.bind(this)));
     };
@@ -2770,6 +2956,7 @@
             return;
         }
         logger$3.log('Initializing scroll tracking');
+        this.lastScrollCheckpoint = 0;
 
         this.listenerScroll = win.addEventListener(EV_SCROLLEND, safewrap(function() {
             if (!this.getConfig(CONFIG_TRACK_SCROLL)) {
@@ -2779,6 +2966,11 @@
                 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 = win.scrollY;
             var props = _.extend({'$scroll_top': scrollTop}, DEFAULT_PROPS);
             try {
@@ -2786,10 +2978,25 @@
                 var scrollPercentage = Math.round((scrollTop / (scrollHeight - win.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$3.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)));
     };
 
@@ -2989,7 +3196,7 @@
         options = options || {};
 
         this.storageKey = key;
-        this.storage = options.storage || window.localStorage;
+        this.storage = options.storage || win.localStorage;
         this.pollIntervalMS = options.pollIntervalMS || 100;
         this.timeoutMS = options.timeoutMS || 2000;
 
@@ -3004,7 +3211,6 @@
         return new Promise(_.bind(function (resolve, reject) {
             var i = pid || (new Date().getTime() + '|' + Math.random());
             var startTime = new Date().getTime();
-
             var key = this.storageKey;
             var pollIntervalMS = this.pollIntervalMS;
             var timeoutMS = this.timeoutMS;
@@ -3115,11 +3321,7 @@
     };
 
     /**
-     * @typedef {import('./wrapper').StorageWrapper}
-     */
-
-    /**
-     * @type {StorageWrapper}
+     * @type {import('./wrapper').StorageWrapper}
      */
     var LocalStorageWrapper = function (storageOverride) {
         this.storage = storageOverride || localStorage;
@@ -3132,7 +3334,7 @@
     LocalStorageWrapper.prototype.setItem = function (key, value) {
         return new PromisePolyfill(_.bind(function (resolve, reject) {
             try {
-                this.storage.setItem(key, value);
+                this.storage.setItem(key, JSONStringify(value));
             } catch (e) {
                 reject(e);
             }
@@ -3144,7 +3346,7 @@
         return new PromisePolyfill(_.bind(function (resolve, reject) {
             var item;
             try {
-                item = this.storage.getItem(key);
+                item = JSONParse(this.storage.getItem(key));
             } catch (e) {
                 reject(e);
             }
@@ -3187,8 +3389,10 @@
         this.usePersistence = options.usePersistence;
         if (this.usePersistence) {
             this.queueStorage = options.queueStorage || new LocalStorageWrapper();
-            this.lock = new SharedLock(storageKey, { storage: options.sharedLockStorage || window.localStorage });
-            this.queueStorage.init();
+            this.lock = new SharedLock(storageKey, {
+                storage: options.sharedLockStorage || win.localStorage,
+                timeoutMS: options.sharedLockTimeoutMS,
+            });
         }
         this.reportError = options.errorReporter || _.bind(logger$1.error, logger$1);
 
@@ -3196,6 +3400,14 @@
 
         this.memQueue = [];
         this.initialized = false;
+
+        if (options.enqueueThrottleMs) {
+            this.enqueuePersisted = batchedThrottle(_.bind(this._enqueuePersisted, this), options.enqueueThrottleMs);
+        } else {
+            this.enqueuePersisted = _.bind(function (queueEntry) {
+                return this._enqueuePersisted([queueEntry]);
+            }, this);
+        }
     };
 
     RequestQueue.prototype.ensureInit = function () {
@@ -3238,36 +3450,39 @@
             this.memQueue.push(queueEntry);
             return PromisePolyfill.resolve(true);
         } else {
+            return this.enqueuePersisted(queueEntry);
+        }
+    };
 
-            var enqueueItem = _.bind(function () {
-                return this.ensureInit()
-                    .then(_.bind(function () {
-                        return this.readFromStorage();
-                    }, this))
-                    .then(_.bind(function (storedQueue) {
-                        storedQueue.push(queueEntry);
-                        return this.saveToStorage(storedQueue);
-                    }, this))
-                    .then(_.bind(function (succeeded) {
-                        // only add to in-memory queue when storage succeeds
-                        if (succeeded) {
-                            this.memQueue.push(queueEntry);
-                        }
-                        return succeeded;
-                    }, this))
-                    .catch(_.bind(function (err) {
-                        this.reportError('Error enqueueing item', err, item);
-                        return false;
-                    }, this));
-            }, this);
+    RequestQueue.prototype._enqueuePersisted = function (queueEntries) {
+        var enqueueItem = _.bind(function () {
+            return this.ensureInit()
+                .then(_.bind(function () {
+                    return this.readFromStorage();
+                }, this))
+                .then(_.bind(function (storedQueue) {
+                    return this.saveToStorage(storedQueue.concat(queueEntries));
+                }, this))
+                .then(_.bind(function (succeeded) {
+                    // only add to in-memory queue when storage succeeds
+                    if (succeeded) {
+                        this.memQueue = this.memQueue.concat(queueEntries);
+                    }
 
-            return this.lock
-                .withLock(enqueueItem, this.pid)
+                    return succeeded;
+                }, this))
                 .catch(_.bind(function (err) {
-                    this.reportError('Error acquiring storage lock', err);
+                    this.reportError('Error enqueueing items', err, queueEntries);
                     return false;
                 }, this));
-        }
+        }, this);
+
+        return this.lock
+            .withLock(enqueueItem, this.pid)
+            .catch(_.bind(function (err) {
+                this.reportError('Error acquiring storage lock', err);
+                return false;
+            }, this));
     };
 
     /**
@@ -3288,7 +3503,7 @@
                 }, this))
                 .then(_.bind(function (storedQueue) {
                     if (storedQueue.length) {
-                    // item IDs already in batch; don't duplicate out of storage
+                        // item IDs already in batch; don't duplicate out of storage
                         var idsInBatch = {}; // poor man's Set
                         _.each(batch, function (item) {
                             idsInBatch[item['id']] = true;
@@ -3375,7 +3590,7 @@
                 .withLock(removeFromStorage, this.pid)
                 .catch(_.bind(function (err) {
                     this.reportError('Error acquiring storage lock', err);
-                    if (!localStorageSupported(this.queueStorage.storage, true)) {
+                    if (!localStorageSupported(this.lock.storage, true)) {
                         // Looks like localStorage writes have stopped working sometime after
                         // initialization (probably full), and so nobody can acquire locks
                         // anymore. Consider it temporarily safe to remove items without the
@@ -3463,7 +3678,6 @@
             }, this))
             .then(_.bind(function (storageEntry) {
                 if (storageEntry) {
-                    storageEntry = JSONParse(storageEntry);
                     if (!_.isArray(storageEntry)) {
                         this.reportError('Invalid storage entry:', storageEntry);
                         storageEntry = null;
@@ -3481,16 +3695,9 @@
      * Serialize the given items array to localStorage.
      */
     RequestQueue.prototype.saveToStorage = function (queue) {
-        try {
-            var serialized = JSONStringify(queue);
-        } catch (err) {
-            this.reportError('Error serializing queue', err);
-            return PromisePolyfill.resolve(false);
-        }
-
         return this.ensureInit()
             .then(_.bind(function () {
-                return this.queueStorage.setItem(this.storageKey, serialized);
+                return this.queueStorage.setItem(this.storageKey, queue);
             }, this))
             .then(function () {
                 return true;
@@ -3534,7 +3741,9 @@
             errorReporter: _.bind(this.reportError, this),
             queueStorage: options.queueStorage,
             sharedLockStorage: options.sharedLockStorage,
-            usePersistence: options.usePersistence
+            sharedLockTimeoutMS: options.sharedLockTimeoutMS,
+            usePersistence: options.usePersistence,
+            enqueueThrottleMs: options.enqueueThrottleMs
         });
 
         this.libConfig = options.libConfig;
@@ -3556,6 +3765,8 @@
         // as long as the queue is not empty. This is useful for high-frequency events like Session Replay where we might end up
         // in a request loop and get ratelimited by the server.
         this.flushOnlyOnInterval = options.flushOnlyOnInterval || false;
+
+        this._flushPromise = null;
     };
 
     /**
@@ -3615,7 +3826,7 @@
         if (!this.stopped) { // don't schedule anymore if batching has been stopped
             this.timeoutID = setTimeout(_.bind(function() {
                 if (!this.stopped) {
-                    this.flush();
+                    this._flushPromise = this.flush();
                 }
             }, this), this.flushInterval);
         }
@@ -5241,8 +5452,12 @@
                     if (!(k in union_q)) {
                         union_q[k] = [];
                     }
-                    // We may send duplicates, the server will dedup them.
-                    union_q[k] = union_q[k].concat(v);
+                    // Prevent duplicate values
+                    _.each(v, function(item) {
+                        if (!_.include(union_q[k], item)) {
+                            union_q[k].push(item);
+                        }
+                    });
                 }
             });
             this._pop_from_people_queue(UNSET_ACTION, q_data);
@@ -5327,6 +5542,129 @@
         return timestamp;
     };
 
+    var MIXPANEL_DB_NAME = 'mixpanelBrowserDb';
+
+    var RECORDING_EVENTS_STORE_NAME = 'mixpanelRecordingEvents';
+    var RECORDING_REGISTRY_STORE_NAME = 'mixpanelRecordingRegistry';
+
+    // note: increment the version number when adding new object stores
+    var DB_VERSION = 1;
+    var OBJECT_STORES = [RECORDING_EVENTS_STORE_NAME, RECORDING_REGISTRY_STORE_NAME];
+
+    /**
+     * @type {import('./wrapper').StorageWrapper}
+     */
+    var IDBStorageWrapper = function (storeName) {
+        /**
+         * @type {Promise<IDBDatabase>|null}
+         */
+        this.dbPromise = null;
+        this.storeName = storeName;
+    };
+
+    IDBStorageWrapper.prototype._openDb = function () {
+        return new PromisePolyfill(function (resolve, reject) {
+            var openRequest = win.indexedDB.open(MIXPANEL_DB_NAME, DB_VERSION);
+            openRequest['onerror'] = function () {
+                reject(openRequest.error);
+            };
+
+            openRequest['onsuccess'] = function () {
+                resolve(openRequest.result);
+            };
+
+            openRequest['onupgradeneeded'] = function (ev) {
+                var db = ev.target.result;
+
+                OBJECT_STORES.forEach(function (storeName) {
+                    db.createObjectStore(storeName);
+                });
+            };
+        });
+    };
+
+    IDBStorageWrapper.prototype.init = function () {
+        if (!win.indexedDB) {
+            return PromisePolyfill.reject('indexedDB is not supported in this browser');
+        }
+
+        if (!this.dbPromise) {
+            this.dbPromise = this._openDb();
+        }
+
+        return this.dbPromise
+            .then(function (dbOrError) {
+                if (dbOrError instanceof win['IDBDatabase']) {
+                    return PromisePolyfill.resolve();
+                } else {
+                    return PromisePolyfill.reject(dbOrError);
+                }
+            });
+    };
+
+    /**
+     * @param {IDBTransactionMode} mode
+     * @param {function(IDBObjectStore): void} storeCb
+     */
+    IDBStorageWrapper.prototype.makeTransaction = function (mode, storeCb) {
+        var storeName = this.storeName;
+        var doTransaction = function (db) {
+            return new PromisePolyfill(function (resolve, reject) {
+                var transaction = db.transaction(storeName, mode);
+                transaction.oncomplete = function () {
+                    resolve(transaction);
+                };
+                transaction.onabort = transaction.onerror = function () {
+                    reject(transaction.error);
+                };
+
+                storeCb(transaction.objectStore(storeName));
+            });
+        };
+
+        return this.dbPromise
+            .then(doTransaction)
+            .catch(function (err) {
+                if (err['name'] === 'InvalidStateError') {
+                    // try reopening the DB if the connection is closed
+                    this.dbPromise = this._openDb();
+                    return this.dbPromise.then(doTransaction);
+                } else {
+                    return PromisePolyfill.reject(err);
+                }
+            }.bind(this));
+    };
+
+    IDBStorageWrapper.prototype.setItem = function (key, value) {
+        return this.makeTransaction('readwrite', function (objectStore) {
+            objectStore.put(value, key);
+        });
+    };
+
+    IDBStorageWrapper.prototype.getItem = function (key) {
+        var req;
+        return this.makeTransaction('readonly', function (objectStore) {
+            req = objectStore.get(key);
+        }).then(function () {
+            return req.result;
+        });
+    };
+
+    IDBStorageWrapper.prototype.removeItem = function (key) {
+        return this.makeTransaction('readwrite', function (objectStore) {
+            objectStore.delete(key);
+        });
+    };
+
+    IDBStorageWrapper.prototype.getAll = function () {
+        var req;
+        return this.makeTransaction('readonly', function (objectStore) {
+            req = objectStore.getAll();
+        }).then(function () {
+            return req.result;
+        });
+    };
+
     /* eslint camelcase: "off" */
 
     /*
@@ -5341,11 +5679,6 @@
      * Released under the MIT License.
      */
 
-    // ==ClosureCompiler==
-    // @compilation_level ADVANCED_OPTIMIZATIONS
-    // @output_file_name mixpanel-2.8.min.js
-    // ==/ClosureCompiler==
-
     /*
     SIMPLE STYLE GUIDE:
 
@@ -5368,7 +5701,6 @@
     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';
@@ -5677,34 +6009,125 @@
         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.
+                win.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 (!win['MutationObserver']) {
             console.critical('Browser does not support MutationObserver; skipping session recording');
             return;
         }
 
-        var handleLoadedRecorder = _.bind(function() {
-            this._recorder = this._recorder || new win['__mp_recorder'](this);
-            this._recorder['startRecording']();
+        var loadRecorder = _.bind(function(startNewIfInactive) {
+            var handleLoadedRecorder = _.bind(function() {
+                this._recorder = this._recorder || new win['__mp_recorder'](this);
+                this._recorder['resumeRecording'](startNewIfInactive);
+            }, this);
+
+            if (_.isUndefined(win['__mp_recorder'])) {
+                load_extra_bundle(this.get_config('recorder_src'), handleLoadedRecorder);
+            } else {
+                handleLoadedRecorder();
+            }
         }, this);
 
-        if (_.isUndefined(win['__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']();
         }
     };
 
@@ -5739,6 +6162,11 @@
         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() {
@@ -6078,7 +6506,8 @@
                             return this._run_hook('before_send_' + attrs.type, item);
                         }, this),
                         stopAllBatchingFunc: _.bind(this.stop_batch_senders, this),
-                        usePersistence: true
+                        usePersistence: true,
+                        enqueueThrottleMs: 10,
                     }
                 );
             }, this);
@@ -7179,6 +7608,7 @@
 
         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
@@ -7419,10 +7849,16 @@
     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;