43 lines
1.5 KiB
TypeScript
43 lines
1.5 KiB
TypeScript
"use client";
|
||
|
||
/**
|
||
* App Router の Error Boundary。
|
||
*
|
||
* 主な発火経路は `app/page.tsx` の Zod `safeParse` 失敗（`data/*.json` の形式不正）。
|
||
* 受講生がデータを書き換えて壊した場合に「何が悪いか」を画面で読み取れるよう、
|
||
* `error.message` をそのまま表示し、`reset()` で再試行ボタンを出す。
|
||
*
|
||
* Next.js の規約により Client Component（`"use client"`）必須。
|
||
*/
|
||
|
||
import { Button } from "@/components/ui/button";
|
||
|
||
export default function Error({
|
||
error,
|
||
reset,
|
||
}: {
|
||
error: Error & { digest?: string };
|
||
reset: () => void;
|
||
}) {
|
||
return (
|
||
<main className="flex min-h-screen flex-col items-center justify-center gap-6 bg-background px-6 py-10 text-foreground">
|
||
<div className="flex max-w-2xl flex-col gap-3 text-center">
|
||
<h1 className="text-lg font-semibold">読み込みに失敗しました</h1>
|
||
<p className="text-sm text-muted-foreground">
|
||
画面を表示するためのデータを準備できませんでした。
|
||
<br />
|
||
下のメッセージを参考に{" "}
|
||
<code className="rounded bg-muted px-1 py-0.5 text-xs">
|
||
data/*.json
|
||
</code>{" "}
|
||
を見直してください。
|
||
</p>
|
||
</div>
|
||
<pre className="max-h-64 max-w-2xl overflow-auto rounded-lg border border-border bg-card px-4 py-3 text-left text-xs leading-relaxed whitespace-pre-wrap text-foreground">
|
||
{error.message}
|
||
</pre>
|
||
<Button onClick={reset}>再読み込み</Button>
|
||
</main>
|
||
);
|
||
}
|