ErrorBoundary

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>;
  }
}