feat (event processor/pending events dispatcher): In browser entry point, add event listener for pagehide or unload that calls optimizely.close (#347)

Summary:

With event batching, optimizely.close() needs to be called to ensure that events are flushed before the user navigates away.  This PR ensures that optimizely.close() is called when the page unloads by hooking into the 'pagehide' event or the 'unload' event.

Test plan:

Added a UMD bundle test. Manually tested.

Author: mjc1283

packages/optimizely-sdk/lib/index.browser.js

@@ -29,6 +29,8 @@ var logger = logging.getLogger();
 logging.setLogHandler(loggerPlugin.createLogger());
 logging.setLogLevel(logging.LogLevel.INFO);
 
+var MODULE_NAME = 'INDEX_BROWSER';
+
 var DEFAULT_EVENT_BATCH_SIZE = 10;
 var DEFAULT_EVENT_FLUSH_INTERVAL = 1000; // Unit is ms, default is 1s
 
@@ -105,16 +107,20 @@ module.exports = {
         eventDispatcher = config.eventDispatcher;
       }
 
-      config = fns.assignIn({
-        clientEngine: enums.JAVASCRIPT_CLIENT_ENGINE,
-        eventBatchSize: DEFAULT_EVENT_BATCH_SIZE,
-        eventFlushInterval: DEFAULT_EVENT_FLUSH_INTERVAL,
-      }, config, {
-        eventDispatcher: eventDispatcher,
-        // always get the OptimizelyLogger facade from logging
-        logger: logger,
-        errorHandler: logging.getErrorHandler(),
-      });
+      config = fns.assignIn(
+        {
+          clientEngine: enums.JAVASCRIPT_CLIENT_ENGINE,
+          eventBatchSize: DEFAULT_EVENT_BATCH_SIZE,
+          eventFlushInterval: DEFAULT_EVENT_FLUSH_INTERVAL,
+        },
+        config,
+        {
+          eventDispatcher: eventDispatcher,
+          // always get the OptimizelyLogger facade from logging
+          logger: logger,
+          errorHandler: logging.getErrorHandler(),
+        }
+      );
 
       if (!eventProcessorConfigValidator.validateEventBatchSize(config.eventBatchSize)) {
         logger.warn('Invalid eventBatchSize %s, defaulting to %s', config.eventBatchSize, DEFAULT_EVENT_BATCH_SIZE);
@@ -125,7 +131,24 @@ module.exports = {
         config.eventFlushInterval = DEFAULT_EVENT_FLUSH_INTERVAL;
       }
 
-      return new Optimizely(config);
+      var optimizely = new Optimizely(config);
+
+      try {
+        if (typeof window.addEventListener === 'function') {
+          var unloadEvent = 'onpagehide' in window ? 'pagehide' : 'unload';
+          window.addEventListener(
+            unloadEvent,
+            function() {
+              optimizely.close();
+            },
+            false
+          );
+        }
+      } catch (e) {
+        logger.error(enums.LOG_MESSAGES.UNABLE_TO_ATTACH_UNLOAD, MODULE_NAME, e.message);
+      }
+
+      return optimizely;
     } catch (e) {
       logger.error(e);
       return null;

packages/optimizely-sdk/lib/index.browser.umdtests.js

@@ -16,6 +16,7 @@
 var configValidator = require('./utils/config_validator');
 var enums = require('./utils/enums');
 var logger = require('./plugins/logger');
+var Optimizely = require('./optimizely');
 
 var packageJSON = require('../package.json');
 var eventDispatcher = require('./plugins/event_dispatcher/index.browser');
@@ -40,6 +41,7 @@ describe('javascript-sdk', function() {
           logToConsole: false,
         });
         sinon.stub(configValidator, 'validate');
+        sinon.stub(Optimizely.prototype, 'close');
 
         xhr = sinon.useFakeXMLHttpRequest();
         global.XMLHttpRequest = xhr;
@@ -52,14 +54,18 @@ describe('javascript-sdk', function() {
         sinon.spy(console, 'info');
         sinon.spy(console, 'warn');
         sinon.spy(console, 'error');
+
+        sinon.spy(window, 'addEventListener');
       });
 
       afterEach(function() {
         console.log.restore();
         console.info.restore();
         console.warn.restore();
         console.error.restore();
+        window.addEventListener.restore();
         configValidator.validate.restore();
+        Optimizely.prototype.close.restore();
         xhr.restore();
       });
 
@@ -292,6 +298,18 @@ describe('javascript-sdk', function() {
         var variation = optlyInstance.getVariation('testExperimentNotRunning', 'testUser');
         assert.strictEqual(variation, null);
       });
+
+      it('should hook into window `pagehide` event', function() {
+        var optlyInstance = window.optimizelySdk.createInstance({
+          datafile: testData.getTestProjectConfig(),
+          errorHandler: fakeErrorHandler,
+          eventDispatcher: eventDispatcher,
+          logger: silentLogger,
+        });
+
+        sinon.assert.calledOnce(window.addEventListener);
+        sinon.assert.calledWith(window.addEventListener, sinon.match('pagehide').or(sinon.match('unload')));
+      });
     });
   });
 });

packages/optimizely-sdk/lib/utils/enums/index.js

@@ -141,6 +141,7 @@ exports.LOG_MESSAGES = {
   UNKNOWN_MATCH_TYPE: '%s: Audience condition %s uses an unknown match type. You may need to upgrade to a newer release of the Optimizely SDK.',
   UPDATED_OPTIMIZELY_CONFIG: '%s: Updated Optimizely config to revision %s (project id %s)',
   OUT_OF_BOUNDS: '%s: Audience condition %s evaluated to UNKNOWN because the number value for user attribute "%s" is not in the range [-2^53, +2^53].',
+  UNABLE_TO_ATTACH_UNLOAD: '%s: unable to bind optimizely.close() to page unload event: "%s"',
 };
 
 exports.RESERVED_EVENT_KEYWORDS = {