refactor(react-server): add ReactServerErrorContext.headers

packages/react-server/src/entry/react-server.tsx

@@ -55,26 +55,23 @@ export const handler: ReactServerHandler = async (ctx) => {
       const errorCtx = getErrorContext(e) ?? DEFAULT_ERROR_CONTEXT;
       if (rscOnly) {
         // returns empty layout to keep current layout and
-        // let browser initiate clie-side navigation for redirection error
+        // let browser initiate client-side navigation for redirection error
         const data: ServerRouterData = {
           action: { error: errorCtx },
           layout: {},
         };
         const stream = reactServerDomServer.renderToReadableStream(data, {});
         return new Response(stream, {
           headers: {
+            ...errorCtx.headers,
             "content-type": "text/x-component; charset=utf-8",
           },
         });
       }
       // TODO: general action error handling?
       return new Response(null, {
         status: errorCtx.status,
-        headers: errorCtx.redirectLocation
-          ? {
-              location: errorCtx.redirectLocation,
-            }
-          : {},
+        headers: errorCtx.headers,
       });
     }
   }

packages/react-server/src/entry/server.tsx

@@ -9,7 +9,12 @@ import {
   ssrImportPromiseCache,
 } from "../features/use-client/server";
 import { Router, RouterContext } from "../lib/client/router";
-import { getErrorContext, getStatusText } from "../lib/error";
+import {
+  DEFAULT_ERROR_CONTEXT,
+  getErrorContext,
+  getStatusText,
+  isRedirectError,
+} from "../lib/error";
 import { __global } from "../lib/global";
 import {
   ENTRY_REACT_SERVER_WRAPPER,
@@ -121,16 +126,11 @@ export async function renderHtml(
       },
     });
   } catch (e) {
-    const ctx = getErrorContext(e);
-    status = ctx?.status ?? 500;
-    if (ctx?.redirectLocation) {
-      return new Response(null, {
-        status,
-        headers: {
-          location: ctx.redirectLocation,
-        },
-      });
+    const ctx = getErrorContext(e) ?? DEFAULT_ERROR_CONTEXT;
+    if (isRedirectError(ctx)) {
+      return new Response(null, { status: ctx.status, headers: ctx.headers });
     }
+    status = ctx.status;
     // render empty as error fallback and
     // let browser render full CSR instead of hydration
     // which will replay client error boudnary from RSC error

packages/react-server/src/features/router/client.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { RedirectHandler } from "../../lib/client/error-boundary";
+import { isRedirectError } from "../../lib/error";
 import { __global } from "../../lib/global";
 import { LAYOUT_ROOT_NAME, type ServerRouterData } from "./utils";
 
@@ -25,14 +26,16 @@ export function ServerActionRedirectHandler() {
   const ctx = React.useContext(LayoutStateContext);
   const data = React.use(ctx.data);
 
-  if (data.action?.error?.redirectLocation) {
-    return (
-      <RedirectHandler
-        suspensionKey={data.action?.error}
-        redirectLocation={data.action?.error.redirectLocation}
-      />
-    );
+  if (data.action?.error) {
+    const redirect = isRedirectError(data.action.error);
+    if (redirect) {
+      return (
+        <RedirectHandler
+          suspensionKey={data.action.error}
+          redirectLocation={redirect.location}
+        />
+      );
+    }
   }
-
   return null;
 }

packages/react-server/src/lib/client/error-boundary.tsx

@@ -1,6 +1,6 @@
 import { tinyassert } from "@hiogawa/utils";
 import React from "react";
-import { getErrorContext, getStatusText } from "../error";
+import { getErrorContext, getStatusText, isRedirectError } from "../error";
 import type { ErrorPageProps } from "../router";
 import { useRouter } from "./router";
 
@@ -89,8 +89,9 @@ export class RedirectBoundary extends React.Component<React.PropsWithChildren> {
   static getDerivedStateFromError(error: Error) {
     if (!import.meta.env.SSR) {
       const ctx = getErrorContext(error);
-      if (ctx?.redirectLocation) {
-        return { redirectLocation: ctx.redirectLocation };
+      const redirect = ctx && isRedirectError(ctx);
+      if (redirect) {
+        return { redirectLocation: redirect.location };
       }
     }
     throw error;

packages/react-server/src/lib/error.tsx

@@ -1,12 +1,7 @@
 // TODO: custom (de)serialization?
 export interface ReactServerErrorContext {
   status: number;
-  // TODO: hide from public typing?
-  redirectLocation?: string;
-}
-
-export interface ReactServerRedirectErrorContext {
-  redirectLocation: string;
+  headers?: Record<string, string>;
 }
 
 export class ReactServerDigestError extends Error {
@@ -21,7 +16,18 @@ export function createError(ctx: ReactServerErrorContext) {
 }
 
 export function redirect(location: string, status: number = 302) {
-  return createError({ status, redirectLocation: location });
+  return createError({
+    status,
+    headers: { location },
+  });
+}
+
+export function isRedirectError(ctx: ReactServerErrorContext) {
+  const location = ctx.headers?.["location"];
+  if (300 <= ctx.status && ctx.status <= 399 && typeof location === "string") {
+    return { location };
+  }
+  return false;
 }
 
 export function getErrorContext(