`ErrorBoundary`

一个 Remix ErrorBoundary 组件的工作方式与正常的 React 错误边界相似，但它具有一些额外的功能。当您的路由组件中出现错误时，ErrorBoundary 将在其位置呈现，嵌套在任何父路由中。ErrorBoundary 组件还在路由的 loader 或 action 函数中出现错误时呈现，因此该路由的所有错误都可以在一个地方处理。

最常见的用例倾向于：

您可以故意抛出 4xx Response 来触发错误 UI
- 在用户输入错误时抛出 400
- 在未经授权访问时抛出 401
- 在找不到请求数据时抛出 404
如果 React 在渲染过程中遇到运行时错误，它可能会无意中抛出 Error

要获取抛出的对象，您可以使用 useRouteError 钩子。当抛出 Response 时，它将自动解包为 ErrorResponse 实例，并具有 state/statusText/data 字段，因此您无需在组件中使用 await response.json()。要区分抛出的 Response 和抛出的 Error，您可以使用 isRouteErrorResponse 实用程序。

import {
  isRouteErrorResponse,
  useRouteError,
} from "@remix-run/react";

export function ErrorBoundary() {
  const error = useRouteError();

  if (isRouteErrorResponse(error)) {
    return (
      <div>
        <h1>
          {error.status} {error.statusText}
        </h1>
        <p>{error.data}</p>
      </div>
    );
  } else if (error instanceof Error) {
    return (
      <div>
        <h1>Error</h1>
        <p>{error.message}</p>
        <p>The stack trace is:</p>
        <pre>{error.stack}</pre>
      </div>
    );
  } else {
    return <h1>Unknown Error</h1>;
  }
}