Improve best-effort bulk flushing

Author: roncohen

packages/browser-sdk/src/client.ts

@@ -328,8 +328,14 @@ export type InitOptions = ReflagDeprecatedContext & {
     maxSize?: number;
 
     /**
-     * No retries are performed; failed batches are dropped.
+     * Deprecated: retries are no longer performed for bulk delivery.
      */
+    retryBaseDelayMs?: number;
+
+    /**
+     * Deprecated: retries are no longer performed for bulk delivery.
+     */
+    retryMaxDelayMs?: number;
   };
 };
 
@@ -423,6 +429,7 @@ export class ReflagClient {
   private autoFeedbackInit: Promise<void> | undefined;
   private readonly flagsClient: FlagsClient;
   private readonly bulkQueue: BulkQueue | undefined;
+  private readonly handleBeforeUnload?: () => void;
 
   public readonly logger: Logger;
 
@@ -480,6 +487,14 @@ export class ReflagClient {
         },
       );
     }
+    if (this.bulkQueue && !IS_SERVER) {
+      this.handleBeforeUnload = () => {
+        void this.bulkQueue?.flush();
+      };
+      window.addEventListener("beforeunload", this.handleBeforeUnload, {
+        capture: true,
+      });
+    }
 
     const bulkQueue = this.bulkQueue;
 
@@ -590,6 +605,12 @@ export class ReflagClient {
    *
    **/
   async stop() {
+    if (this.handleBeforeUnload && !IS_SERVER) {
+      window.removeEventListener("beforeunload", this.handleBeforeUnload, {
+        capture: true,
+      });
+    }
+
     if (this.bulkQueue) {
       await this.bulkQueue.flush();
       let remaining = await this.bulkQueue.size();

packages/browser-sdk/src/httpClient.ts

@@ -1,12 +1,18 @@
 import { createAbortController } from "./utils/abortController";
 import { API_BASE_URL, SDK_VERSION, SDK_VERSION_HEADER_NAME } from "./config";
 
+const KEEPALIVE_MAX_BODY_BYTES = 60 * 1024;
+
 export interface HttpClientOptions {
   baseUrl?: string;
   sdkVersion?: string;
   credentials?: RequestCredentials;
 }
 
+function getBodyByteLength(value: string) {
+  return new TextEncoder().encode(value).length;
+}
+
 export class HttpClient {
   private readonly baseUrl: string;
   private readonly sdkVersion: string;
@@ -85,16 +91,21 @@ export class HttpClient {
     body: any;
     keepalive?: boolean;
   }): ReturnType<typeof fetch> {
+    const serializedBody = JSON.stringify(body);
+    const shouldUseKeepalive =
+      keepalive &&
+      getBodyByteLength(serializedBody) <= KEEPALIVE_MAX_BODY_BYTES;
+
     return fetch(this.getUrl(path), {
       ...this.fetchOptions,
       method: "POST",
-      keepalive,
+      keepalive: shouldUseKeepalive,
       headers: {
         "Content-Type": "application/json",
         [SDK_VERSION_HEADER_NAME]: this.sdkVersion,
         Authorization: `Bearer ${this.publishableKey}`,
       },
-      body: JSON.stringify(body),
+      body: serializedBody,
     });
   }
 }

packages/browser-sdk/test/client.test.ts

@@ -46,6 +46,7 @@ describe("ReflagClient", () => {
       await vi.waitFor(() =>
         expect(httpClientPost).toHaveBeenCalledWith({
           path: "/bulk",
+          keepalive: true,
           body: [
             {
               type: "user",
@@ -73,6 +74,7 @@ describe("ReflagClient", () => {
       await vi.waitFor(() =>
         expect(httpClientPost).toHaveBeenCalledWith({
           path: "/bulk",
+          keepalive: true,
           body: [
             {
               type: "company",
@@ -197,6 +199,20 @@ describe("ReflagClient", () => {
   });
 
   describe("stop", () => {
+    it("flushes the bulk queue on beforeunload and removes the listener on stop", async () => {
+      const bulkQueue = client["bulkQueue"];
+      expect(bulkQueue).toBeDefined();
+
+      const flushSpy = vi.spyOn(bulkQueue!, "flush").mockResolvedValue();
+      window.dispatchEvent(new Event("beforeunload"));
+      expect(flushSpy).toHaveBeenCalledTimes(1);
+
+      await client.stop();
+
+      window.dispatchEvent(new Event("beforeunload"));
+      expect(flushSpy).toHaveBeenCalledTimes(2);
+    });
+
     it("throws if queued bulk events remain after final flush attempt", async () => {
       const bulkQueue = client["bulkQueue"];
       expect(bulkQueue).toBeDefined();

packages/browser-sdk/test/httpClient.test.ts

@@ -64,6 +64,29 @@ describe("sets `credentials`", () => {
     );
   });
 
+  test("uses keepalive for small request bodies when requested", async () => {
+    const client = new HttpClient("publishableKey");
+
+    await client.post({ path: "/test", body: { ok: true }, keepalive: true });
+
+    expect(global.fetch).toHaveBeenCalledWith(
+      expect.any(URL),
+      expect.objectContaining({ keepalive: true }),
+    );
+  });
+
+  test("does not use keepalive for large request bodies", async () => {
+    const client = new HttpClient("publishableKey");
+    const largeBody = { payload: "x".repeat(70 * 1024) };
+
+    await client.post({ path: "/test", body: largeBody, keepalive: true });
+
+    expect(global.fetch).toHaveBeenCalledWith(
+      expect.any(URL),
+      expect.objectContaining({ keepalive: false }),
+    );
+  });
+
   test("does not require a writable `URL.search` property", async () => {
     const OriginalURL = global.URL;