Refine teardown handling for bulk queue

Author: roncohen

packages/browser-sdk/src/bulkQueue.ts

@@ -6,6 +6,7 @@ import {
   BULK_QUEUE_RETRY_MAX_DELAY_MS,
 } from "./config";
 import { Logger } from "./logger";
+import { isPageLifecycleAbortError } from "./utils/pageLifecycle";
 
 const BULK_QUEUE_STORAGE_KEY = "__reflag_bulk_queue_v1";
 const WARN_AFTER_CONSECUTIVE_FAILURES = 10;
@@ -290,19 +291,27 @@ export class BulkQueue {
       this.retryCount += 1;
       const retryInMs = this.getRetryDelay();
       nextDelayMs = retryInMs;
-      this.logger?.info("bulk retry scheduled", {
+      const logDetails = {
         retryInMs,
         queueSize: this.queue.length + this.getInFlightBatchSize(),
         consecutiveFailures: this.consecutiveFailures,
-      });
+      };
+      if (isPageLifecycleAbortError(error)) {
+        this.logger?.debug("bulk retry scheduled (aborted during page teardown)", {
+          ...logDetails,
+          error,
+        });
+      } else {
+        this.logger?.info("bulk retry scheduled", logDetails);
+      }
 
       const outageMs = now - this.firstFailureAt;
       const shouldWarn =
         this.consecutiveFailures >= WARN_AFTER_CONSECUTIVE_FAILURES ||
         outageMs >= WARN_AFTER_FAILURE_MS;
       const canWarnNow =
         this.lastWarnAt === null || now - this.lastWarnAt >= WARN_THROTTLE_MS;
-      if (shouldWarn && canWarnNow) {
+      if (shouldWarn && canWarnNow && !isPageLifecycleAbortError(error)) {
         this.logger?.warn("bulk delivery degraded", {
           consecutiveFailures: this.consecutiveFailures,
           outageMs,

packages/browser-sdk/src/client.ts

@@ -16,6 +16,7 @@ import {
   RawFlags,
 } from "./flag/flags";
 import { ToolbarPosition } from "./ui/types";
+import { logResponseError } from "./utils/responseError";
 import { BulkEvent, BulkQueue } from "./bulkQueue";
 import {
   API_BASE_URL,
@@ -29,8 +30,6 @@ import { HttpClient } from "./httpClient";
 import { Logger, loggerWithPrefix, quietConsoleLogger } from "./logger";
 import { StorageAdapter } from "./storage";
 import { showToolbarToggle } from "./toolbar";
-import { logResponseError } from "./utils/responseError";
-import { logLifecycleAwareNetworkError } from "./utils/pageLifecycle";
 
 const isMobile = typeof window !== "undefined" && window.innerWidth < 768;
 const isNode = typeof document === "undefined"; // deno supports "window" but not "document" according to https://remix.run/docs/en/main/guides/gotchas
@@ -572,17 +571,13 @@ export class ReflagClient {
     if (!this.config.bootstrapped) {
       if (this.context.user && this.config.enableTracking) {
         this.user().catch((e) => {
-          logLifecycleAwareNetworkError(this.logger, "error sending user", e);
+          this.logger.error("error sending user", e);
         });
       }
 
       if (this.context.company && this.config.enableTracking) {
         this.company().catch((e) => {
-          logLifecycleAwareNetworkError(
-            this.logger,
-            "error sending company",
-            e,
-          );
+          this.logger.error("error sending company", e);
         });
       }
     }

packages/browser-sdk/src/feedback/feedback.ts

@@ -3,8 +3,8 @@ import { HttpClient } from "../httpClient";
 import { Logger } from "../logger";
 import { AblySSEChannel, openAblySSEChannel } from "../sse";
 import { Position } from "../ui/types";
-import { logResponseError } from "../utils/responseError";
 import { logLifecycleAwareNetworkError } from "../utils/pageLifecycle";
+import { logResponseError } from "../utils/responseError";
 
 import {
   FeedbackSubmission,

packages/browser-sdk/src/flag/flags.ts

@@ -9,8 +9,8 @@ import RateLimiter from "../rateLimiter";
 import { getDefaultStorageAdapter, StorageAdapter } from "../storage";
 import { createAbortController } from "../utils/abortController";
 import { createEventTarget } from "../utils/eventTarget";
-import { logResponseError, parseResponseError } from "../utils/responseError";
 import { logLifecycleAwareNetworkError } from "../utils/pageLifecycle";
+import { logResponseError, parseResponseError } from "../utils/responseError";
 
 import { FlagCache, isObject, parseAPIFlagsResponse } from "./flagCache";
 

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

@@ -88,6 +88,51 @@ describe("BulkQueue", () => {
     expect(sendBulk).toHaveBeenNthCalledWith(2, [trackEvent]);
   });
 
+  it("requeues and downgrades page teardown aborts for bulk sends", async () => {
+    const logger = {
+      debug: vi.fn(),
+      info: vi.fn(),
+      warn: vi.fn(),
+      error: vi.fn(),
+    };
+    const sendBulk = vi
+      .fn<(events: BulkEvent[]) => Promise<Response>>()
+      .mockRejectedValueOnce(new TypeError("Failed to fetch"))
+      .mockResolvedValue(new Response("", { status: 200 }));
+    const queue = new BulkQueue(sendBulk, {
+      flushDelayMs: 10,
+      retryBaseDelayMs: 20,
+      retryMaxDelayMs: 20,
+      logger,
+    });
+
+    window.dispatchEvent(new Event("pagehide"));
+    await queue.enqueue(trackEvent);
+
+    await vi.advanceTimersByTimeAsync(10);
+    expect(sendBulk).toHaveBeenCalledTimes(1);
+    expect(await queue.size()).toBe(1);
+    expect(logger.debug).toHaveBeenCalledWith(
+      "bulk retry scheduled (aborted during page teardown)",
+      expect.objectContaining({
+        retryInMs: 20,
+        queueSize: 2,
+        consecutiveFailures: 1,
+        error: expect.any(TypeError),
+      }),
+    );
+    expect(logger.info).not.toHaveBeenCalledWith(
+      "bulk retry scheduled",
+      expect.anything(),
+    );
+    expect(logger.warn).not.toHaveBeenCalled();
+
+    window.dispatchEvent(new Event("pageshow"));
+    await vi.advanceTimersByTimeAsync(20);
+    expect(sendBulk).toHaveBeenCalledTimes(2);
+    expect(sendBulk).toHaveBeenNthCalledWith(2, [trackEvent]);
+  });
+
   it("drops 4xx responses, logs error, and does not retry", async () => {
     const sendBulk = vi
       .fn<(events: BulkEvent[]) => Promise<Response>>()

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

@@ -200,7 +200,9 @@ describe("FlagsClient", () => {
   test("downgrades page teardown fetch failures to debug logs", async () => {
     const { newFlagsClient, httpClient } = flagsClientFactory();
 
-    vi.mocked(httpClient.get).mockRejectedValue(new TypeError("Failed to fetch"));
+    vi.mocked(httpClient.get).mockRejectedValue(
+      new TypeError("Failed to fetch"),
+    );
     window.dispatchEvent(new Event("pagehide"));
 
     const flagsClient = newFlagsClient();