Next.js App Router 中的错误边界
大多数 Next.js 应用在一切顺利时运行良好，但在出现问题时会崩溃。高质量的应用会使用错误边界（error boundaries）来优雅地处理这些故障。
App Router 使用的模型与 Pages Router 不同。它依赖于 React Error Boundaries。你可以使用 error.js 文件来捕获路由中任何层级的错误。
工作原理：
• 错误会停留在最近的 error.js 边界内。
• 除非你主动要求，否则错误不会传递到全局处理器。
• 你可以为应用的不同部分显示不同的错误界面。
error.js 文件的规则：
- 它必须是一个客户端组件（Client Component）。在顶部使用
'use client'。 - 它会捕获该分段（segment）及其所有子组件中的错误。
- 你会获得一个
reset函数来重试失败的渲染。
对于网络掉线等临时问题，请使用 reset 函数。不要将其用于永久性错误。
对于根布局（root layout），请使用 global-error.js。标准的 error.js 无法捕获 layout.js 中的错误。global-error.js 是你的最后一道防线。它会替换根布局，因此它需要自己的 <html> 和 <body> 标签。
管理不同的错误类型：
- 对于缺失的数据，使用
notFound()。这会触发not-found.js。 - 对于意外故障，使用
throw Error()。这会触发error.js。
这种分离让你的应用保持整洁。寻找缺失博客文章的用户会看到 404 页面，而遇到数据库崩溃的用户则会看到错误消息。
我在一个 AI 图像生成器中使用了这种模式。该过程包含许多步骤，如 API 调用和文件上传。如果其中一步失败，错误边界会显示特定的消息。重置按钮允许用户在不丢失提示词（prompt）的情况下重试。
一个良好的结构如下：
• global-error.js：最后的安全网。
• error.js：处理根层级的错误。
• dashboard/error.js：处理仪表盘内部的错误。
• auth/error.js：处理登录或会话错误。
这种方法可以防止一个小错误导致整个网站崩溃。