Next.js14从入门到实战018：NextJS基础篇之处理异常错误

翻书的熊猫
1,047 阅读4分钟

在上一章中，您学习了如何使用服务端操作更改数据。现在让我们来看看如何使用 JavaScript 的 try/catch 语句和 Next.js API 优雅地处理错误。

在本章中，你将学习……

  • 如何使用特殊的 error.tsx 文件来捕捉路由段中的错误，并向用户显示回退用户界面。
  • 如何使用 notFound 函数和 not-found 文件来处理 404 错误（针对不存在的资源）。

在服务端操作中添加 try/catch

首先，让我们在服务器操作中添加 JavaScript 的 try/catch 语句，以便优雅地处理错误。

如果您知道如何操作，请花几分钟更新服务端操作，或者复制下面的代码：

/app/lib/actions.ts

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

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

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.' };
  }
}

请注意 redirect 是如何在 try/catch 块之外被调用的。这是因为 redirect 是通过抛出一个错误来工作的，而这个错误会被 catch 块捕获。为了避免这种情况，可以在 try/catch 之后调用 redirect 。只有当 try 成功时，才能调用 redirect 。

现在，让我们检查一下服务器动作中抛出错误时会发生什么。您可以提前抛出错误。例如，在 deleteInvoice 操作中，在函数的顶部抛出一个错误：

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

尝试删除发票时，您应该会在 localhost 上看到一个错误。

image.png

在开发过程中，看到这些错误很有帮助，因为您可以及早发现任何潜在问题。不过，您也希望向用户显示错误，以避免突然发生故障，并允许应用程序继续运行。

这就是 Next.js error.tsx 文件的作用所在。

使用error.tsx处理所有错误

error.tsx 文件可用于定义路由段的用户界面边界。它可作为意外错误的 "万金油"，并允许您向用户显示备用用户界面。

在 /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 需要是一个客户端组件。
  • 它接受两个参数：
    • error ：该对象是 JavaScript 本地 Error 对象的实例。
    • reset ：该函数用于重置错误边界。执行时，该函数将尝试重新渲染路由段。

再次尝试删除发票时，应该会看到以下用户界面：

image.png

使用 notFound 函数处理404错误

另一种优雅处理错误的方法是使用 notFound 函数。 error.tsx 对于捕获所有错误非常有用，而 notFound 则可以在尝试获取不存在的资源时使用。

例如，请访问 http://localhost: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) {
  noStore();
  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 { 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();
  }
 
  // ...
}

完美！如果找不到特定发票， <Page> 现在会出错。向用户显示错误 UI。在 /edit 文件夹中创建一个 not-found.tsx 文件。

image.png

然后，在 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>
  );
}

刷新路由，现在应该可以看到以下用户界面：

image.png

需要注意的是， notFound 优先于 error.tsx ，因此当您要处理更具体的错误时，可以使用它！

avatar
文章
阅读
粉丝