refactor: move code

hi-ogawa · Aug 4, 2024 · 563924a · 563924a
1 parent 051fe7e
commit 563924a
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 44 deletions.
diff --git a/packages/react-server/src/entry/browser.tsx b/packages/react-server/src/entry/browser.tsx
@@ -3,7 +3,8 @@ import type { RouterHistory } from "@tanstack/history";
 import React from "react";
 import ReactDOMClient from "react-dom/client";
 import { initializeReactClientBrowser } from "../features/client-component/browser";
-import { RootErrorBoundary } from "../features/error/error-boundary";
+import { ErrorBoundary } from "../features/error/error-boundary";
+import { DefaultGlobalErrorPage } from "../features/error/global-error";
 import {
   FlightDataContext,
   LayoutRoot,
@@ -182,14 +183,14 @@ async function start() {
   const routeManifest = await importRouteManifest();
   let reactRootEl = (
     <RouterContext.Provider value={router}>
-      <RootErrorBoundary>
+      <ErrorBoundary errorComponent={DefaultGlobalErrorPage}>
         <FlightDataHandler>
           <RouteManifestContext.Provider value={routeManifest}>
             <RouteAssetLinks />
             <LayoutRoot />
           </RouteManifestContext.Provider>
         </FlightDataHandler>
-      </RootErrorBoundary>
+      </ErrorBoundary>
     </RouterContext.Provider>
   );
   if (!window.location.search.includes("__noStrict")) {

diff --git a/packages/react-server/src/features/error/error-boundary.tsx b/packages/react-server/src/features/error/error-boundary.tsx
@@ -2,12 +2,7 @@ import { tinyassert } from "@hiogawa/utils";
 import React from "react";
 import { useRouter } from "../router/client/router";
 import type { ErrorPageProps } from "../router/server";
-import {
-  getErrorContext,
-  getStatusText,
-  isNotFoundError,
-  isRedirectError,
-} from "./shared";
+import { getErrorContext, isNotFoundError, isRedirectError } from "./shared";
 
 // cf.
 // https://github.com/vercel/next.js/blob/33f8428f7066bf8b2ec61f025427ceb2a54c4bdf/packages/next/src/client/components/error-boundary.tsx
@@ -71,29 +66,6 @@ function ErrorAutoReset(props: Pick<ErrorPageProps, "reset">) {
   return null;
 }
 
-export function RootErrorBoundary(props: React.PropsWithChildren) {
-  return <ErrorBoundary errorComponent={DefaultRootErrorPage} {...props} />;
-}
-
-// TODO: customizable
-function DefaultRootErrorPage(props: ErrorPageProps) {
-  const status = props.serverError?.status;
-  const message = status
-    ? `${status} ${getStatusText(status)}`
-    : "Unknown Error";
-  return (
-    <html>
-      <title>{message}</title>
-      <body>
-        <h1>{message}</h1>
-        <div>
-          Back to <a href="/">Home</a>
-        </div>
-      </body>
-    </html>
-  );
-}
-
 export class RedirectBoundary extends React.Component<React.PropsWithChildren> {
   override state: { error: null } | { error: Error; redirectLocation: string } =
     { error: null };

diff --git a/packages/react-server/src/features/error/global-error.tsx b/packages/react-server/src/features/error/global-error.tsx
@@ -0,0 +1,25 @@
+"use client";
+
+import type { ErrorPageProps } from "../../server";
+import { getStatusText } from "./shared";
+
+// https://github.com/vercel/next.js/blob/677c9b372faef680d17e9ba224743f44e1107661/packages/next/src/build/webpack/loaders/next-app-loader.ts#L73
+// https://github.com/vercel/next.js/blob/677c9b372faef680d17e9ba224743f44e1107661/packages/next/src/client/components/error-boundary.tsx#L145
+export function DefaultGlobalErrorPage(props: ErrorPageProps) {
+  const status = props.serverError?.status;
+  const message = status
+    ? `${status} ${getStatusText(status)}`
+    : "Unknown Error";
+
+  return (
+    <html>
+      <title>{message}</title>
+      <body>
+        <h1>{message}</h1>
+        <div>
+          Back to <a href="/">Home</a>
+        </div>
+      </body>
+    </html>
+  );
+}
diff --git a/packages/react-server/src/features/error/not-found.tsx b/packages/react-server/src/features/error/not-found.tsx
@@ -0,0 +1,12 @@
+// https://github.com/vercel/next.js/blob/8f5f0ef141a907d083eedb7c7aca52b04f9d258b/packages/next/src/client/components/not-found-error.tsx#L34-L39
+export function DefaultNotFoundPage() {
+  return (
+    <>
+      <title>404 Not Found</title>
+      <h1>404 Not Found</h1>
+      <div>
+        Back to <a href="/">Home</a>
+      </div>
+    </>
+  );
+}
diff --git a/packages/react-server/src/features/router/server.tsx b/packages/react-server/src/features/router/server.tsx
@@ -1,5 +1,6 @@
 import { sortBy, tinyassert } from "@hiogawa/utils";
 import React from "react";
+import { DefaultNotFoundPage } from "../error/not-found";
 import { type ReactServerErrorContext } from "../error/shared";
 import { renderMetadata } from "../meta/server";
 import type { Metadata } from "../meta/utils";
@@ -58,18 +59,6 @@ export function generateRouteModuleTree(globEntries: Record<string, any>) {
   return { tree, manifest };
 }
 
-// https://github.com/vercel/next.js/blob/8f5f0ef141a907d083eedb7c7aca52b04f9d258b/packages/next/src/client/components/not-found-error.tsx#L34-L39
-function DefaultNotFoundPage() {
-  return (
-    <>
-      <h1>404 Not Found</h1>
-      <div>
-        Back to <a href="/">Home</a>
-      </div>
-    </>
-  );
-}
-
 // use own "use client" components as external
 function importRuntimeClient(): Promise<typeof import("../../runtime/client")> {
   return import("@hiogawa/react-server/runtime/client" as string);