处理错误

加载失败。数据库宕机、记录丢失，或者程序抛出异常。没有应对计划的话，一次失败的 await 就会让整个界面也跟着出问题。

error.jsx 是 loading.jsx 的镜像：思路相同，结果相反。把它放在页面旁边，它就会捕获该页面在渲染时抛出的任何错误：

app/
    menu/
        page.jsx
        loading.jsx    while it works
        error.jsx      when it doesn't

与 loading.jsx 不同，它有一项硬性要求：

'use client';

export default function Error({ error, reset }) {
    return (
        <div>
            <h2>Couldn't load the menu</h2>
            <button onClick={reset}>Try again</button>
        </div>
    );
}

error.jsx 必须是客户端组件。 原因就在 JSX 中：onClick。重试按钮具有交互性，而交互功能需要由发送到浏览器的组件来实现。如果不添加 'use client'，你就会遇到上一章中的事件处理程序错误，而且还是在本该处理错误的页面上遇到这个错误。

它接收两个属性：

• error：抛出的错误，你可以记录它
• reset：一个会重新渲染失败单元的函数。调用它后，页面会重试

reset 让这不只是一个更美观的崩溃界面。一次失败的故障往往第二次就能正常运行，而且用户完全不必重新加载任何内容。

和其他特殊文件一样，error.jsx 会覆盖它所在的文件夹及其下的所有内容，因此根目录附近的一个文件就能为网站的整个单元提供安全保障。