`ErrorBoundary`

Remix 的 ErrorBoundary 元件運作方式與一般的 React 錯誤邊界相同，但有一些額外的功能。當您的路由元件中發生錯誤時，將會在其位置呈現 ErrorBoundary，並嵌套在任何父路由中。當路由的 loader 或 action 函數中發生錯誤時，也會呈現 ErrorBoundary 元件，因此該路由的所有錯誤都可以在一個位置處理。

最常見的使用案例往往是：

您可能會故意拋出 4xx Response 以觸發錯誤 UI
- 在使用者輸入錯誤時拋出 400
- 在未經授權的存取時拋出 401
- 當您找不到請求的資料時拋出 404
如果 React 在渲染期間遇到執行階段錯誤，可能會無意中拋出 Error

要取得拋出的物件，您可以使用 useRouteError hook。當拋出 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>;
  }
}