ErrorBoundary
Remix の ErrorBoundary
コンポーネントは、通常の React の エラーバウンダリ と同じように動作しますが、いくつかの追加機能があります。ルートコンポーネントでエラーが発生すると、ErrorBoundary
はその代わりにレンダリングされ、親ルート内にネストされます。ErrorBoundary
コンポーネントは、ルートの loader
または action
関数でエラーが発生した場合にもレンダリングされるため、そのルートのすべてのエラーを 1 か所で処理できます。
最も一般的なユースケースは次のとおりです。
- 意図的に 4xx
Response
をスローしてエラー UI をトリガーする場合- 不正なユーザー入力に対して 400 をスローする
- 権限のないアクセスに対して 401 をスローする
- 要求されたデータが見つからない場合に 404 をスローする
- React がレンダリング中にランタイムエラーが発生した場合、意図せずに
Error
をスローする可能性があります
スローされたオブジェクトを取得するには、useRouteError
フックを使用できます。Response
がスローされると、state
/ statusText
/ data
フィールドを持つ ErrorResponse
インスタンスに自動的にアンラップされるため、コンポーネント内で await response.json()
を気にする必要はありません。スローされた Response
をスローされた Error
と区別するには、isRouteErrorResponse
ユーティリティを使用できます。