Closed2024/03/30にクローズ7

💽 Remixのエラーハンドリング

はじめに

参考になりそうなサイト

Root Error Boundary

Remixには、デフォルトでErrorBoundaryが組み込まれている
オリジナルのBoundaryを作るには、app/roor.tsxからexportすることで実現可能

app/root.tsx

export function ErrorBoundary() {
  const error = useRouteError();
  console.error(error);
  return (
    <html>
      <head>
        <title>Oh no!</title>
        <Meta />
        <Links />
      </head>
      <body>
        {/* add the UI you want your users to see */}
        <Scripts />
      </body>
    </html>
  );
}

Nested Error Boundary

ネストされたルートからErrorBoundaryでは、そのルート以下のすべてのエラーがキャッチされる
全ルートにErrorBoudnaryを作る必要はなく、ない場合は最も近いBoundaryにバブルアップされる
親ルートの他のUIは正常にレンダリングされるので、クライアント側での状態に影響はない

参考

useRouteErrorを使えば、action、loader中にthrowされたerrorにアクセス可能
そしてErrorBoudaryで使用できる

routes/some-route.tsx

export function ErrorBoundary() {
  const error = useRouteError();
  return <div>{error.message}</div>;
}

ここから動画について書いていく

Remixでエラーハンドリングがどのように機能するか？

Error Boundaryは、レスポンスとエラーの両方をキャッチする
- もし対処していない場合は、アプリが落ちてしまう可能性がある
Error Boundaryを追加すると、そのルートと子ルートは保護される
rootを保護すると、アプリ全体が保護される

実際にErrorBoundaryを作ってみる

下記のリンクを参考になりそう

このスクラップは2024/03/30にクローズされました