Reactアプリケーションのエラーハンドリング

について考えたメモ

ハンドリングすべきエラーの種類

APIエラー

非同期

通信エラー

通信の切断やタイムアウトによって発生するエラー

APIサーバまで到達していて処理は行われているが、レスポンスが正常に帰ってこないというケースもある

準正常系のエラー

業務フローの上で想定済のエラー

例：ユーザ登録時の「このユーザIDは既に使われています」

異常系のエラー

システムに何らかの異常がある場合に発生するエラー

JSエラー

同期・非同期

実装ミスや予期しない値によるエラー

エラーに対する反応

ダイアログ、トースト、エラーページへの遷移などなど

HTTPステータスコードやエラーコードに対応していることが多い

アプリケーションがi18n対応しているなら、ここも対応が必要

ただし、APIからのレスポンスにあるエラーコードと、それに対して表示すべきモノは1:1で無いこともありがち

特定の画面からこのAPIを呼んでエラーが出たときは文言を変えたい、とかはままある

TODO:

Next.js App routerのError boundaryとの兼ね合い

コンポーネントのレンダリング時のエラーなのか、何らかのユーザアクション起因でのエラーなのかは区別すべき？

useQueryとuseMutation