fix: Handle fetcher 404s as normal boundary erorrs (#9015)

* fix: Handle fetcher 404s as normal boundary erorrs

* Add changeset

* Bump threshold

Co-authored-by: Ryan Florence <rpflorence@gmail.com>

Author: brophdawg11

.changeset/dirty-ladybugs-grow.md

@@ -0,0 +1,5 @@
+---
+"@remix-run/router": patch
+---
+
+fix: Handle fetcher 404s as normal boundary errors

packages/react-router-dom/__tests__/DataBrowserRouter-test.tsx

@@ -1852,6 +1852,54 @@ function testDomRouter(
         `);
       });
 
+      it("handles fetcher 404 errors at the correct spot in the route hierarchy", async () => {
+        let { container } = render(
+          <TestDataRouter
+            window={getWindow("/child")}
+            hydrationData={{ loaderData: { "0": null } }}
+          >
+            <Route path="/" element={<Outlet />} errorElement={<p>Not I!</p>}>
+              <Route
+                path="child"
+                element={<Comp />}
+                errorElement={<ErrorElement />}
+              />
+            </Route>
+          </TestDataRouter>
+        );
+
+        function Comp() {
+          let fetcher = useFetcher();
+          return (
+            <button onClick={() => fetcher.load("/not-found")}>load</button>
+          );
+        }
+
+        function ErrorElement() {
+          let { status, statusText } = useRouteError();
+          return <p>contextual error:{`${status} ${statusText}`}</p>;
+        }
+
+        expect(getHtml(container)).toMatchInlineSnapshot(`
+          "<div>
+            <button>
+              load
+            </button>
+          </div>"
+        `);
+
+        fireEvent.click(screen.getByText("load"));
+        await waitFor(() => screen.getByText(/Not Found/));
+        expect(getHtml(container)).toMatchInlineSnapshot(`
+          "<div>
+            <p>
+              contextual error:
+              404 Not Found
+            </p>
+          </div>"
+        `);
+      });
+
       it("handles fetcher.load errors at the correct spot in the route hierarchy", async () => {
         let { container } = render(
           <TestDataRouter

packages/router/__tests__/router-test.ts

@@ -106,7 +106,7 @@ export function invariant<T>(
 ): asserts value is T;
 export function invariant(value: any, message?: string) {
   if (value === false || value === null || typeof value === "undefined") {
-    console.warn("Test invaeriant failed:", message);
+    console.warn("Test invariant failed:", message);
     throw new Error(message);
   }
 }
@@ -427,13 +427,27 @@ function setup({
     opts?: RouterNavigateOptions
   ): FetcherHelpers {
     let matches = matchRoutes(enhancedRoutes, href);
-    invariant(matches, `No matches found for fetcher href:${href}`);
     invariant(currentRouter, "No currentRouter available");
     let search = parsePath(href).search || "";
     let hasNakedIndexQuery = new URLSearchParams(search)
       .getAll("index")
       .some((v) => v === "");
 
+    // Let fetcher 404s go right through
+    if (!matches) {
+      return {
+        key,
+        navigationId,
+        get fetcher() {
+          invariant(currentRouter, "No currentRouter available");
+          return currentRouter.getFetcher(key);
+        },
+        loaders: {},
+        actions: {},
+        shimLoaderHelper,
+      };
+    }
+
     let match =
       matches[matches.length - 1].route.index && !hasNakedIndexQuery
         ? matches.slice(-2)[0]
@@ -560,14 +574,30 @@ function setup({
     key: string,
     opts: RouterNavigateOptions
   ): Promise<FetcherHelpers>;
+  async function fetch(
+    href: string,
+    key: string,
+    routeId: string,
+    opts: RouterNavigateOptions
+  ): Promise<FetcherHelpers>;
   async function fetch(
     href: string,
     keyOrOpts?: string | RouterNavigateOptions,
+    routeIdOrOpts?: string | RouterNavigateOptions,
     opts?: RouterNavigateOptions
   ): Promise<FetcherHelpers> {
     let navigationId = ++guid;
     let key = typeof keyOrOpts === "string" ? keyOrOpts : String(navigationId);
-    opts = typeof keyOrOpts === "object" ? keyOrOpts : opts;
+    let routeId =
+      typeof routeIdOrOpts === "string"
+        ? routeIdOrOpts
+        : String(enhancedRoutes[0].id);
+    opts =
+      typeof keyOrOpts === "object"
+        ? keyOrOpts
+        : typeof routeIdOrOpts === "object"
+        ? routeIdOrOpts
+        : opts;
     invariant(currentRouter, "No currentRouter available");
 
     // @ts-expect-error
@@ -580,7 +610,7 @@ function setup({
     }
 
     let helpers = getFetcherHelpers(key, href, navigationId, opts);
-    currentRouter.fetch(key, enhancedRoutes[0].id, href, opts);
+    currentRouter.fetch(key, routeId, href, opts);
     return helpers;
   }
 
@@ -5557,6 +5587,93 @@ describe("a router", () => {
           root: new ErrorResponse(400, undefined, ""),
         });
       });
+
+      it("handles fetcher errors at contextual route boundaries", async () => {
+        let t = setup({
+          routes: [
+            {
+              id: "root",
+              path: "/",
+              errorElement: true,
+              children: [
+                {
+                  id: "wit",
+                  path: "wit",
+                  loader: true,
+                  errorElement: true,
+                },
+                {
+                  id: "witout",
+                  path: "witout",
+                  loader: true,
+                },
+                {
+                  id: "error",
+                  path: "error",
+                  loader: true,
+                },
+              ],
+            },
+          ],
+        });
+
+        // If the routeId is not an active match, errors bubble to the root
+        let A = await t.fetch("/error", "key1", "wit");
+        await A.loaders.error.reject(new Error("Kaboom!"));
+        expect(t.router.getFetcher("key1")).toBe(IDLE_FETCHER);
+        expect(t.router.state.errors).toEqual({
+          root: new Error("Kaboom!"),
+        });
+
+        await t.fetch("/not-found", "key2", "wit");
+        expect(t.router.getFetcher("key2")).toBe(IDLE_FETCHER);
+        expect(t.router.state.errors).toEqual({
+          root: new ErrorResponse(404, "Not Found", null),
+        });
+
+        // Navigate to /wit and trigger errors, handled at the wit boundary
+        let B = await t.navigate("/wit");
+        await B.loaders.wit.resolve("WIT");
+
+        let C = await t.fetch("/error", "key3", "wit");
+        await C.loaders.error.reject(new Error("Kaboom!"));
+        expect(t.router.getFetcher("key3")).toBe(IDLE_FETCHER);
+        expect(t.router.state.errors).toEqual({
+          wit: new Error("Kaboom!"),
+        });
+
+        await t.fetch("/not-found", "key4", "wit", {
+          formMethod: "post",
+          formData: createFormData({ key: "value" }),
+        });
+        expect(t.router.getFetcher("key4")).toBe(IDLE_FETCHER);
+        expect(t.router.state.errors).toEqual({
+          wit: new ErrorResponse(404, "Not Found", null),
+        });
+
+        await t.fetch("/not-found", "key5", "wit");
+        expect(t.router.getFetcher("key5")).toBe(IDLE_FETCHER);
+        expect(t.router.state.errors).toEqual({
+          wit: new ErrorResponse(404, "Not Found", null),
+        });
+
+        // Navigate to /witout and fetch a 404, handled at the root boundary
+        let D = await t.navigate("/witout");
+        await D.loaders.witout.resolve("WITOUT");
+
+        let E = await t.fetch("/error", "key6", "witout");
+        await E.loaders.error.reject(new Error("Kaboom!"));
+        expect(t.router.getFetcher("key6")).toBe(IDLE_FETCHER);
+        expect(t.router.state.errors).toEqual({
+          root: new Error("Kaboom!"),
+        });
+
+        await t.fetch("/not-found", "key7", "witout");
+        expect(t.router.getFetcher("key7")).toBe(IDLE_FETCHER);
+        expect(t.router.state.errors).toEqual({
+          root: new ErrorResponse(404, "Not Found", null),
+        });
+      });
     });
 
     describe("fetcher error states (Error)", () => {

packages/router/router.ts

@@ -1092,11 +1092,21 @@ export function createRouter(init: RouterInit): Router {
       );
     }
 
-    let matches = matchRoutes(dataRoutes, href);
-    invariant(matches, `No matches found for fetch url: ${href}`);
-
     if (fetchControllers.has(key)) abortFetcher(key);
 
+    let matches = matchRoutes(dataRoutes, href);
+    if (!matches) {
+      let boundaryMatch = findNearestBoundary(state.matches, routeId);
+      state.fetchers.set(key, IDLE_FETCHER);
+      updateState({
+        errors: {
+          [boundaryMatch.route.id]: new ErrorResponse(404, "Not Found", null),
+        },
+        fetchers: new Map(state.fetchers),
+      });
+      return;
+    }
+
     let match =
       matches[matches.length - 1].route.index &&
       !hasNakedIndexQuery(parsePath(href).search || "")