fix(browser-sdk): flush identity updates immediately

Author: roncohen

.changeset/tough-flies-push.md

@@ -0,0 +1,5 @@
+---
+"@reflag/browser-sdk": patch
+---
+
+Start flushing queued user and company updates immediately when `updateUser` or `updateCompany` changes identity context.

packages/browser-sdk/src/bulkQueue.ts

@@ -92,10 +92,13 @@ export class BulkQueue {
     this.schedule(this.flushDelayMs);
   }
 
-  async flush() {
+  async flush(): Promise<void> {
     if (this.inFlightPromise) {
       await this.inFlightPromise;
-      return;
+      if (this.queue.length === 0) {
+        return;
+      }
+      return this.flush();
     }
 
     if (this.queue.length === 0) {

packages/browser-sdk/src/client.ts

@@ -908,18 +908,26 @@ export class ReflagClient {
 
     this.context = newContext;
 
+    let shouldFlushIdentityUpdate = false;
+
     if (companyChanged) {
       void this.company();
+      shouldFlushIdentityUpdate = true;
     }
 
     if (userChanged) {
       void this.user();
+      shouldFlushIdentityUpdate = true;
       // Update the automatic feedback user if the user ID has changed
       if (userIdChanged) {
         void this.updateAutoFeedbackUser(String(newContext.user!.id));
       }
     }
 
+    if (shouldFlushIdentityUpdate) {
+      void this.bulkQueue?.flush();
+    }
+
     const shouldTrackLoading = this.state === "initialized";
     if (shouldTrackLoading) {
       this.setState("initializing");

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

@@ -271,7 +271,7 @@ describe("BulkQueue", () => {
     resolveSend?.(new Response("", { status: 200 }));
   });
 
-  it("requires a second flush to send pending events after an in-flight batch", async () => {
+  it("flush waits for an in-flight batch and sends pending events", async () => {
     let resolveFirstSend: ((res: Response) => void) | undefined;
     const firstSend = new Promise<Response>((resolve) => {
       resolveFirstSend = resolve;
@@ -306,10 +306,6 @@ describe("BulkQueue", () => {
     await flushWhileInFlight;
 
     expect(waitedForInFlight).toBe(true);
-    expect(sendBulk).toHaveBeenCalledTimes(1);
-    expect(await queue.size()).toBe(2);
-
-    await queue.flush();
     expect(sendBulk).toHaveBeenCalledTimes(2);
     expect(sendBulk).toHaveBeenNthCalledWith(2, [trackEvent, lateTrackEvent]);
     expect(await queue.size()).toBe(0);

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

@@ -1,9 +1,11 @@
+import { http, HttpResponse } from "msw";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 
 import { ReflagClient } from "../src/client";
 import { FlagsClient } from "../src/flag/flags";
 import { HttpClient } from "../src/httpClient";
 import { flagsResult } from "./mocks/handlers";
+import { server } from "./mocks/server";
 
 describe("ReflagClient", () => {
   let client: ReflagClient;
@@ -71,6 +73,84 @@ describe("ReflagClient", () => {
         "No company Id provided in context, company will be ignored",
       );
     });
+
+    it("starts flushing the user update before refetching flags without waiting for it", async () => {
+      const requests: string[] = [];
+      let bulkResolved = false;
+      let resolveBulk: ((response: HttpResponse) => void) | undefined;
+      const bulkResponse = new Promise<HttpResponse>((resolve) => {
+        resolveBulk = (response) => {
+          bulkResolved = true;
+          resolve(response);
+        };
+      });
+
+      server.use(
+        http.post("https://front.reflag.com/bulk", async ({ request }) => {
+          requests.push("bulk");
+          const data = await request.json();
+          const userEvent = Array.isArray(data)
+            ? data.find((event) => event?.type === "user")
+            : undefined;
+          expect(userEvent?.attributes?.siteCentricOptIn).toBe("true");
+
+          return bulkResponse;
+        }),
+        http.get(
+          "https://front.reflag.com/features/evaluated",
+          ({ request }) => {
+            requests.push("flags");
+            const url = new URL(request.url);
+            expect(url.searchParams.get("context.user.siteCentricOptIn")).toBe(
+              "true",
+            );
+
+            return HttpResponse.json({
+              success: true,
+              features: {
+                SITE_CENTRIC: {
+                  key: "SITE_CENTRIC",
+                  isEnabled: true,
+                  targetingVersion: 1,
+                },
+              },
+            });
+          },
+        ),
+      );
+
+      client = new ReflagClient({
+        publishableKey: "test-key-user-update-before-flags",
+        user: { id: "user1" },
+        bootstrappedFlags: {
+          SITE_CENTRIC: {
+            key: "SITE_CENTRIC",
+            isEnabled: false,
+            targetingVersion: 1,
+          },
+        },
+        trackingQueue: {
+          flushDelayMs: 2_000,
+        },
+      });
+      await client.initialize();
+
+      const updatePromise = client.updateUser({ siteCentricOptIn: "true" });
+
+      try {
+        await vi.waitFor(() => expect(requests).toEqual(["bulk", "flags"]));
+
+        let updateResolved = false;
+        void updatePromise.then(() => {
+          updateResolved = true;
+        });
+        await vi.waitFor(() => expect(updateResolved).toBe(true));
+        expect(bulkResolved).toBe(false);
+      } finally {
+        resolveBulk?.(HttpResponse.json({ success: true }));
+        await updatePromise;
+      }
+    });
   });
 
   describe("updateCompany", () => {
@@ -100,6 +180,50 @@ describe("ReflagClient", () => {
       );
       expect(flagClientSetContext).toHaveBeenCalledWith(client["context"]);
     });
+
+    it("starts flushing the company update before refetching flags", async () => {
+      const requests: string[] = [];
+      let resolveCompanyPlan: ((plan: unknown) => void) | undefined;
+      const companyPlan = new Promise<unknown>((resolve) => {
+        resolveCompanyPlan = resolve;
+      });
+
+      server.use(
+        http.post("https://front.reflag.com/bulk", async ({ request }) => {
+          requests.push("bulk");
+          const data = await request.json();
+          const companyEvent = Array.isArray(data)
+            ? data.find((event) => event?.type === "company")
+            : undefined;
+          resolveCompanyPlan?.(companyEvent?.attributes?.plan);
+
+          return HttpResponse.json({ success: true });
+        }),
+        http.get("https://front.reflag.com/features/evaluated", () => {
+          requests.push("flags");
+          return HttpResponse.json({
+            success: true,
+            features: {},
+          });
+        }),
+      );
+
+      client = new ReflagClient({
+        publishableKey: "test-key-company-update-before-flags",
+        user: { id: "user1" },
+        company: { id: "company1" },
+        bootstrappedFlags: {},
+        trackingQueue: {
+          flushDelayMs: 2_000,
+        },
+      });
+      await client.initialize();
+
+      await client.updateCompany({ plan: "enterprise" });
+
+      expect(requests).toEqual(["bulk", "flags"]);
+      await expect(companyPlan).resolves.toBe("enterprise");
+    });
   });
 
   describe("getFlag", () => {