今回はAngularJSで通信エラーが発生したときに共通して処理を行う方法について解説します。

デモ

ボタンが２つありますが、片方は正常にリクエストが通って成功します。もう片方は404エラーになります。エラーになったときはtoasterという通知ライブラリでエラー内容を通知しています。

共通処理

httpErrorInterceptorというサービスを作ってconfigフェーズでそれを使うように指示しています。

return $q.reject(rejection);という部分で結局はエラーを流しているので何もしないとき同様Consoleにエラーが出たりはします。

これの良いところは色々あるかと思います。

1. エラーが発生したときにユーザが分かるので、何らかのアクションを行うことができる
2. エラーが発生したときにエラー内容をどこかに送ってfluentdで収集とかできる
3. いちいち個別にerrorメソッドの中身を書かなくて良い

大手のサイトとかはフロントエンドのエラー内容を収集していたりします。どうやってるかは不明ですが・・・。

http通信でerrorが発生したときは時間をおけば復旧するタイプもありますが、半分くらいは復旧不可能だと思います。例えばコーディングミスとかでリクエスト内容が間違っているときとか。

復旧不可能なのにいちいちerrorの中を書くのはあほらしいので、共通処理でエラー通知だけしちゃうのが良いんじゃないでしょうか。

皆さんもこんな感じでerrorメソッドの中書くよりは共通処理させちゃうのが良いんじゃないでしょうか。

ちなみに今回はrejectionの内のステータスコードと固定文字列をtoasterで表示するようにしましたが、仕事ではstatus code とサーバサイドでbodyに設定したエラー理由をtoasterで表示するようにしています。