AngularJSでExceptionHandlerが思ったように動いてくれない

Question

質問

以下のようなコードがあり、画面にボタンが2つあるのですが、それぞれ押した時の動きが違って困っています。
どちらもexceptionHandlerでexceptionを受けて欲しいんですがどうすればいいですか？

AngularJS: 1.5.6

コード

angular.module("ExceptionApp", [])
    .controller("TopController", function($scope, ExcService) {
        $scope.getPosition = function() {
            var options = {
                maximumAge: 3000,
                timeout: 10000,
                enableHighAccuracy: true
            };
            
            navigator.geolocation.getCurrentPosition(successCallback, errorCallback, options);
        }

        $scope.exception = function() {
            exception();
        }

        function successCallback(position) {}

        function errorCallback(error) {
            ExcService.throwException();
        }

        function exception() {
            ExcService.throwException();
        }
    })
    .factory('$exceptionHandler', function($log) {
        return function(exception, cause) {
            $log.debug("EXCEPTION !!!");
        };
    })
    .service("ExcService", function() {
        this.throwException = function() {
            throw new Error();
        }
    });

<div ng-controller="TopController">
    <button ng-click="getPosition()">GET POSITION</button>
    <br><br><br>
    <button ng-click="exception()">EXCEPTION</button>
</div>

GET POSITIONボタンを押した時のconsoleの表示

Uncaught Error
  throwException @ index.js:33
  errorCallback @ index.js:19


追記(エラー箇所)
function errorCallback(error) {
   ExcService.throwException(); <= index.js:19
}
.service("ExcService", function() {
        this.throwException = function() {
            throw new Error(); <= index.js:33
        }
})

EXCEPTIONボタンを押した時consoleの表示

EXCEPTION !!!

Comments

[yuji38kwmt]

index.jsの33行目、19行目が、どの文に対応するか教えてください。

Answer 1

        function errorCallback(error) {
            $scope.$apply(function() {
              ExcService.throwException();
            });
        }

このように修正すると動きます。

$exceptionHandler は、AngularJSの処理コンテキスト内で発生した例外をキャッチすることができますが、AngularJSの処理外の例外はキャッチできません。

$scope.exception() が呼び出された場合、this は TopController オブジェクトを参照していますが、navigator の geolocation サービス（非同期）のerrorCallback呼び出し時点では、this は window オブジェクトを参照しており、AngularJS の処理コンテキストの外側での例外発生になってしまいます。

このように、AngularJS が監視していない処理コンテキストの中で AngularJS のfactoryやserviceを動作させる場合、$scope.$apply() を使う必要があります。

ご参考になれば。

Comments

[ayanon]

なるほど…！！ありがとうございました！