mixpanel-browser 2.59.0 → 2.61.0

package/src/request-batcher.js

@@ -20,7 +20,9 @@ var RequestBatcher = function(storageKey, options) {
         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;
@@ -42,6 +44,8 @@ var RequestBatcher = function(storageKey, options) {
     // 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;
 };
 
 /**
@@ -101,7 +105,7 @@ RequestBatcher.prototype.scheduleFlush = function(flushMS) {
     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);
     }

package/src/request-queue.js

@@ -1,5 +1,6 @@
 import { SharedLock } from './shared-lock';
-import { cheap_guid, console_with_prefix, localStorageSupported, JSONParse, JSONStringify, _ } from './utils'; // eslint-disable-line camelcase
+import { batchedThrottle, cheap_guid, console_with_prefix, localStorageSupported, _ } from './utils'; // eslint-disable-line camelcase
+import { window } from './window';
 import { LocalStorageWrapper } from './storage/local-storage';
 import { Promise } from './promise-polyfill';
 
@@ -27,8 +28,10 @@ var RequestQueue = function (storageKey, options) {
     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 || window.localStorage,
+            timeoutMS: options.sharedLockTimeoutMS,
+        });
     }
     this.reportError = options.errorReporter || _.bind(logger.error, logger);
 
@@ -36,6 +39,14 @@ var RequestQueue = function (storageKey, options) {
 
     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 () {
@@ -78,36 +89,39 @@ RequestQueue.prototype.enqueue = function (item, flushInterval) {
         this.memQueue.push(queueEntry);
         return Promise.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));
 };
 
 /**
@@ -128,7 +142,7 @@ RequestQueue.prototype.fillBatch = function (batchSize) {
             }, 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;
@@ -215,7 +229,7 @@ RequestQueue.prototype.removeItemsByID = function (ids) {
             .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
@@ -303,7 +317,6 @@ RequestQueue.prototype.readFromStorage = function () {
         }, this))
         .then(_.bind(function (storageEntry) {
             if (storageEntry) {
-                storageEntry = JSONParse(storageEntry);
                 if (!_.isArray(storageEntry)) {
                     this.reportError('Invalid storage entry:', storageEntry);
                     storageEntry = null;
@@ -321,16 +334,9 @@ RequestQueue.prototype.readFromStorage = function () {
  * 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 Promise.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;

package/src/shared-lock.js

@@ -1,5 +1,6 @@
 import { Promise } from './promise-polyfill';
 import { console_with_prefix, localStorageSupported, _ } from './utils'; // eslint-disable-line camelcase
+import { window } from './window';
 
 var logger = console_with_prefix('lock');
 
@@ -42,7 +43,6 @@ SharedLock.prototype.withLock = function(lockedCB, pid) {
     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;

package/src/storage/indexed-db.js

@@ -0,0 +1,127 @@
+import { Promise } from '../promise-polyfill';
+import { window } from '../window';
+
+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 Promise(function (resolve, reject) {
+        var openRequest = window.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 (!window.indexedDB) {
+        return Promise.reject('indexedDB is not supported in this browser');
+    }
+
+    if (!this.dbPromise) {
+        this.dbPromise = this._openDb();
+    }
+
+    return this.dbPromise
+        .then(function (dbOrError) {
+            if (dbOrError instanceof window['IDBDatabase']) {
+                return Promise.resolve();
+            } else {
+                return Promise.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 Promise(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 Promise.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;
+    });
+};
+
+export { IDBStorageWrapper, RECORDING_EVENTS_STORE_NAME, RECORDING_REGISTRY_STORE_NAME };

package/src/storage/local-storage.js

@@ -1,12 +1,8 @@
 import { Promise } from '../promise-polyfill';
-import { _ } from '../utils'; // eslint-disable-line camelcase
+import { _, JSONParse, JSONStringify } from '../utils'; // eslint-disable-line camelcase
 
 /**
- * @typedef {import('./wrapper').StorageWrapper}
- */
-
-/**
- * @type {StorageWrapper}
+ * @type {import('./wrapper').StorageWrapper}
  */
 var LocalStorageWrapper = function (storageOverride) {
     this.storage = storageOverride || localStorage;
@@ -19,7 +15,7 @@ LocalStorageWrapper.prototype.init = function () {
 LocalStorageWrapper.prototype.setItem = function (key, value) {
     return new Promise(_.bind(function (resolve, reject) {
         try {
-            this.storage.setItem(key, value);
+            this.storage.setItem(key, JSONStringify(value));
         } catch (e) {
             reject(e);
         }
@@ -31,7 +27,7 @@ LocalStorageWrapper.prototype.getItem = function (key) {
     return new Promise(_.bind(function (resolve, reject) {
         var item;
         try {
-            item = this.storage.getItem(key);
+            item = JSONParse(this.storage.getItem(key));
         } catch (e) {
             reject(e);
         }

package/src/storage/wrapper.js

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

package/src/utils.js

@@ -1,6 +1,6 @@
 /* eslint camelcase: "off", eqeqeq: "off" */
 import Config from './config';
-import { NpoPromise } from './promise-polyfill';
+import { NpoPromise, Promise } from './promise-polyfill';
 import { window } from './window';
 
 // Maximum allowed session recording length
@@ -1080,15 +1080,9 @@ _.cookie = {
     }
 };
 
-var _localStorageSupported = null;
-var localStorageSupported = function(storage, forceCheck) {
-    if (_localStorageSupported !== null && !forceCheck) {
-        return _localStorageSupported;
-    }
-
+var _testStorageSupported = function (storage) {
     var supported = true;
     try {
-        storage = storage || window.localStorage;
         var key = '__mplss_' + cheap_guid(8),
             val = 'xyz';
         storage.setItem(key, val);
@@ -1099,59 +1093,74 @@ var localStorageSupported = function(storage, forceCheck) {
     } 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 || window.localStorage);
+};
 
-    get: function(name) {
-        try {
-            return window.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 || window.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 {
-            window.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 {
-            window.localStorage.removeItem(name);
-        } catch (err) {
-            _.localStorage.error(err);
-        }
-    }
-};
+_.localStorage = _storageWrapper(window.localStorage, 'localStorage', localStorageSupported);
+_.sessionStorage = _storageWrapper(window.sessionStorage, 'sessionStorage', sessionStorageSupported);
 
 _.register_event = (function() {
     // written by Dean Edwards, 2005
@@ -1678,6 +1687,31 @@ _.info = {
     }
 };
 
+/**
+ * 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 Promise(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;
@@ -1720,6 +1754,8 @@ var isOnline = function() {
     return _.isUndefined(onLine) || onLine;
 };
 
+var NOOP_FUNC = function () {};
+
 var JSONStringify = null, JSONParse = null;
 if (typeof JSON !== 'undefined') {
     JSONStringify = JSON.stringify;
@@ -1728,22 +1764,23 @@ if (typeof JSON !== 'undefined') {
 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;
 
 export {
     _,
+    batchedThrottle,
     cheap_guid,
     console_with_prefix,
     console,
@@ -1756,6 +1793,7 @@ export {
     MAX_RECORDING_MS,
     MAX_VALUE_FOR_MIN_RECORDING_MS,
     navigator,
+    NOOP_FUNC,
     safewrap,
     safewrapClass,
     slice,