13
章节13
处理错误
在上一章中，您学习了如何使用服务器操作来修改数据。现在让我们看看如何使用 JavaScript 的 `try/catch` 语句和 Next.js API 以优雅的方式处理错误。
本章内容...
以下是我们将涵盖的主题
如何使用特殊的 `error.tsx` 文件捕获路由段中的错误，并向用户显示备用 UI。
如何使用 `notFound` 函数和 `not-found` 文件处理 404 错误（对于不存在的资源）。
在服务器操作中添加 `try/catch`
首先，让我们在服务器操作中添加 JavaScript 的 `try/catch` 语句，以便您可以优雅地处理错误。
如果您知道如何操作，请花几分钟更新您的服务器操作，或者您可以复制下面的代码
请注意 `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' };
}
}当您尝试删除发票时，您应该会在本地主机上看到一个错误。请确保在测试后并在继续下一部分之前删除此错误。
在开发过程中看到这些错误非常有用，因为您可以尽早发现任何潜在的问题。但是，您也希望向用户显示错误，以避免突然发生故障并允许您的应用程序继续运行。
这就是 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` 必须是客户端组件。
- 它接受两个 props
error：此对象是 JavaScript 原生 `Error` 对象的实例。reset：这是一个重置错误边界的函数。执行时，该函数将尝试重新渲染路由段。
当您再次尝试删除发票时，您应该会看到以下 UI
使用 `notFound` 函数处理 404 错误
另一种可以优雅地处理错误的方法是使用 `notFound` 函数。虽然 `error.tsx` 可用于捕获所有错误，但 `notFound` 可用于在您尝试获取不存在的资源时使用。
例如，访问 https://127.0.0.1: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) {
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`
import { fetchInvoiceById, fetchCustomers } from '@/app/lib/data';
import { updateInvoice } from '@/app/lib/actions';
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();
}
// ...
}完美！如果特定发票未找到，`
然后，在 `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 中错误处理的更多信息，请查看以下文档
这有帮助吗？