Fix missed Metro ready race on web

Author: V3RON

packages/bundler-metro/src/__tests__/startup.test.ts

@@ -142,6 +142,64 @@ describe('waitForMetroBackedAppReady', () => {
     expect(waitForReady).toHaveBeenCalledTimes(1);
   });
 
+  it('does not miss ready events emitted before bundle-request handling moves to the ready phase', async () => {
+    const metroInstance = createMetroInstance();
+    const readyListeners = new Set<() => void>();
+    let readyAlreadyReported = false;
+
+    const emitReady = () => {
+      readyAlreadyReported = true;
+      for (const listener of readyListeners) {
+        listener();
+      }
+      readyListeners.clear();
+    };
+
+    const waitForReady = vi.fn(async (signal: AbortSignal) => {
+      if (readyAlreadyReported) {
+        return await waitForAbort(signal);
+      }
+
+      return await new Promise<void>((resolve, reject) => {
+        const onReady = () => {
+          cleanup();
+          resolve();
+        };
+        const onAbort = () => {
+          cleanup();
+          reject(signal.reason ?? createAbortError());
+        };
+        const cleanup = () => {
+          readyListeners.delete(onReady);
+          signal.removeEventListener('abort', onAbort);
+        };
+
+        readyListeners.add(onReady);
+        signal.addEventListener('abort', onAbort, { once: true });
+      });
+    });
+
+    const startAttempt = vi.fn(async () => {
+      emitReady();
+      emitBundleRequestObserved(metroInstance, 'app');
+    });
+
+    await waitForMetroBackedAppReady({
+      metro: metroInstance,
+      platformId: 'web',
+      bundleStartTimeout: 1_000,
+      readyTimeout: 2_000,
+      maxAppRestarts: 2,
+      signal: new AbortController().signal,
+      startAttempt,
+      waitForReady,
+      waitForCrash: async (signal) => await waitForAbort(signal),
+    });
+
+    expect(startAttempt).toHaveBeenCalledTimes(1);
+    expect(waitForReady).toHaveBeenCalledTimes(1);
+  });
+
   it('does not count Metro bundle build time against readyTimeout', async () => {
     vi.useFakeTimers();
 

packages/bundler-metro/src/startup.ts

@@ -109,16 +109,15 @@ const waitForReadyAfterBundleRequest = async (options: {
   events: MetroInstance['events'];
   readyTimeout: number;
   signal: AbortSignal;
-  waitForReady: (signal: AbortSignal) => Promise<void>;
+  readyPromise: Promise<void>;
+  cancelReadyWait: () => void;
 }): Promise<void> => {
-  const { events, readyTimeout, signal, waitForReady } = options;
+  const { events, readyTimeout, signal, readyPromise, cancelReadyWait } = options;
 
   return await new Promise<void>((resolve, reject) => {
     let bundlingInProgress = false;
     let settled = false;
     let timeoutId: ReturnType<typeof setTimeout> | null = null;
-    const readyController = new AbortController();
-    const readySignal = raceAbortSignals([signal, readyController.signal]);
 
     const clearReadyTimer = () => {
       if (timeoutId) {
@@ -156,7 +155,7 @@ const waitForReadyAfterBundleRequest = async (options: {
     const startReadyTimer = () => {
       clearReadyTimer();
       timeoutId = setTimeout(() => {
-        readyController.abort(new DOMException('The operation was aborted', 'AbortError'));
+        cancelReadyWait();
         rejectOnce(new ReadyTimeoutError());
       }, readyTimeout);
     };
@@ -186,17 +185,20 @@ const waitForReadyAfterBundleRequest = async (options: {
     events.addListener(onMetroEvent);
     signal.addEventListener('abort', onAbort, { once: true });
 
-    void waitForReady(readySignal)
+    void readyPromise
       .then(() => {
         resolveOnce();
       })
       .catch((error) => {
         if (
-          readyController.signal.aborted &&
-          !signal.aborted &&
           error instanceof DOMException &&
           error.name === 'AbortError'
         ) {
+          if (signal.aborted) {
+            rejectOnce(
+              signal.reason ?? new DOMException('The operation was aborted', 'AbortError')
+            );
+          }
           return;
         }
 
@@ -246,6 +248,10 @@ export const waitForMetroBackedAppReady = async ({
     const attemptController = new AbortController();
     const attemptSignal = raceAbortSignals([signal, attemptController.signal]);
     const crashPromise = waitForCrash(attemptSignal);
+    const readyController = new AbortController();
+    const readyPromise = waitForReady(
+      raceAbortSignals([attemptSignal, readyController.signal])
+    );
 
     try {
       const bundleRequestPromise = waitForBundleRequest({
@@ -264,17 +270,25 @@ export const waitForMetroBackedAppReady = async ({
       ]);
       sawPrewarmRequest = bundleRequestResult.sawPrewarmRequest;
 
-      const readyPromise = waitForReadyAfterBundleRequest({
+      const readyAfterBundleRequestPromise = waitForReadyAfterBundleRequest({
         events: metro.events,
         readyTimeout,
         signal: attemptSignal,
-        waitForReady,
+        readyPromise,
+        cancelReadyWait: () => {
+          readyController.abort(
+            new DOMException('The operation was aborted', 'AbortError')
+          );
+        },
       });
-      await Promise.race([readyPromise, crashPromise]);
+      await Promise.race([readyAfterBundleRequestPromise, crashPromise]);
       attemptController.abort();
       onAttemptReset?.();
       return;
     } catch (error) {
+      readyController.abort(
+        new DOMException('The operation was aborted', 'AbortError')
+      );
       attemptController.abort();
       onAttemptReset?.();
 

packages/jest/src/__tests__/harness.test.ts

@@ -27,11 +27,19 @@ const mocks = vi.hoisted(() => ({
   waitForMetroBackedAppReady: vi.fn(),
 }));
 
-vi.mock('@react-native-harness/bundler-metro', () => ({
-  getMetroInstance: mocks.getMetroInstance,
-  isMetroCacheReusable: mocks.isMetroCacheReusable,
-  waitForMetroBackedAppReady: mocks.waitForMetroBackedAppReady,
-}));
+vi.mock('@react-native-harness/bundler-metro', async () => {
+  const actual =
+    await vi.importActual<typeof import('@react-native-harness/bundler-metro')>(
+      '@react-native-harness/bundler-metro'
+    );
+
+  return {
+    ...actual,
+    getMetroInstance: mocks.getMetroInstance,
+    isMetroCacheReusable: mocks.isMetroCacheReusable,
+    waitForMetroBackedAppReady: mocks.waitForMetroBackedAppReady,
+  };
+});
 
 vi.mock('@react-native-harness/bridge/server', () => ({
   getBridgeServer: mocks.getBridgeServer,

packages/jest/src/harness.ts

@@ -20,6 +20,7 @@ import {
   isMetroCacheReusable,
   waitForMetroBackedAppReady,
   type MetroInstance,
+  type ReportableEvent,
 } from '@react-native-harness/bundler-metro';
 import { createCrashArtifactWriter } from '@react-native-harness/tools';
 import {