Propagate middleware thrown non-redirect responses to the boundary (#14182)

Author: brophdawg11

.changeset/heavy-months-work.md

@@ -0,0 +1,5 @@
+---
+"react-router": patch
+---
+
+Propagate non-redirect Responses thrown from middleware to the error boundary on document/data requests

docs/how-to/middleware.md

@@ -445,7 +445,7 @@ const authMiddleware = async ({ request, context }) => {
 
 ### `next()` and Error Handling
 
-React Router contains built-in error handling via the route [`ErrorBoundary`][ErrorBoundary] export. Just like when a `action`/`loader` throws (_mostly_), if a `middleware` throws it will be caught and handled at the appropriate [`ErrorBoundary`] and a [`Response`][Response] will be returned through the ancestor `next()` call. This means that the `next()` function should never throw and should always return a [`Response`][Response], so you don't need to worry about wrapping it in a try/catch.
+React Router contains built-in error handling via the route [`ErrorBoundary`][ErrorBoundary] export. Just like when a `action`/`loader` throws, if a `middleware` throws it will be caught and handled at the appropriate [`ErrorBoundary`] and a [`Response`][Response] will be returned through the ancestor `next()` call. This means that the `next()` function should never throw and should always return a [`Response`][Response], so you don't need to worry about wrapping it in a try/catch.
 
 This behavior is important to allow middleware patterns such as automatically setting required headers on outgoing responses (i.e., committing a session) from a root `middleware`. If any error from a `middleware` caused `next()` to `throw`, we'd miss the execution of ancestor middlewares on the way out and those required headers wouldn't be set.
 
@@ -473,8 +473,6 @@ export const unstable_middleware: Route.unstable_MiddlewareFunction[] =
   ];
 ```
 
-<docs-info>We say _"mostly"_ above because there is a small/nuanced difference if you throw a non-redirect [`Response`][Response] in a `action`/`loader` versus throwing a [`Response`][Response] in a `middleware` (redirects behave the same).<br/><br/>Throwing a non-redirect response from a `middleware` will use that response directly and return it up through the parent `next()` call. This differs from the behavior in `action`/`loader` where that response will be converted to an [`ErrorResponse`][ErrorResponse] to be rendered by the [`ErrorBoundary`][ErrorBoundary].<br/><br/>The difference here is because `action`/`loader` are expected to return data which is then provided to components for rendering. But middleware is expected to return a [`Response`][Response] — so if you return or throw one, we will use it directly. If you want to throw an error with a status code to an [`ErrorBoundary`][ErrorBoundary] from middleware, you should use the [`data`][data] utility.</docs-info>
-
 ## Changes to `getLoadContext`/`AppLoadContext`
 
 <docs-info>This only applies if you are using a custom server and a custom `getLoadContext` function</docs-info>

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

@@ -2485,6 +2485,34 @@ describe("context/middleware", () => {
         });
       });
 
+      it("handles thrown Responses at the ErrorBoundary", async () => {
+        let handler = createStaticHandler([
+          {
+            path: "/",
+            unstable_middleware: [
+              async (_, next) => {
+                throw new Response("Error", { status: 401 });
+              },
+            ],
+            loader() {
+              return "INDEX";
+            },
+          },
+        ]);
+
+        let request = new Request("http://localhost/");
+        let res = (await handler.query(request, {
+          unstable_generateMiddlewareResponse: async (q) =>
+            respondWithJson(await q(request)),
+        })) as Response;
+
+        let staticContext = (await res.json()) as StaticHandlerContext;
+        expect(staticContext.errors).toEqual({
+          "0": new ErrorResponseImpl(401, undefined, "Error"),
+        });
+        expect(staticContext.statusCode).toBe(401);
+      });
+
       it("allows thrown redirects before next()", async () => {
         let handler = createStaticHandler([
           {

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

@@ -3647,10 +3647,25 @@ export function createStaticHandler(
             return res;
           },
           async (error, routeId) => {
-            if (isResponse(error)) {
+            // Redirects propagate verbatim
+            if (isRedirectResponse(error)) {
               return error;
             }
 
+            // All other thrown responses during document/data request bubble
+            // to the boundary
+            if (isResponse(error)) {
+              try {
+                error = new ErrorResponseImpl(
+                  error.status,
+                  error.statusText,
+                  await parseResponseBody(error),
+                );
+              } catch (e) {
+                error = e;
+              }
+            }
+
             if (isDataWithResponseInit(error)) {
               // Convert thrown data() values to ErrorResponses for the UI
               error = dataWithResponseInitToErrorResponse(error);
@@ -6031,6 +6046,18 @@ async function callLoaderOrAction({
   return result;
 }
 
+async function parseResponseBody(response: Response) {
+  let contentType = response.headers.get("Content-Type");
+
+  // Check between word boundaries instead of startsWith() due to the last
+  // paragraph of https://httpwg.org/specs/rfc9110.html#field.content-type
+  if (contentType && /\bapplication\/json\b/.test(contentType)) {
+    return response.body == null ? null : response.json();
+  }
+
+  return response.text();
+}
+
 async function convertDataStrategyResultToDataResult(
   dataStrategyResult: DataStrategyResult,
 ): Promise<DataResult> {
@@ -6040,18 +6067,7 @@ async function convertDataStrategyResultToDataResult(
     let data: any;
 
     try {
-      let contentType = result.headers.get("Content-Type");
-      // Check between word boundaries instead of startsWith() due to the last
-      // paragraph of https://httpwg.org/specs/rfc9110.html#field.content-type
-      if (contentType && /\bapplication\/json\b/.test(contentType)) {
-        if (result.body == null) {
-          data = null;
-        } else {
-          data = await result.json();
-        }
-      } else {
-        data = await result.text();
-      }
+      data = await parseResponseBody(result);
     } catch (e) {
       return { type: ResultType.error, error: e };
     }