Deep Insider の Tutor コーナー
>>  Deep Insider は本サイトからスピンオフした姉妹サイトです。よろしく! 
AngularJS TIPS

AngularJS TIPS

アプリ共通の例外処理を実装するには?($exceptionHandler)

2016年2月1日

アプリ内でキャッチされなかった例外を最終的に処理するAngularJSの$exceptionHandlerサービス。その挙動を上書きして、独自の処理を実施する方法を紹介する。

  • このエントリーをはてなブックマークに追加

 $exceptionHandlerは、アプリで明示的に処理されなかった例外を、最終的に処理するためのサービスです。デフォルトでは、$logサービスerrorメソッドを利用して、ブラウザー標準のコンソールにログ出力します。

 この挙動を独自の処理で置き換えたいならば、$exceptionHandlerサービスを上書きすることもできます。例えば以下では、例外発生時にエラーダイアログを表示するとともに、エラーメッセージをdebugメソッドでログ出力する例です。

HTML
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8" />
<title>AngularJS TIPS</title>
</head>
<body ng-controller="MyController">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script>
// 1$exceptionHandlerサービスを再定義
angular.module('myApp', [])
  .factory('$exceptionHandler'
  , ['$window', '$log', function ($window, $log) {  // *1
    return function (exception, cause) {
      // 2ダイアログを表示
      $window.alert('エラーが発生しました。'); 
      // 3ログを表示
      $log.debug(exception); 
    };
  }])
  .controller('MyController', ['$scope', function($scope){
    // 意図的に例外を発生($exceptionHandlerサービスの確認用)
    throw new Error('エラー発生!');
  }]);</script>
</body>
</html>
アプリ共通の例外処理を定義するためのコード(exception.html)
処理されない例外があった場合に、ダイアログとログを表示
処理されない例外があった場合に、ダイアログとログを表示
  • *1 $windowサービスは、名前の通り、ブラウザー標準のwindowオブジェクトのラッパー(参照)です。$windowを利用することで、必要なときにモックへの差し替えが可能になりますので、テストを実施しやすくなります。

 $exceptionHandlerサービスを上書きするには、factoryメソッドを利用します(1)。factoyメソッドは、サービスを定義するためのメソッドの一つで、一般的な構文は以下の通りです。

[構文]factoryメソッド

factory(name, func)

  • name: サービス名
  • func: サービス(インスタンス)を返すファクトリー関数

 factoyメソッドについて詳しくは、別稿「TIPS:自作のサービスを定義するには?」で解説の予定なので、ここではまず、$exceptionHandlerサービスを上書きするには上記のコードにおける太字部分を修正すると理解しておいてください。

 ファクトリー関数では、引数として

  • exception(例外情報)
  • cause(例外に付随する詳細情報)

を受け取ります。ここでは、2で固定のエラーメッセージをダイアログ表示した後、3$log.debugメソッドを利用して例外情報をログ出力し、コンソールに表示しています。

処理対象:例外処理 カテゴリ:サービス
API:$exceptionHandler|$window カテゴリ:ng(コアモジュール) > service(サービス)
API:$log カテゴリ:ng(コアモジュール) > service(サービス)
API:$provide カテゴリ:auto > service(サービス)

※以下では、本稿の前後を合わせて5回分(第40回~第44回)のみ表示しています。
 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。

AngularJS TIPS
40. クッキーを読み書きするには?($cookies)

AngularJSが提供する機能を利用してクッキーを読み/書き/削除する方法を解説。また、登録済みの全てのクッキー情報をまとめて取得する方法も説明する。

AngularJS TIPS
41. $cookiesサービスを利用する際の注意点とは?($cookies)

AngularJSのクッキー機能は1.3から1.4で大きく変更された。具体的に何が変わったかを解説。また、アプリ全体で共通のクッキーオプションを設定する方法も説明する。

AngularJS TIPS
42. 【現在、表示中】≫ アプリ共通の例外処理を実装するには?($exceptionHandler)

アプリ内でキャッチされなかった例外を最終的に処理するAngularJSの$exceptionHandlerサービス。その挙動を上書きして、独自の処理を実施する方法を紹介する。

AngularJS TIPS
43. AngularJSで文書ツリーを操作するには?(element)

AngularJSでは非推奨だが、特殊な事情でHTML DOMツリーを直接操作したい場合には、angular.elementメソッドを使用する。その基本的な使い方を説明する。

AngularJS TIPS
44. AngularJSアプリでjQueryを利用するには?(element/ng-jq)

HTML DOMツリーを直接操作したい場合に、標準のjqLiteではなく、高機能なjQueryを使う方法を解説。常にjqLiteにする方法や、jQueryバージョンを固定する方法も説明する。

サイトからのお知らせ

Twitterでつぶやこう!