Angular のエラー処理

Angular のエラー処理

Angular のような SPA アプリケーションを構築する際、エラー処理の挙動は以下の ２パターンに分かれるはずです。

• ダイヤログを表示して処理がエラーであることを示す。
• エラー画面に遷移させる。

MPA アプリケーションのように「エラー画面に遷移」の一択ではないことをまず確認して、アプリケーション全体でのエラー挙動をしっかり設計する必要があります。

エラーのキャッチ

Angular での エラーの処理は主に以下の３点で実施します。

• ErrorHandler インタフェイスを用いたアプリケーション全体のエラー処理
• HttpClient で通信上のエラーが発生した際のエラー処理
• 定義されていない画面へのリクエストが発生した際のルーターエラー処理

それぞれの処理の記述方法は、以下の資料にまとめられていますので参考にして下さい。

https://qiita.com/ringtail003/items/2229c0ad1697a26cac02

３つ目のルーターのエラー処理は、ルーターに path: '**' のルートを定義することでも代替可能です。

エラーの設計

Angular でエラー処理を考える上では、コードを書き始める前にある程度のエラー処理を考えておくのが良いでしょう。

エラーに関する設計では以下の点をチーム内で明確にしておく必要があります。

エラーが発生したときの画面の振る舞い方

エラーが発生したときに画面上でどのような案内を行うのかは重要な問題です。

エラーページを用意するのか、用意するならどのようなページが用意されるべきか、すべてのエラーをエラーページに案内してしまうのか、などなどです。

例えば一つのパターンとして、以下のような方針が考えられます。

• 存在しないルートへのアクセスは 404 エラーページへと遷移させる
• 動的ルートの path パラメータミスマッチも 404 ページへと遷移させる
• アプリケーション側で発生した予期しない JS エラーはダイアログで処理する。
• サーバサイドの予期しない 500 エラーも ダイアログで処理する。
• サーバサイドがメンテナンスレスポンスを返す際には、メンテナンスページへ遷移させる

エラーが発生したときのその他の挙動

エラー発生時には、画面以外にも様々な点についての考慮が必要です。

• localStorage などの永続化がある場合、その内容をクリアする必要があるかどうか
• エラートラッキングツールへの通知をどのように行うか

エラーの処理に関する設計

画面上の振る舞いやその他の振る舞いについて整理ができたら、それぞれについてエラー処理の方針を定めていきます。必要に応じて、新しいエラークラスの実装などが必要になるケースもあるでしょう。

• 404 ページの表示遷移については、path: '**' ルートで処理する。
  • 動的ルートの 404 遷移は、ルーテッドコンポーネントの onInit で遷移処理させる。
• バックエンドの 500 エラーは HttpInterceptor で処理する。
  • メンテナンス挙動も HttpInterceptor で処理する。
• その他の JS エラーのダイアログ処理は、ErrorHandler で処理する。