Properly handle interrupted manifest requests (#12915)

Author: brophdawg11

.changeset/young-stingrays-begin.md

@@ -0,0 +1,5 @@
+---
+"react-router": patch
+---
+
+Properly handle interrupted manifest requests in lazy route discovery

integration/fog-of-war-test.ts

@@ -1273,4 +1273,59 @@ test.describe("Fog of War", () => {
       ),
     ]);
   });
+
+  test("handles interruptions from back to back navigations", async ({
+    page,
+  }) => {
+    let fixture = await createFixture({
+      files: {
+        ...getFiles(),
+        "app/routes/a.tsx": js`
+          import { Link, Outlet, useLoaderData, useNavigate } from "react-router";
+          export function loader({ request }) {
+            return { message: "A LOADER" };
+          }
+          export default function Index() {
+            let data = useLoaderData();
+            let navigate = useNavigate();
+            return (
+              <>
+                <h1 id="a">A: {data.message}</h1>
+                <button data-link onClick={async () => {
+                  navigate('/a/b');
+                  setTimeout(() => navigate('/a/b'), 0)
+                }}>
+                  /a/b
+                </button>
+                <Outlet/>
+              </>
+            )
+          }
+        `,
+      },
+    });
+    let appFixture = await createAppFixture(fixture);
+    let app = new PlaywrightFixture(appFixture, page);
+
+    await app.goto("/a", true);
+    expect(
+      await page.evaluate(() =>
+        Object.keys((window as any).__reactRouterManifest.routes)
+      )
+    ).toEqual(["root", "routes/a", "routes/_index"]);
+
+    // /a/b gets discovered on click
+    await app.clickElement("[data-link]");
+    await new Promise((resolve) => setTimeout(resolve, 1000));
+    expect(await (await page.$("body"))?.textContent()).not.toContain(
+      "Not Found"
+    );
+    await page.waitForSelector("#b");
+
+    expect(
+      await page.evaluate(() =>
+        Object.keys((window as any).__reactRouterManifest.routes)
+      )
+    ).toEqual(["root", "routes/a", "routes/_index", "routes/a.b"]);
+  });
 });

packages/react-router/lib/dom/ssr/fog-of-war.ts

@@ -77,7 +77,7 @@ export function getPatchRoutesOnNavigationFunction(
     return undefined;
   }
 
-  return async ({ path, patch }) => {
+  return async ({ path, patch, signal }) => {
     if (discoveredPaths.has(path)) {
       return;
     }
@@ -87,7 +87,8 @@ export function getPatchRoutesOnNavigationFunction(
       routeModules,
       isSpaMode,
       basename,
-      patch
+      patch,
+      signal
     );
   };
 }
@@ -185,7 +186,8 @@ export async function fetchAndApplyManifestPatches(
   routeModules: RouteModules,
   isSpaMode: boolean,
   basename: string | undefined,
-  patchRoutes: DataRouter["patchRoutes"]
+  patchRoutes: DataRouter["patchRoutes"],
+  signal?: AbortSignal
 ): Promise<void> {
   let manifestPath = `${basename != null ? basename : "/"}/__manifest`.replace(
     /\/+/g,
@@ -203,15 +205,21 @@ export async function fetchAndApplyManifestPatches(
     return;
   }
 
-  let res = await fetch(url);
+  let serverPatches: AssetsManifest["routes"];
+  try {
+    let res = await fetch(url, { signal });
 
-  if (!res.ok) {
-    throw new Error(`${res.status} ${res.statusText}`);
-  } else if (res.status >= 400) {
-    throw new Error(await res.text());
-  }
+    if (!res.ok) {
+      throw new Error(`${res.status} ${res.statusText}`);
+    } else if (res.status >= 400) {
+      throw new Error(await res.text());
+    }
 
-  let serverPatches = (await res.json()) as AssetsManifest["routes"];
+    serverPatches = (await res.json()) as AssetsManifest["routes"];
+  } catch (e) {
+    if (signal?.aborted) return;
+    throw e;
+  }
 
   // Patch routes we don't know about yet into the manifest
   let knownRoutes = new Set(Object.keys(manifest.routes));

packages/react-router/lib/router/router.ts

@@ -3180,6 +3180,7 @@ export function createRouter(init: RouterInit): Router {
       let localManifest = manifest;
       try {
         await patchRoutesOnNavigationImpl({
+          signal,
           path: pathname,
           matches: partialMatches,
           patch: (routeId, children) => {

packages/react-router/lib/router/utils.ts

@@ -224,6 +224,7 @@ export type AgnosticPatchRoutesOnNavigationFunctionArgs<
   O extends AgnosticRouteObject = AgnosticRouteObject,
   M extends AgnosticRouteMatch = AgnosticRouteMatch
 > = {
+  signal: AbortSignal;
   path: string;
   matches: M[];
   patch: (routeId: string | null, children: O[]) => void;