fix(router): suppress abort errors in single fetch

.changeset/fetcher-abort-fix.md

@@ -0,0 +1,5 @@
+---
+"react-router": patch
+---
+
+Prevent abort-related fetcher errors from surfacing as navigation failures.

contributors.yml

@@ -464,6 +464,8 @@
 - xcsnowcity
 - xdaxer
 - yionr
+- Yonatani
+- yoni-noma
 - yracnet
 - ytori
 - yuhwan-park

integration/fetcher-test.ts

@@ -88,6 +88,43 @@ test.describe("useFetcher", () => {
           }
         `,
 
+        "app/routes/fetcher-abort.tsx": js`
+          import { Link, useFetcher } from "react-router";
+          import { useEffect, useState } from "react";
+
+          export async function loader() {
+            await new Promise(resolve => setTimeout(resolve, 150));
+            return { ok: true };
+          }
+
+          export default function FetcherAbort() {
+            let fetcher = useFetcher();
+            let [polling, setPolling] = useState(false);
+
+            useEffect(() => {
+              if (!polling) return;
+              let intervalId = setInterval(() => {
+                fetcher.load("/fetcher-abort");
+              }, 50);
+              return () => clearInterval(intervalId);
+            }, [polling, fetcher]);
+
+            return (
+              <div>
+                <button onClick={() => setPolling(true)}>Start Polling</button>
+                <Link to="/target">Go to Target</Link>
+                <p id="fetcher-state">{fetcher.state}</p>
+              </div>
+            );
+          }
+        `,
+
+        "app/routes/target.tsx": js`
+          export default function Target() {
+            return <h1>Target</h1>;
+          }
+        `,
+
         "app/routes/parent.tsx": js`
           import { Outlet } from "react-router";
 
@@ -415,6 +452,18 @@ test.describe("useFetcher", () => {
       ]),
     );
   });
+
+  test("navigation during fetcher polling does not error", async ({ page }) => {
+    let app = new PlaywrightFixture(appFixture, page);
+
+    await app.goto("/fetcher-abort");
+    await page.getByRole("button", { name: "Start Polling" }).click();
+    await page.waitForTimeout(200);
+
+    await page.getByRole("link", { name: "Go to Target" }).click();
+    await expect(page).toHaveURL(/\/target/);
+    await expect(page.getByRole("heading", { name: "Target" })).toBeVisible();
+  });
 });
 
 test.describe("fetcher aborts and adjacent forms", () => {

packages/react-router/__tests__/router/data-strategy-test.ts

@@ -792,6 +792,63 @@ describe("router dataStrategy", () => {
     });
   });
 
+  describe("aborts", () => {
+    it("returns AbortError results when a navigation is interrupted", async () => {
+      let resultsByPathname = new Map<
+        string,
+        Record<string, DataStrategyResult>
+      >();
+      let dataStrategy = mockDataStrategy(({ matches, request }) => {
+        return Promise.all(matches.map((m) => m.resolve())).then((results) => {
+          let keyed = keyedResults(matches, results);
+          resultsByPathname.set(new URL(request.url).pathname, keyed);
+          return keyed;
+        });
+      });
+      let t = setup({
+        routes: [
+          {
+            path: "/",
+            id: "root",
+            loader: true,
+            children: [
+              {
+                id: "foo",
+                path: "foo",
+                loader: true,
+              },
+              {
+                id: "bar",
+                path: "bar",
+                loader: true,
+              },
+            ],
+          },
+        ],
+        dataStrategy,
+        hydrationData: {
+          loaderData: {
+            root: "ROOT",
+          },
+        },
+      });
+
+      let A = await t.navigate("/foo");
+      let B = await t.navigate("/bar");
+      await B.loaders.root.resolve("ROOT*");
+      await B.loaders.bar.resolve("BAR");
+      await tick();
+
+      expect(A.loaders.foo.signal.aborted).toBe(true);
+      let abortedResults = resultsByPathname.get("/foo");
+      expect(abortedResults).toBeDefined();
+      expect(abortedResults?.foo?.type).toBe("error");
+      expect(abortedResults?.foo?.result).toEqual(
+        expect.objectContaining({ name: "AbortError" }),
+      );
+    });
+  });
+
   describe("actions", () => {
     it("should allow a custom implementation to passthrough to default behavior", async () => {
       let dataStrategy = mockDataStrategy(({ matches }) =>

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

@@ -303,7 +303,9 @@ export async function fetchAndApplyManifestPatches(
     }
     serverPatches = (await res.json()) as AssetsManifest["routes"];
   } catch (e) {
-    if (signal?.aborted) return;
+    if (signal?.aborted) {
+      return;
+    }
     throw e;
   }
 

packages/react-router/lib/dom/ssr/single-fetch.tsx

@@ -15,6 +15,7 @@ import {
   data,
   stripBasename,
 } from "../../router/utils";
+import { isAbortError } from "../../router/abort";
 import { createRequestInit } from "./data";
 import type { AssetsManifest, EntryContext } from "./entry";
 import { escapeHtml } from "./markup";
@@ -663,7 +664,15 @@ async function fetchAndDecodeViaTurboStream(
     }
   }
 
-  let res = await fetch(url, await createRequestInit(request));
+  let res: Response;
+  try {
+    res = await fetch(url, await createRequestInit(request));
+  } catch (e) {
+    if (isAbortError(e, request.signal, { allowTypeError: true })) {
+      throw new DOMException("Aborted", "AbortError");
+    }
+    throw e;
+  }
 
   // If this error'd without hitting the running server, then bubble a normal
   // `ErrorResponse` and don't try to decode the body with `turbo-stream`.

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

@@ -0,0 +1,45 @@
+type AbortErrorOptions = {
+  allowTypeError?: boolean;
+};
+
+export function isAbortError(
+  error: unknown,
+  signal: AbortSignal,
+  options: AbortErrorOptions = {},
+) {
+  const { allowTypeError = true } = options;
+  if (signal.aborted) {
+    return true;
+  }
+
+  const hasDomException = typeof DOMException !== "undefined";
+  const signalReason = signal.reason;
+
+  if (
+    hasDomException &&
+    signalReason instanceof DOMException &&
+    signalReason.name === "AbortError"
+  ) {
+    return true;
+  }
+  if (signalReason instanceof Error && signalReason.name === "AbortError") {
+    return true;
+  }
+
+  if (hasDomException && error instanceof DOMException) {
+    return error.name === "AbortError";
+  }
+  if (error instanceof TypeError) {
+    if (!allowTypeError) {
+      return false;
+    }
+    // Fallback for browsers that surface aborted fetches as TypeError
+    return /failed to fetch|load failed|network request failed|the operation was aborted/i.test(
+      error.message,
+    );
+  }
+  if (error instanceof Error) {
+    return error.name === "AbortError";
+  }
+  return false;
+}