チャプター13

エラー処理

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

このチャプターでは...

取り上げるトピックは以下の通りです。

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

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

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

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

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

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

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

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

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 という名前の新しいファイルを作成し、次のコードを貼り付けてください。

'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 エラーの処理

エラーを優雅に処理するもう 1 つの方法は、notFound 関数を使用することです。error.tsx はキャッチされない例外の処理に役立ちますが、notFound は存在しないリソースを取得しようとしたときに使用できます。

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

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

error.tsx が機能しているのがすぐにわかります。これは、error.tsx が定義されている /invoices の子ルートであるためです。

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

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

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 を呼び出すことができます。

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 ファイル内に、次のコードを貼り付けます。

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>
  );
}

ルートをリフレッシュすると、次の UI が表示されるはずです。

これは覚えておくべきことです。notFound は error.tsx よりも優先されるため、より具体的なエラーを処理したい場合にそれを利用できます。

さらに読む

Next.js でのエラー処理についてさらに詳しく知りたい場合は、次のドキュメントを参照してください。

エラー処理

Server Actions に try/catch を追加する

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

notFound 関数による 404 エラーの処理

さらに読む

チャプターを完了しました。13

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

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

`notFound` 関数による 404 エラーの処理