fix: expose leader/action headers on error response sin static handler (#9140)

Author: brophdawg11

packages/router/__tests__/router-test.ts

@@ -9914,7 +9914,37 @@ describe("a router", () => {
       });
 
       describe("headers", () => {
-        it("should expose headers from loader responses", async () => {
+        it("should expose headers from action/loader responses", async () => {
+          let { query } = createStaticHandler([
+            {
+              id: "root",
+              path: "/",
+              loader: () => new Response(null, { headers: { two: "2" } }),
+              children: [
+                {
+                  id: "child",
+                  index: true,
+                  action: () => new Response(null, { headers: { one: "1" } }),
+                  loader: () => new Response(null, { headers: { three: "3" } }),
+                },
+              ],
+            },
+          ]);
+          let context = (await query(
+            createSubmitRequest("/?index")
+          )) as StaticHandlerContext;
+          expect(Array.from(context.actionHeaders.child.entries())).toEqual([
+            ["one", "1"],
+          ]);
+          expect(Array.from(context.loaderHeaders.root.entries())).toEqual([
+            ["two", "2"],
+          ]);
+          expect(Array.from(context.loaderHeaders.child.entries())).toEqual([
+            ["three", "3"],
+          ]);
+        });
+
+        it("should expose headers from loader error responses", async () => {
           let { query } = createStaticHandler([
             {
               id: "root",
@@ -9924,7 +9954,9 @@ describe("a router", () => {
                 {
                   id: "child",
                   index: true,
-                  loader: () => new Response(null, { headers: { two: "2" } }),
+                  loader: () => {
+                    throw new Response(null, { headers: { two: "2" } });
+                  },
                 },
               ],
             },
@@ -9940,18 +9972,18 @@ describe("a router", () => {
           ]);
         });
 
-        it("should expose headers from action responses", async () => {
+        it("should expose headers from action error responses", async () => {
           let { query } = createStaticHandler([
             {
               id: "root",
               path: "/",
-              loader: () => new Response(null, { headers: { two: "2" } }),
               children: [
                 {
                   id: "child",
                   index: true,
-                  action: () => new Response(null, { headers: { one: "1" } }),
-                  loader: () => new Response(null, { headers: { three: "3" } }),
+                  action: () => {
+                    throw new Response(null, { headers: { one: "1" } });
+                  },
                 },
               ],
             },
@@ -9962,12 +9994,6 @@ describe("a router", () => {
           expect(Array.from(context.actionHeaders.child.entries())).toEqual([
             ["one", "1"],
           ]);
-          expect(Array.from(context.loaderHeaders.root.entries())).toEqual([
-            ["two", "2"],
-          ]);
-          expect(Array.from(context.loaderHeaders.child.entries())).toEqual([
-            ["three", "3"],
-          ]);
         });
       });
     });

packages/router/router.ts

@@ -1852,8 +1852,8 @@ export function unstable_createStaticHandler(
           errors: {
             [boundaryMatch.route.id]: result.error,
           },
-          // Note: This is unused in queryRoute as we will return the raw error,
-          // or construct a response from the ErrorResponse
+          // Note: statusCode + headers are unused here since queryRoute will
+          // return the raw Response or value
           statusCode: 500,
           loaderHeaders: {},
           actionHeaders: {},
@@ -1865,13 +1865,11 @@ export function unstable_createStaticHandler(
         loaderData: {},
         actionData: { [actionMatch.route.id]: result.data },
         errors: null,
-        // Note: This is unused in queryRoute as we will return the raw
-        // Response or value
+        // Note: statusCode + headers are unused here since queryRoute will
+        // return the raw Response or value
         statusCode: 200,
         loaderHeaders: {},
-        actionHeaders: {
-          ...(result.headers ? { [actionMatch.route.id]: result.headers } : {}),
-        },
+        actionHeaders: {},
       };
     }
 
@@ -1890,7 +1888,9 @@ export function unstable_createStaticHandler(
           ? result.error.status
           : 500,
         actionData: null,
-        actionHeaders: {},
+        actionHeaders: {
+          ...(result.headers ? { [actionMatch.route.id]: result.headers } : {}),
+        },
       };
     }
 
@@ -2342,6 +2342,7 @@ async function callLoaderOrAction(
       return {
         type: resultType,
         error: new ErrorResponse(status, result.statusText, data),
+        headers: result.headers,
       };
     }
 
@@ -2449,9 +2450,13 @@ function processRouteLoaderData(
           ? result.error.status
           : 500;
       }
+      if (result.headers) {
+        loaderHeaders[id] = result.headers;
+      }
     } else if (isDeferredResult(result)) {
       activeDeferreds?.set(id, result.deferredData);
       loaderData[id] = result.deferredData.data;
+      // TODO: Add statusCode/headers once we wire up streaming in Remix
     } else {
       loaderData[id] = result.data;
       // Error status codes always override success status codes, but if all

packages/router/utils.ts

@@ -49,6 +49,7 @@ export interface RedirectResult {
 export interface ErrorResult {
   type: ResultType.error;
   error: any;
+  headers?: Headers;
 }
 
 /**