404とエラーページのカスタマイズ

Author: na-trium-144

app/error.tsx

@@ -0,0 +1,47 @@
+"use client"; // Error boundaries must be Client Components
+
+import clsx from "clsx";
+import Link from "next/link";
+
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  return (
+    <div className="p-4 flex-1 w-max max-w-full mx-auto flex flex-col items-center justify-center">
+      <h1 className="text-2xl font-bold mb-4">エラー</h1>
+      <p>ページの読み込み中にエラーが発生しました。</p>
+      <pre
+        className={clsx(
+          "border-2 border-current/20 mt-4 rounded-box p-4! bg-base-300! text-base-content!",
+          "max-w-full whitespace-pre-wrap"
+        )}
+      >
+        {error.message}
+      </pre>
+      {error.digest && (
+        <p className="mt-2 text-sm text-base-content/50">
+          Digest: {error.digest}
+        </p>
+      )}
+      <div className="divider w-full self-auto!" />
+      <div className="flex flex-row gap-4">
+        <button
+          className="btn btn-warning"
+          onClick={
+            // Attempt to recover by trying to re-render the segment
+            () => reset()
+          }
+        >
+          やりなおす
+        </button>
+        <Link href="/" className="btn btn-primary">
+          トップに戻る
+        </Link>
+      </div>
+    </div>
+  );
+}

app/layout.tsx

@@ -27,7 +27,7 @@ export default function RootLayout({
         {/* mocha.css がbodyに背景色などを設定してしまうので、それを上書きしている */}
         <AutoAnonymousLogin />
         <SidebarMdProvider>
-          <div className="drawer lg:drawer-open">
+          <div className="drawer lg:drawer-open min-h-screen">
             <input
               id="drawer-toggle"
               type="checkbox"

app/lib/chatHistory.ts

@@ -37,15 +37,11 @@ async function initAll(ctx?: Partial<Context>): Promise<Context> {
     ctx.auth = await getAuthServer(ctx.drizzle);
   }
   if (!ctx.userId) {
-    try {
-      const session = await ctx.auth.api.getSession({
-        headers: await headers(),
-      });
-      if (session) {
-        ctx.userId = session.user.id;
-      }
-    } catch (e) {
-      console.error("Failed to get session in initAll:", e);
+    const session = await ctx.auth.api.getSession({
+      headers: await headers(),
+    });
+    if (session) {
+      ctx.userId = session.user.id;
     }
   }
   return ctx as Context;

app/not-found.tsx

@@ -0,0 +1,14 @@
+import Link from "next/link";
+
+export default function NotFound() {
+  return (
+    <div className="p-4 flex-1 w-max max-w-full mx-auto flex flex-col items-center justify-center">
+      <h1 className="text-2xl font-bold mb-4">404</h1>
+      <p>指定されたページが見つかりません。</p>
+      <div className="divider w-full self-auto!" />
+      <Link href="/" className="btn btn-primary">
+        トップに戻る
+      </Link>
+    </div>
+  );
+}