`ErrorBoundary`

Remix 的 ErrorBoundary 组件的工作方式与普通的 React 错误边界类似，但有一些额外的功能。当你的路由组件中发生错误时，ErrorBoundary 将会在其位置渲染，并嵌套在任何父路由内。当路由的 loader 或 action 函数中发生错误时，也会渲染 ErrorBoundary 组件，因此该路由的所有错误都可以在一个地方处理。

最常见的用例往往是：

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

要获取抛出的对象，你可以使用 useRouteError 钩子。当抛出一个 Response 时，它会自动解包成一个带有 state/statusText/data 字段的 ErrorResponse 实例，因此你无需在组件中处理 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>;
  }
}