🤖 fix: refresh remote experiments after cold start

ExperimentsService can return { source: 'cache', value: null } on first launch while
PostHog refresh runs in the background.

The renderer previously fetched experiments.getAll only once, so remote variants
never became visible until manual reload.

Fix:
- Poll experiments.getAll with bounded backoff while any values are pending
- Add a regression test for ExperimentsProvider

Change-Id: If9533ee2ad0430729600275aedcf9b1939ec612d
Signed-off-by: Thomas Kosiewski <[email protected]>

Author: ThomasK33

src/browser/contexts/ExperimentsContext.test.tsx

@@ -0,0 +1,77 @@
+import { cleanup, render, waitFor } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, mock, test } from "bun:test";
+import { GlobalWindow } from "happy-dom";
+import { ExperimentsProvider, useExperimentValue } from "./ExperimentsContext";
+import { EXPERIMENT_IDS } from "@/common/constants/experiments";
+import type { ExperimentValue } from "@/common/orpc/types";
+import type { APIClient } from "@/browser/contexts/API";
+import type { RecursivePartial } from "@/browser/testUtils";
+
+let currentClientMock: RecursivePartial<APIClient> = {};
+void mock.module("@/browser/contexts/API", () => ({
+  useAPI: () => ({
+    api: currentClientMock as APIClient,
+    status: "connected" as const,
+    error: null,
+  }),
+  APIProvider: ({ children }: { children: React.ReactNode }) => children,
+}));
+
+describe("ExperimentsProvider", () => {
+  beforeEach(() => {
+    globalThis.window = new GlobalWindow() as unknown as Window & typeof globalThis;
+    globalThis.document = globalThis.window.document;
+    globalThis.window.localStorage.clear();
+  });
+
+  afterEach(() => {
+    cleanup();
+    globalThis.window = undefined as unknown as Window & typeof globalThis;
+    globalThis.document = undefined as unknown as Document;
+    currentClientMock = {};
+  });
+
+  test("polls getAll until remote variants are available", async () => {
+    let callCount = 0;
+
+    const getAllMock = mock(() => {
+      callCount += 1;
+
+      if (callCount === 1) {
+        return Promise.resolve({
+          [EXPERIMENT_IDS.POST_COMPACTION_CONTEXT]: { value: null, source: "cache" },
+        } satisfies Record<string, ExperimentValue>);
+      }
+
+      return Promise.resolve({
+        [EXPERIMENT_IDS.POST_COMPACTION_CONTEXT]: { value: "test", source: "posthog" },
+      } satisfies Record<string, ExperimentValue>);
+    });
+
+    currentClientMock = {
+      experiments: {
+        getAll: getAllMock,
+        reload: mock(() => Promise.resolve()),
+      },
+    };
+
+    function Observer() {
+      const enabled = useExperimentValue(EXPERIMENT_IDS.POST_COMPACTION_CONTEXT);
+      return <div data-testid="enabled">{String(enabled)}</div>;
+    }
+
+    const { getByTestId } = render(
+      <ExperimentsProvider>
+        <Observer />
+      </ExperimentsProvider>
+    );
+
+    expect(getByTestId("enabled").textContent).toBe("false");
+
+    await waitFor(() => {
+      expect(getByTestId("enabled").textContent).toBe("true");
+    });
+
+    expect(getAllMock.mock.calls.length).toBeGreaterThanOrEqual(2);
+  });
+});

src/browser/contexts/ExperimentsContext.tsx

@@ -4,6 +4,7 @@ import React, {
   useSyncExternalStore,
   useCallback,
   useEffect,
+  useRef,
   useState,
 } from "react";
 import {
@@ -86,6 +87,28 @@ function getRemoteExperimentEnabled(value: string | boolean): boolean {
   return value === "test";
 }
 
+/**
+ * True when any remote experiment value is still pending a background PostHog refresh.
+ */
+function hasPendingRemoteExperimentValues(
+  remoteExperiments: Partial<Record<ExperimentId, ExperimentValue>>
+): boolean {
+  return Object.values(remoteExperiments).some(
+    (remote) => remote?.source === "cache" && remote.value === null
+  );
+}
+
+const REMOTE_EXPERIMENTS_POLL_INITIAL_DELAY_MS = 100;
+const REMOTE_EXPERIMENTS_POLL_MAX_DELAY_MS = 5_000;
+const REMOTE_EXPERIMENTS_POLL_MAX_ATTEMPTS = 8;
+
+function getRemoteExperimentsPollDelayMs(attempt: number): number {
+  return Math.min(
+    REMOTE_EXPERIMENTS_POLL_INITIAL_DELAY_MS * 2 ** attempt,
+    REMOTE_EXPERIMENTS_POLL_MAX_DELAY_MS
+  );
+}
+
 /**
  * Set experiment state to localStorage and dispatch sync event.
  */
@@ -160,6 +183,62 @@ export function ExperimentsProvider(props: { children: React.ReactNode }) {
     await loadRemoteExperiments();
   }, [apiState.status, apiState.api, loadRemoteExperiments]);
 
+  // On cold start, experiments.getAll can return { source: "cache", value: null } while
+  // ExperimentsService refreshes from PostHog in the background. Poll a few times so the
+  // renderer picks up remote variants without requiring a manual reload.
+  const remotePollTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const remotePollAttemptRef = useRef(0);
+
+  const clearRemotePoll = useCallback(() => {
+    if (remotePollTimeoutRef.current === null) {
+      return;
+    }
+
+    clearTimeout(remotePollTimeoutRef.current);
+    remotePollTimeoutRef.current = null;
+  }, []);
+
+  useEffect(() => {
+    return () => {
+      clearRemotePoll();
+    };
+  }, [clearRemotePoll]);
+
+  useEffect(() => {
+    if (apiState.status !== "connected" || !apiState.api) {
+      remotePollAttemptRef.current = 0;
+      clearRemotePoll();
+      return;
+    }
+
+    if (!remoteExperiments) {
+      remotePollAttemptRef.current = 0;
+      clearRemotePoll();
+      return;
+    }
+
+    if (!hasPendingRemoteExperimentValues(remoteExperiments)) {
+      remotePollAttemptRef.current = 0;
+      clearRemotePoll();
+      return;
+    }
+
+    if (remotePollTimeoutRef.current !== null) {
+      return;
+    }
+
+    const attempt = remotePollAttemptRef.current;
+    if (attempt >= REMOTE_EXPERIMENTS_POLL_MAX_ATTEMPTS) {
+      return;
+    }
+
+    const delayMs = getRemoteExperimentsPollDelayMs(attempt);
+    remotePollTimeoutRef.current = setTimeout(() => {
+      remotePollTimeoutRef.current = null;
+      remotePollAttemptRef.current += 1;
+      void loadRemoteExperiments();
+    }, delayMs);
+  }, [apiState.status, apiState.api, remoteExperiments, clearRemotePoll, loadRemoteExperiments]);
   useEffect(() => {
     void loadRemoteExperiments();
   }, [loadRemoteExperiments]);