チャプター13

エラーハンドリング

前のチャプターでは、Server Actions を使用してデータを変更する方法を学びました。ここでは、JavaScript の try/catch ステートメントと、捕捉されない例外に対する Next.js API を使用して、エラーを適切に処理する方法を見ていきましょう。

このチャプターの内容...

カバーするトピックはこちらです

特別な error.tsx ファイルを使用して、ルートセグメントのエラーを捕捉し、ユーザーにフォールバックUIを表示する方法。

notFound 関数と not-found ファイルを使用して、404エラー（存在しないリソースの場合）を処理する方法。

Server Actions に `try/catch` を追加する

まず、JavaScript の try/catch ステートメントを Server Actions に追加し、エラーを適切に処理できるようにしましょう。

この方法を知っている場合は、数分かけて Server Actions を更新してください。または、以下のコードをコピーすることもできます。

redirect が try/catch ブロックの外で呼び出されていることに注目してください。これは、redirect がエラーをスローすることで機能するためで、そのエラーは catch ブロックで捕捉されてしまいます。これを避けるには、try/catch の**後に** redirect を呼び出すことができます。redirect は try が成功した場合にのみ到達可能です。

データベースの問題を捕捉し、Server Action から役立つメッセージを返すことで、これらのエラーを適切に処理しています。

アクションで捕捉されない例外が発生した場合はどうなるでしょうか？これを手動でエラーをスローしてシミュレートできます。たとえば、deleteInvoice アクションの関数の先頭でエラーをスローしてみてください。

/app/lib/actions.ts

export async function deleteInvoice(id: string) {
  throw new Error('Failed to Delete Invoice');
 
  // Unreachable code block
  await sql`DELETE FROM invoices WHERE id = ${id}`;
  revalidatePath('/dashboard/invoices');
}

請求書を削除しようとすると、localhost でエラーが表示されるはずです。本番環境に移行する際には、予期せぬ事態が発生した場合にユーザーにメッセージをより適切に表示したいと思うでしょう。

ここで Next.js の error.tsx ファイルが役立ちます。テスト後、次のセクションに進む前に、この手動で追加したエラーを必ず削除してください。

`error.tsx` ですべてのエラーを処理する

error.tsx ファイルは、ルートセグメントの UI バウンダリを定義するために使用できます。予期しないエラーに対する**包括的な**キャッチとして機能し、ユーザーにフォールバックUIを表示できます。

`/dashboard/invoices` フォルダー内に、error.tsx という新しいファイルを作成し、以下のコードを貼り付けてください。

/dashboard/invoices/error.tsx

'use client';
 
import { useEffect } from 'react';
 
export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  useEffect(() => {
    // Optionally log the error to an error reporting service
    console.error(error);
  }, [error]);
 
  return (
    <main className="flex h-full flex-col items-center justify-center">
      <h2 className="text-center">Something went wrong!</h2>
      <button
        className="mt-4 rounded-md bg-blue-500 px-4 py-2 text-sm text-white transition-colors hover:bg-blue-400"
        onClick={
          // Attempt to recover by trying to re-render the invoices route
          () => reset()
        }
      >
        Try again
      </button>
    </main>
  );
}

上記のコードについていくつか気づく点があります

**"use client"** - error.tsx はクライアントコンポーネントである必要があります。
2つのプロップを受け取ります
- error: このオブジェクトは、JavaScript のネイティブ Error オブジェクトのインスタンスです。
- reset: これはエラーバウンダリをリセットするための関数です。実行されると、関数はルートセグメントの再レンダリングを試みます。

請求書を再度削除しようとすると、以下のUIが表示されるはずです。

The error.tsx file showing the props it accepts

`notFound` 関数で404エラーを処理する

エラーを適切に処理するもう一つの方法は、notFound 関数を使用することです。error.tsx は捕捉されない例外を捕捉するのに役立ちますが、notFound は存在しないリソースを取得しようとした場合に使用できます。

例えば、https://:3000/dashboard/invoices/2e94d1ed-d220-449f-9f11-f0bbceed9645/edit にアクセスしてみてください。

これはデータベースに存在しない偽のUUIDです。

error.tsx が定義されている `/invoices` の子ルートであるため、すぐに error.tsx が起動するのがわかるでしょう。

しかし、より具体的にしたい場合は、アクセスしようとしているリソースが見つからなかったことをユーザーに伝えるために404エラーを表示できます。

data.ts 内の fetchInvoiceById 関数に移動し、返された invoice をコンソールにログ出力することで、リソースが見つからなかったことを確認できます。

/app/lib/data.ts

export async function fetchInvoiceById(id: string) {
  try {
    // ...
 
    console.log(invoice); // Invoice is an empty array []
    return invoice[0];
  } catch (error) {
    console.error('Database Error:', error);
    throw new Error('Failed to fetch invoice.');
  }
}

請求書がデータベースに存在しないことがわかったので、notFound を使用してそれを処理しましょう。`/dashboard/invoices/[id]/edit/page.tsx` に移動し、`'next/navigation'` から { notFound } をインポートしてください。

次に、請求書が存在しない場合に notFound を呼び出す条件式を使用できます。

/dashboard/invoices/[id]/edit/page.tsx

import { fetchInvoiceById, fetchCustomers } from '@/app/lib/data';
import { notFound } from 'next/navigation';
 
export default async function Page(props: { params: Promise<{ id: string }> }) {
  const params = await props.params;
  const id = params.id;
  const [invoice, customers] = await Promise.all([
    fetchInvoiceById(id),
    fetchCustomers(),
  ]);
 
  if (!invoice) {
    notFound();
  }
 
  // ...
}

次に、ユーザーにエラーUIを表示するために、`/edit` フォルダー内に not-found.tsx ファイルを作成します。

The not-found.tsx file inside the edit folder

not-found.tsx ファイル内に、以下のコードを貼り付けてください。

/dashboard/invoices/[id]/edit/not-found.tsx

import Link from 'next/link';
import { FaceFrownIcon } from '@heroicons/react/24/outline';
 
export default function NotFound() {
  return (
    <main className="flex h-full flex-col items-center justify-center gap-2">
      <FaceFrownIcon className="w-10 text-gray-400" />
      <h2 className="text-xl font-semibold">404 Not Found</h2>
      <p>Could not find the requested invoice.</p>
      <Link
        href="/dashboard/invoices"
        className="mt-4 rounded-md bg-blue-500 px-4 py-2 text-sm text-white transition-colors hover:bg-blue-400"
      >
        Go Back
      </Link>
    </main>
  );
}