リダイレクトのエラーハンドリング

Author: na-trium-144

app/(docs)/@chat/error.tsx

@@ -0,0 +1,31 @@
+"use client"; // Error boundaries must be Client Components
+
+import clsx from "clsx";
+import { ChatAreaContainer } from "./chat/[chatId]/chatArea";
+
+export default function Error({
+  error,
+  // reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  return (
+    <ChatAreaContainer chatId={"error"}>
+      <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>
+      )}
+    </ChatAreaContainer>
+  );
+}

app/(docs)/@docs/default.tsx

@@ -1,23 +1,38 @@
 "use client";
 
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import Loading from "./[lang]/[pageId]/loading";
 import { getRedirectFromChat } from "@/actions/getRedirectFromChat";
 import { usePathname, useRouter } from "next/navigation";
+import ErrorPage from "@/error";
 
 // /chat/チャットid に直接アクセスした場合には、
 // チャットからそれに対応するページidを取得し、そのドキュメントに自動でリダイレクトする。
 export default function DocsDefaultPage() {
   const pathname = usePathname();
   const router = useRouter();
+  const [error, setError] = useState<unknown>(null);
   useEffect(() => {
     if (pathname.startsWith("/chat/")) {
       const chatId = pathname.split("/chat/")[1];
-      getRedirectFromChat(chatId).then((path) => {
-        router.replace(path);
-      });
+      getRedirectFromChat(chatId)
+        .then((path) => {
+          router.replace(path);
+        })
+        .catch((err) => {
+          console.error("Failed to get redirect path from chat:", err);
+          setError(err);
+        });
+    } else if (pathname === "/chat") {
+      router.replace("/");
+    } else {
+      throw new Error(`Invalid path: ${pathname}`);
     }
   }, [pathname, router]);
 
+  if (error) {
+    return <ErrorPage error={error} reset={() => router.refresh()} />;
+  }
+
   return <Loading />;
 }

app/(docs)/@docs/error.tsx

@@ -0,0 +1,5 @@
+"use client";
+
+import Error from "@/error";
+
+export default Error;

app/error.tsx

@@ -3,11 +3,11 @@
 import clsx from "clsx";
 import Link from "next/link";
 
-export default function Error({
+export default function ErrorPage({
   error,
   reset,
 }: {
-  error: Error & { digest?: string };
+  error: unknown;
   reset: () => void;
 }) {
   return (
@@ -20,11 +20,11 @@ export default function Error({
           "max-w-full whitespace-pre-wrap"
         )}
       >
-        {error.message}
+        {error instanceof Error ? error.message : String(error)}
       </pre>
-      {error.digest && (
+      {"digest" in (error as { digest: string }) && (
         <p className="mt-2 text-sm text-base-content/50">
-          Digest: {error.digest}
+          Digest: {(error as { digest: string }).digest}
         </p>
       )}
       <div className="divider w-full self-auto!" />