WIP

Author: kinyoklion

packages/sdk/browser/src/BrowserClient.ts

@@ -21,6 +21,7 @@ import GoalManager from './goals/GoalManager';
 import { Goal, isClick } from './goals/Goals';
 import validateOptions, { BrowserOptions, filterToBaseOptions } from './options';
 import BrowserPlatform from './platform/BrowserPlatform';
+import { registerStateDetection } from './BrowserStateDetector';
 
 /**
  *
@@ -211,6 +212,8 @@ export class BrowserClient extends LDClientImpl implements LDClient {
       // which emits the event, and assign its promise to a member. The "waitForGoalsReady" function
       // would return that promise.
       this.goalManager.initialize();
+
+      registerStateDetection(() => this.flush());
     }
   }
 

packages/sdk/browser/src/BrowserStateDetector.ts

@@ -0,0 +1,20 @@
+export function registerStateDetection(requestFlush: () => void) {
+  // When the visibility of the page changes to hidden we want to flush any pending events.
+  //
+  // This is handled with visibility, instead of beforeunload/unload
+  // because those events are not compatible with the bfcache and are unlikely
+  // to be called in many situations. For more information see: https://developer.chrome.com/blog/page-lifecycle-api/
+  //
+  // Redundancy is included by using both the visibilitychange handler as well as
+  // pagehide, because different browsers, and versions have different bugs with each.
+  // This also may provide more opportunity for the events to get flushed.
+  //
+  const handleVisibilityChange = () => {
+    if (document.visibilityState === 'hidden') {
+      requestFlush();
+    }
+  };
+
+  document.addEventListener('visibilitychange', handleVisibilityChange);
+  window.addEventListener('pagehide', requestFlush);
+}

packages/sdk/browser/src/options.ts

@@ -6,6 +6,8 @@ import {
   TypeValidators,
 } from '@launchdarkly/js-client-sdk-common';
 
+const DEFAULT_FLUSH_INTERVAL_SECONDS = 2;
+
 /**
  * Initialization options for the LaunchDarkly browser SDK.
  */
@@ -66,8 +68,14 @@ export function filterToBaseOptions(opts: BrowserOptions): LDOptionsBase {
   return baseOptions;
 }
 
+function applyBrowserDefaults(opts: BrowserOptions) {
+  // eslint-disable-next-line no-param-reassign
+  opts.flushInterval ??= DEFAULT_FLUSH_INTERVAL_SECONDS;
+}
+
 export default function validateOptions(opts: BrowserOptions, logger: LDLogger): ValidatedOptions {
   const output: ValidatedOptions = { ...optDefaults };
+  applyBrowserDefaults(output);
 
   Object.entries(validators).forEach((entry) => {
     const [key, validator] = entry as [keyof BrowserOptions, TypeValidator];

packages/shared/common/src/api/platform/Requests.ts

@@ -76,6 +76,11 @@ export interface Options {
   method?: string;
   body?: string;
   timeout?: number;
+  /**
+   * For use in browser environments. Platform support will be best effort for this field.
+   * https://developer.mozilla.org/en-US/docs/Web/API/RequestInit#keepalive
+   */
+  keepalive?: boolean;
 }
 
 export interface EventSourceCapabilities {

packages/shared/common/src/internal/events/EventSender.ts

@@ -65,6 +65,9 @@ export default class EventSender implements LDEventSender {
         headers,
         body: JSON.stringify(events),
         method: 'POST',
+        // When sending events from browser environments the request should be completed even
+        // if the user is navigating away from the page.
+        keepalive: true,
       });
 
       const serverDate = Date.parse(resHeaders.get('date') || '');

packages/shared/sdk-client/src/api/LDOptions.ts

@@ -111,9 +111,9 @@ export interface LDOptions {
   eventsUri?: string;
 
   /**
-   * Controls how often the SDK flushes events.
+   * The interval in between flushes of the analytics events queue, in seconds.
    *
-   * @defaultValue 30s.
+   * @defaultValue 2s for browser implementations 30s for others.
    */
   flushInterval?: number;