はじめに

export async function createInvoice(formData: FormData) {
  const { customerId, amount, status } = CreateInvoice.parse({
    customerId: formData.get('customerId'),
    amount: formData.get('amount'),
    status: formData.get('status'),
  });
 
  const amountInCents = amount * 100;
  const date = new Date().toISOString().split('T')[0];
 
  try {
    await sql`
      INSERT INTO invoices (customer_id, amount, status, date)
      VALUES (${customerId}, ${amountInCents}, ${status}, ${date})
    `;
  } catch (error) {
    return {
      message: 'Database Error: Failed to Create Invoice.',
    };
  }
 
  revalidatePath('/dashboard/invoices');
  redirect('/dashboard/invoices');
}

/app/lib/actions.ts

export async function updateInvoice(id: string, formData: FormData) {
  const { customerId, amount, status } = UpdateInvoice.parse({
    customerId: formData.get('customerId'),
    amount: formData.get('amount'),
    status: formData.get('status'),
  });
 
  const amountInCents = amount * 100;
 
  try {
    await sql`
        UPDATE invoices
        SET customer_id = ${customerId}, amount = ${amountInCents}, status = ${status}
        WHERE id = ${id}
      `;
  } catch (error) {
    return { message: 'Database Error: Failed to Update Invoice.' };
  }
 
  revalidatePath('/dashboard/invoices');
  redirect('/dashboard/invoices');
}

/app/lib/actions.ts

export async function deleteInvoice(id: string) {
  try {
    await sql`DELETE FROM invoices WHERE id = ${id}`;
    revalidatePath('/dashboard/invoices');
    return { message: 'Deleted Invoice.' };
  } catch (error) {
    return { message: 'Database Error: Failed to Delete Invoice.' };
  }
}

これで、処理が成功した場合はリダイレクトして、

失敗した場合は、エラーをはくようになりました。

実験的にdeleteInvoiceでエラーをはくようにしてみましょう。

/app/lib/actions.ts

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

この状態で削除ボタンを押すと、エラーがブラウザに表示されます。

そこでerror.tsxを使いましょう。

error.tsx

error.tsxというファイルはエラーをキャッチし、フォールバックUIを表示してくれます。

/dashboard/invoicesにerror.tsxを作成します。

.
└── invoices/
    ├── [id]/
    │   └── edit/
    │       └── page.tsx
    ├── create/
    │   └── page.tsx
    ├── error.tsx // new!
    └── page.tsx

次のコードを貼り付けます。

/dashboard/invoices/erorr.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>
  );
}

error.tsxはクライアントコンポーネントである必要があるそうです

そして、2 つのPropsを受け入れます。

error: このオブジェクトは JavaScript のネイティブのインスタンスです

reset: エラーをリセットする機能です。実行されると、関数はルートセグメントの再レンダリングを試みます。

これで再度削除ボタンを押すと、次のようなUIが表示されるようになりました。

not-found.tsx

エラーを適切に処理するもう 1 つの方法は、notFound関数を使用することです。

error.tsxではすべてのエラーをキャッチすることができますが、

存在しないリソースを取得しようとするときにはnot-found.tsxというファイルを使用できます。

/dashboard/invoices/[id]/edit/page.tsxに移動しましょう。

next/navigationからnotFoundをimportし、

もし、invoiceが空だったら、notFound()関数を実行します。

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

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

これで、リソースが見つからない場合にエラーがはかれるようになりました。

その場合のフォールバックUIを記述するために、/edit内にnot-found.tsxを作成します。

.
└── invoices/
    ├── [id]/
    │   └── edit/
    │       ├── page.tsx
    │       └── not-found.tsx // new!
    ├── create/
    │   └── page.tsx
    ├── error.tsx
    └── page.tsx

次に、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>
  );
}

これで、存在しないリソースhttp://localhost:3000/dashboard/invoices/2e94d1ed-d220-449f-9f11-f0bbceed9645/editにアクセスしてみましょう。

404ページが表示されましたね。

not-found.tsxはerror.tsxより優先されるため、より具体的なエラーを処理したい場合にこれを利用できます。

おわりに

便利ですね。

次の記事