Bubble client middleware errors before next to the right boundary (#14138)

Author: brophdawg11

.changeset/few-papayas-admire.md

@@ -0,0 +1,5 @@
+---
+"react-router": patch
+---
+
+Bubble client-side middleware errors prior to `next` to the appropriate ancestor error boundary

integration/middleware-test.ts

@@ -508,7 +508,10 @@ test.describe("Middleware", () => {
       await page.waitForSelector('a:has-text("Link")');
 
       (await page.getByRole("link"))?.click();
-      await page.waitForSelector('h1:has-text("broken!")');
+      // Bubbles to the root error boundary in SPA mode because every route has
+      // a loader to load the client assets
+      await page.waitForSelector('h1:has-text("Application Error")');
+      await page.waitForSelector('pre:has-text("Error: broken!")');
 
       appFixture.close();
     });
@@ -1145,7 +1148,10 @@ test.describe("Middleware", () => {
       await page.waitForSelector('a:has-text("Link")');
 
       (await page.getByRole("link"))?.click();
-      await page.waitForSelector('h1:has-text("broken!")');
+      // Bubbles to the root error boundary in SPA mode because every route has
+      // a loader to load the client assets
+      await page.waitForSelector('h1:has-text("Application Error")');
+      await page.waitForSelector('pre:has-text("Error: broken!")');
 
       appFixture.close();
     });

packages/react-router/__tests__/router/context-middleware-test.ts

@@ -1374,6 +1374,57 @@ describe("context/middleware", () => {
           errors: null,
         });
       });
+
+      it("throwing from a middleware before next bubbles up to the highest route with a loader", async () => {
+        router = createRouter({
+          history: createMemoryHistory(),
+          routes: [
+            {
+              path: "/",
+            },
+            {
+              id: "a",
+              path: "/a",
+              hasErrorBoundary: true,
+              children: [
+                {
+                  id: "b",
+                  path: "b",
+                  hasErrorBoundary: true,
+                  loader: () => "B",
+                  children: [
+                    {
+                      id: "c",
+                      path: "c",
+                      hasErrorBoundary: true,
+                      children: [
+                        {
+                          id: "d",
+                          path: "d",
+                          hasErrorBoundary: true,
+                          unstable_middleware: [
+                            () => {
+                              throw new Error("D ERROR");
+                            },
+                          ],
+                          loader: () => "D",
+                        },
+                      ],
+                    },
+                  ],
+                },
+              ],
+            },
+          ],
+        });
+
+        await router.navigate("/a/b/c/d");
+
+        expect(router.state.loaderData).toEqual({});
+        expect(router.state.errors).toEqual({
+          b: new Error("D ERROR"),
+        });
+      });
     });
   });
 

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

@@ -5369,13 +5369,49 @@ async function defaultDataStrategyWithMiddleware(
     return defaultDataStrategy(args);
   }
 
+  let didCallHandler = false;
   return runClientMiddlewarePipeline(
     args,
-    () => defaultDataStrategy(args),
-    (error, routeId) => ({ [routeId]: { type: "error", result: error } }),
+    () => {
+      didCallHandler = true;
+      return defaultDataStrategy(args);
+    },
+    (error, routeId) =>
+      clientMiddlewareErrorHandler(
+        error,
+        routeId,
+        args.matches,
+        didCallHandler,
+      ),
   );
 }
 
+function clientMiddlewareErrorHandler(
+  error: unknown,
+  routeId: string,
+  matches: AgnosticDataRouteMatch[],
+  didCallHandler: boolean,
+): Record<string, DataStrategyResult> {
+  if (didCallHandler) {
+    return {
+      [routeId]: { type: "error", result: error },
+    };
+  } else {
+    // We never even got to the handlers, so we've got no data.
+    // Find the boundary at or above the source of the middleware
+    // error or the highest loader. We can't render any UI below
+    // the highest loader since we have no loader data available
+    let boundaryRouteId = findNearestBoundary(
+      matches,
+      matches.find((m) => m.route.id === routeId || m.route.loader)?.route.id ||
+        routeId,
+    ).route.id;
+    return {
+      [boundaryRouteId]: { type: "error", result: error },
+    };
+  }
+}
+
 export async function runServerMiddlewarePipeline(
   args: (
     | LoaderFunctionArgs<unstable_RouterContextProvider>
@@ -5798,10 +5834,12 @@ async function callDataStrategyImpl(
         ) & {
           matches: DataStrategyMatch[];
         };
+        let didCallHandler = false;
         return runClientMiddlewarePipeline(
           typedDataStrategyArgs,
-          () =>
-            cb({
+          () => {
+            didCallHandler = true;
+            return cb({
               ...typedDataStrategyArgs,
               fetcherKey,
               unstable_runClientMiddleware: () => {
@@ -5810,10 +5848,15 @@ async function callDataStrategyImpl(
                     "`unstable_runClientMiddleware` handler",
                 );
               },
-            }),
-          (error: unknown, routeId: string) => ({
-            [routeId]: { type: "error", result: error },
-          }),
+            });
+          },
+          (error, routeId) =>
+            clientMiddlewareErrorHandler(
+              error,
+              routeId,
+              matches,
+              didCallHandler,
+            ),
         );
       };