mixpanel-browser 2.41.0 → 2.42.0

package/.github/workflows/tests.yml

@@ -0,0 +1,25 @@
+name: Tests
+
+on:
+  push:
+    branches: [ master ]
+  pull_request:
+    branches: [ master ]
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [12.x, 14.x]
+
+    steps:
+    - uses: actions/checkout@v2
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v1
+      with:
+        node-version: ${{ matrix.node-version }}
+    - run: npm ci
+    - run: npm test

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+**2.42.0** (9 Nov 2021)
+- Make `batch_requests` default-on for all remaining projects
+- Replace `unload` event listener with modern alternatives (thanks @JoaoGomesTW)
+- Don't retry requests blocked by client (adblockers)
+- Retry with backoff after 429
+
 **2.41.0** (28 Jan 2021)
 - Remove all code related to Autotrack feature
 

package/README.md

@@ -1,5 +1,7 @@
+
 # Mixpanel JavaScript Library
-[![Build Status](https://travis-ci.org/mixpanel/mixpanel-js.svg?branch=master)](https://travis-ci.org/mixpanel/mixpanel-js)
+![Build Status](https://github.com/mixpanel/mixpanel-js/actions/workflows/tests.yml/badge.svg)
+[![](http://img.badgesize.io/https://unpkg.com/mixpanel-browser/dist/mixpanel.min.js?compression=gzip)](https://unpkg.com/mixpanel-browser/dist/mixpanel.min.js)
 
 The Mixpanel JavaScript Library is a set of methods attached to a global `mixpanel` object
 intended to be used by websites wishing to send data to Mixpanel projects. A full reference
@@ -73,4 +75,4 @@ Mixpanel production releases are tested against a large matrix of browsers and o
 - Publish to readme.io via the [rdme](https://www.npmjs.com/package/rdme) util: `RDME_API_KEY=<API_KEY> npm run dox-publish`
 
 ## Thanks
-For patches and support: @bohanyang, @dehau, @drubin, @D1plo1d, @feychenie, @mogstad, @pfhayes, @sandorfr, @stefansedich, @gfx, @pkaminski, @austince, @danielbaker, @mkdai, @wolever, @dpraul, @chriszamierowski
+For patches and support: @bohanyang, @dehau, @drubin, @D1plo1d, @feychenie, @mogstad, @pfhayes, @sandorfr, @stefansedich, @gfx, @pkaminski, @austince, @danielbaker, @mkdai, @wolever, @dpraul, @chriszamierowski, @JoaoGomesTW

package/dist/mixpanel.amd.js

@@ -2,7 +2,7 @@ define(function () { 'use strict';
 
     var Config = {
         DEBUG: false,
-        LIB_VERSION: '2.41.0'
+        LIB_VERSION: '2.42.0'
     };
 
     // since es6 imports are static and we run unit tests from the console, window won't be defined when importing this file
@@ -1684,28 +1684,6 @@ define(function () { 'use strict';
         return maxlen ? guid.substring(0, maxlen) : guid;
     };
 
-    /**
-     * Check deterministically whether to include or exclude from a feature rollout/test based on the
-     * given string and the desired percentage to include.
-     * @param {String} str - string to run the check against (for instance a project's token)
-     * @param {String} feature - name of feature (for inclusion in hash, to ensure different results
-     * for different features)
-     * @param {Number} percent_allowed - percentage chance that a given string will be included
-     * @returns {Boolean} whether the given string should be included
-     */
-    var determine_eligibility = _.safewrap(function(str, feature, percent_allowed) {
-        str = str + feature;
-
-        // Bernstein's hash: http://www.cse.yorku.ca/~oz/hash.html#djb2
-        var hash = 5381;
-        for (var i = 0; i < str.length; i++) {
-            hash = ((hash << 5) + hash) + str.charCodeAt(i);
-            hash = hash & hash;
-        }
-        var dart = (hash >>> 0) % 100;
-        return dart < percent_allowed;
-    });
-
     // naive way to extract domain name (example.com) from full hostname (my.sub.example.com)
     var SIMPLE_DOMAIN_MATCH_REGEX = /[a-z0-9][a-z0-9-]*\.[a-z]+$/i;
     // this next one attempts to account for some ccSLDs, e.g. extracting oxford.ac.uk from www.oxford.ac.uk
@@ -2444,9 +2422,9 @@ define(function () { 'use strict';
                     } else if (
                         _.isObject(res) &&
                         res.xhr_req &&
-                        (res.xhr_req['status'] >= 500 || res.xhr_req['status'] <= 0)
+                        (res.xhr_req['status'] >= 500 || res.xhr_req['status'] === 429 || res.error === 'timeout')
                     ) {
-                        // network or API error, retry
+                        // network or API error, or 429 Too Many Requests, retry
                         var retryMS = this.flushInterval * 2;
                         var headers = res.xhr_req['responseHeaders'];
                         if (headers) {
@@ -3016,9 +2994,13 @@ define(function () { 'use strict';
      * Permanently delete a group.
      *
      * ### Usage:
+     *
      *     mixpanel.get_group('company', 'mixpanel').delete();
+     *
+     * @param {Function} [callback] If provided, the callback will be called after the tracking event
      */
     MixpanelGroup.prototype['delete'] = addOptOutCheckMixpanelGroup(function(callback) {
+        // bracket notation above prevents a minification error related to reserved words
         var data = this.delete_action();
         return this._send_request(data, callback);
     });
@@ -5920,7 +5902,7 @@ define(function () { 'use strict';
         'inapp_protocol':                    '//',
         'inapp_link_new_window':             false,
         'ignore_dnt':                        false,
-        'batch_requests':                    false, // for now
+        'batch_requests':                    true,
         'batch_size':                        50,
         'batch_flush_interval_ms':           5000,
         'batch_request_timeout_ms':          90000,
@@ -6039,17 +6021,7 @@ define(function () { 'use strict';
         this['config'] = {};
         this['_triggered_notifs'] = [];
 
-        // rollout: enable batch_requests by default for 60% of projects
-        // (only if they have not specified a value in their init config
-        // and they aren't using a custom API host)
-        var variable_features = {};
-        var api_host = config['api_host'];
-        var is_custom_api = !!api_host && !api_host.match(/\.mixpanel\.com$/);
-        if (!('batch_requests' in config) && !is_custom_api && determine_eligibility(token, 'batch', 60)) {
-            variable_features['batch_requests'] = true;
-        }
-
-        this.set_config(_.extend({}, DEFAULT_CONFIG, variable_features, config, {
+        this.set_config(_.extend({}, DEFAULT_CONFIG, config, {
             'name': name,
             'token': token,
             'callback_fn': ((name === PRIMARY_INSTANCE_NAME) ? name : PRIMARY_INSTANCE_NAME + '.' + name) + '._jsc'
@@ -6075,15 +6047,32 @@ define(function () { 'use strict';
             } else {
                 this.init_batchers();
                 if (sendBeacon && window$1.addEventListener) {
-                    window$1.addEventListener('unload', _.bind(function() {
-                        // Before page closes, attempt to flush any events queued up via navigator.sendBeacon.
-                        // Since sendBeacon doesn't report success/failure, events will not be removed from
-                        // the persistent store; if the site is loaded again, the events will be flushed again
-                        // on startup and deduplicated on the Mixpanel server side.
+                    // Before page closes or hides (user tabs away etc), attempt to flush any events
+                    // queued up via navigator.sendBeacon. Since sendBeacon doesn't report success/failure,
+                    // events will not be removed from the persistent store; if the site is loaded again,
+                    // the events will be flushed again on startup and deduplicated on the Mixpanel server
+                    // side.
+                    // There is no reliable way to capture only page close events, so we lean on the
+                    // visibilitychange and pagehide events as recommended at
+                    // https://developer.mozilla.org/en-US/docs/Web/API/Window/unload_event#usage_notes.
+                    // These events fire when the user clicks away from the current page/tab, so will occur
+                    // more frequently than page unload, but are the only mechanism currently for capturing
+                    // this scenario somewhat reliably.
+                    var flush_on_unload = _.bind(function() {
                         if (!this.request_batchers.events.stopped) {
                             this.request_batchers.events.flush({unloading: true});
                         }
-                    }, this));
+                    }, this);
+                    window$1.addEventListener('pagehide', function(ev) {
+                        if (ev['persisted']) {
+                            flush_on_unload();
+                        }
+                    });
+                    window$1.addEventListener('visibilitychange', function() {
+                        if (document$1['visibilityState'] === 'hidden') {
+                            flush_on_unload();
+                        }
+                    });
                 }
             }
         }

package/dist/mixpanel.cjs.js

@@ -2,7 +2,7 @@
 
 var Config = {
     DEBUG: false,
-    LIB_VERSION: '2.41.0'
+    LIB_VERSION: '2.42.0'
 };
 
 // since es6 imports are static and we run unit tests from the console, window won't be defined when importing this file
@@ -1684,28 +1684,6 @@ var cheap_guid = function(maxlen) {
     return maxlen ? guid.substring(0, maxlen) : guid;
 };
 
-/**
- * Check deterministically whether to include or exclude from a feature rollout/test based on the
- * given string and the desired percentage to include.
- * @param {String} str - string to run the check against (for instance a project's token)
- * @param {String} feature - name of feature (for inclusion in hash, to ensure different results
- * for different features)
- * @param {Number} percent_allowed - percentage chance that a given string will be included
- * @returns {Boolean} whether the given string should be included
- */
-var determine_eligibility = _.safewrap(function(str, feature, percent_allowed) {
-    str = str + feature;
-
-    // Bernstein's hash: http://www.cse.yorku.ca/~oz/hash.html#djb2
-    var hash = 5381;
-    for (var i = 0; i < str.length; i++) {
-        hash = ((hash << 5) + hash) + str.charCodeAt(i);
-        hash = hash & hash;
-    }
-    var dart = (hash >>> 0) % 100;
-    return dart < percent_allowed;
-});
-
 // naive way to extract domain name (example.com) from full hostname (my.sub.example.com)
 var SIMPLE_DOMAIN_MATCH_REGEX = /[a-z0-9][a-z0-9-]*\.[a-z]+$/i;
 // this next one attempts to account for some ccSLDs, e.g. extracting oxford.ac.uk from www.oxford.ac.uk
@@ -2444,9 +2422,9 @@ RequestBatcher.prototype.flush = function(options) {
                 } else if (
                     _.isObject(res) &&
                     res.xhr_req &&
-                    (res.xhr_req['status'] >= 500 || res.xhr_req['status'] <= 0)
+                    (res.xhr_req['status'] >= 500 || res.xhr_req['status'] === 429 || res.error === 'timeout')
                 ) {
-                    // network or API error, retry
+                    // network or API error, or 429 Too Many Requests, retry
                     var retryMS = this.flushInterval * 2;
                     var headers = res.xhr_req['responseHeaders'];
                     if (headers) {
@@ -3016,9 +2994,13 @@ MixpanelGroup.prototype.union = addOptOutCheckMixpanelGroup(function(list_name,
  * Permanently delete a group.
  *
  * ### Usage:
+ *
  *     mixpanel.get_group('company', 'mixpanel').delete();
+ *
+ * @param {Function} [callback] If provided, the callback will be called after the tracking event
  */
 MixpanelGroup.prototype['delete'] = addOptOutCheckMixpanelGroup(function(callback) {
+    // bracket notation above prevents a minification error related to reserved words
     var data = this.delete_action();
     return this._send_request(data, callback);
 });
@@ -5920,7 +5902,7 @@ var DEFAULT_CONFIG = {
     'inapp_protocol':                    '//',
     'inapp_link_new_window':             false,
     'ignore_dnt':                        false,
-    'batch_requests':                    false, // for now
+    'batch_requests':                    true,
     'batch_size':                        50,
     'batch_flush_interval_ms':           5000,
     'batch_request_timeout_ms':          90000,
@@ -6039,17 +6021,7 @@ MixpanelLib.prototype._init = function(token, config, name) {
     this['config'] = {};
     this['_triggered_notifs'] = [];
 
-    // rollout: enable batch_requests by default for 60% of projects
-    // (only if they have not specified a value in their init config
-    // and they aren't using a custom API host)
-    var variable_features = {};
-    var api_host = config['api_host'];
-    var is_custom_api = !!api_host && !api_host.match(/\.mixpanel\.com$/);
-    if (!('batch_requests' in config) && !is_custom_api && determine_eligibility(token, 'batch', 60)) {
-        variable_features['batch_requests'] = true;
-    }
-
-    this.set_config(_.extend({}, DEFAULT_CONFIG, variable_features, config, {
+    this.set_config(_.extend({}, DEFAULT_CONFIG, config, {
         'name': name,
         'token': token,
         'callback_fn': ((name === PRIMARY_INSTANCE_NAME) ? name : PRIMARY_INSTANCE_NAME + '.' + name) + '._jsc'
@@ -6075,15 +6047,32 @@ MixpanelLib.prototype._init = function(token, config, name) {
         } else {
             this.init_batchers();
             if (sendBeacon && window$1.addEventListener) {
-                window$1.addEventListener('unload', _.bind(function() {
-                    // Before page closes, attempt to flush any events queued up via navigator.sendBeacon.
-                    // Since sendBeacon doesn't report success/failure, events will not be removed from
-                    // the persistent store; if the site is loaded again, the events will be flushed again
-                    // on startup and deduplicated on the Mixpanel server side.
+                // Before page closes or hides (user tabs away etc), attempt to flush any events
+                // queued up via navigator.sendBeacon. Since sendBeacon doesn't report success/failure,
+                // events will not be removed from the persistent store; if the site is loaded again,
+                // the events will be flushed again on startup and deduplicated on the Mixpanel server
+                // side.
+                // There is no reliable way to capture only page close events, so we lean on the
+                // visibilitychange and pagehide events as recommended at
+                // https://developer.mozilla.org/en-US/docs/Web/API/Window/unload_event#usage_notes.
+                // These events fire when the user clicks away from the current page/tab, so will occur
+                // more frequently than page unload, but are the only mechanism currently for capturing
+                // this scenario somewhat reliably.
+                var flush_on_unload = _.bind(function() {
                     if (!this.request_batchers.events.stopped) {
                         this.request_batchers.events.flush({unloading: true});
                     }
-                }, this));
+                }, this);
+                window$1.addEventListener('pagehide', function(ev) {
+                    if (ev['persisted']) {
+                        flush_on_unload();
+                    }
+                });
+                window$1.addEventListener('visibilitychange', function() {
+                    if (document$1['visibilityState'] === 'hidden') {
+                        flush_on_unload();
+                    }
+                });
             }
         }
     }

package/dist/mixpanel.globals.js

@@ -3,7 +3,7 @@
 
     var Config = {
         DEBUG: false,
-        LIB_VERSION: '2.41.0'
+        LIB_VERSION: '2.42.0'
     };
 
     // since es6 imports are static and we run unit tests from the console, window won't be defined when importing this file
@@ -1685,28 +1685,6 @@
         return maxlen ? guid.substring(0, maxlen) : guid;
     };
 
-    /**
-     * Check deterministically whether to include or exclude from a feature rollout/test based on the
-     * given string and the desired percentage to include.
-     * @param {String} str - string to run the check against (for instance a project's token)
-     * @param {String} feature - name of feature (for inclusion in hash, to ensure different results
-     * for different features)
-     * @param {Number} percent_allowed - percentage chance that a given string will be included
-     * @returns {Boolean} whether the given string should be included
-     */
-    var determine_eligibility = _.safewrap(function(str, feature, percent_allowed) {
-        str = str + feature;
-
-        // Bernstein's hash: http://www.cse.yorku.ca/~oz/hash.html#djb2
-        var hash = 5381;
-        for (var i = 0; i < str.length; i++) {
-            hash = ((hash << 5) + hash) + str.charCodeAt(i);
-            hash = hash & hash;
-        }
-        var dart = (hash >>> 0) % 100;
-        return dart < percent_allowed;
-    });
-
     // naive way to extract domain name (example.com) from full hostname (my.sub.example.com)
     var SIMPLE_DOMAIN_MATCH_REGEX = /[a-z0-9][a-z0-9-]*\.[a-z]+$/i;
     // this next one attempts to account for some ccSLDs, e.g. extracting oxford.ac.uk from www.oxford.ac.uk
@@ -2445,9 +2423,9 @@
                     } else if (
                         _.isObject(res) &&
                         res.xhr_req &&
-                        (res.xhr_req['status'] >= 500 || res.xhr_req['status'] <= 0)
+                        (res.xhr_req['status'] >= 500 || res.xhr_req['status'] === 429 || res.error === 'timeout')
                     ) {
-                        // network or API error, retry
+                        // network or API error, or 429 Too Many Requests, retry
                         var retryMS = this.flushInterval * 2;
                         var headers = res.xhr_req['responseHeaders'];
                         if (headers) {
@@ -3017,9 +2995,13 @@
      * Permanently delete a group.
      *
      * ### Usage:
+     *
      *     mixpanel.get_group('company', 'mixpanel').delete();
+     *
+     * @param {Function} [callback] If provided, the callback will be called after the tracking event
      */
     MixpanelGroup.prototype['delete'] = addOptOutCheckMixpanelGroup(function(callback) {
+        // bracket notation above prevents a minification error related to reserved words
         var data = this.delete_action();
         return this._send_request(data, callback);
     });
@@ -5921,7 +5903,7 @@
         'inapp_protocol':                    '//',
         'inapp_link_new_window':             false,
         'ignore_dnt':                        false,
-        'batch_requests':                    false, // for now
+        'batch_requests':                    true,
         'batch_size':                        50,
         'batch_flush_interval_ms':           5000,
         'batch_request_timeout_ms':          90000,
@@ -6040,17 +6022,7 @@
         this['config'] = {};
         this['_triggered_notifs'] = [];
 
-        // rollout: enable batch_requests by default for 60% of projects
-        // (only if they have not specified a value in their init config
-        // and they aren't using a custom API host)
-        var variable_features = {};
-        var api_host = config['api_host'];
-        var is_custom_api = !!api_host && !api_host.match(/\.mixpanel\.com$/);
-        if (!('batch_requests' in config) && !is_custom_api && determine_eligibility(token, 'batch', 60)) {
-            variable_features['batch_requests'] = true;
-        }
-
-        this.set_config(_.extend({}, DEFAULT_CONFIG, variable_features, config, {
+        this.set_config(_.extend({}, DEFAULT_CONFIG, config, {
             'name': name,
             'token': token,
             'callback_fn': ((name === PRIMARY_INSTANCE_NAME) ? name : PRIMARY_INSTANCE_NAME + '.' + name) + '._jsc'
@@ -6076,15 +6048,32 @@
             } else {
                 this.init_batchers();
                 if (sendBeacon && window$1.addEventListener) {
-                    window$1.addEventListener('unload', _.bind(function() {
-                        // Before page closes, attempt to flush any events queued up via navigator.sendBeacon.
-                        // Since sendBeacon doesn't report success/failure, events will not be removed from
-                        // the persistent store; if the site is loaded again, the events will be flushed again
-                        // on startup and deduplicated on the Mixpanel server side.
+                    // Before page closes or hides (user tabs away etc), attempt to flush any events
+                    // queued up via navigator.sendBeacon. Since sendBeacon doesn't report success/failure,
+                    // events will not be removed from the persistent store; if the site is loaded again,
+                    // the events will be flushed again on startup and deduplicated on the Mixpanel server
+                    // side.
+                    // There is no reliable way to capture only page close events, so we lean on the
+                    // visibilitychange and pagehide events as recommended at
+                    // https://developer.mozilla.org/en-US/docs/Web/API/Window/unload_event#usage_notes.
+                    // These events fire when the user clicks away from the current page/tab, so will occur
+                    // more frequently than page unload, but are the only mechanism currently for capturing
+                    // this scenario somewhat reliably.
+                    var flush_on_unload = _.bind(function() {
                         if (!this.request_batchers.events.stopped) {
                             this.request_batchers.events.flush({unloading: true});
                         }
-                    }, this));
+                    }, this);
+                    window$1.addEventListener('pagehide', function(ev) {
+                        if (ev['persisted']) {
+                            flush_on_unload();
+                        }
+                    });
+                    window$1.addEventListener('visibilitychange', function() {
+                        if (document$1['visibilityState'] === 'hidden') {
+                            flush_on_unload();
+                        }
+                    });
                 }
             }
         }