AngularJS doesn't show specific errors in the

Question

I am using AngularJS along with the angular-material library in my application. The problem is, whenever any error occurs in any function of the controller, it doesn't show the specific error but instead shows the same generic error everytime, by looking at which you cannot determine what went wrong.

Here is the error shown in my console.

TypeError: href is null   stackFrame.js (line 357)
consoleLog/<()   angular.js (line 12416)
$ExceptionHandlerProvider/this.$get</<()   angular.js (line 9203)
processQueue()   angular.js (line 14642)
scheduleProcessQueue/<()   angular.js (line 14650)
$RootScopeProvider/this.$get</Scope.prototype.$eval()   angular.js (line 15878)
$RootScopeProvider/this.$get</Scope.prototype.$digest()   angular.js (line 15689)
$RootScopeProvider/this.$get</Scope.prototype.$apply()   angular.js (line 15986)
done()   angular.js (line 10511)
completeRequest()   angular.js (line 10683)
requestLoaded()   angular.js (line 10624)

Here is the screenshot of that error.

PS: I am using the RequireJS JavaScript library to lazy-load my application. I am also using ui.router in my application.

Update 1: stackFrame.js is not a JavaScript file of my application. The location of stackFrame.js is:

chrome://firebug/content/debugger/stack/stackFrame.js

And it always shows the same error on the same line throughout my application in any controller, even if I face different errors in the application.

Update 2:

Disabling Firebug works. It shows the specific error in Firefox´ and Chrome´s console. I would like to add, that this type of error is shown in Firebug when there is an error inside the response function of $http.post(). Testing further cases.

Update 3:

With reference to https://github.com/firebug/firebug/issues/7948, this issue has been solved in firebug 2.0.13.

Answer 1

You can use custom exception handling in AngularJs.

app.config(function($provide){

    $provide.decorator("$exceptionHandler", function($delegate, $injector){
        return function(exception, cause){
            var $rootScope = $injector.get("$rootScope");
            $rootScope.addError({message:"Exception", reason:exception});
            $delegate(exception, cause);
        };
    });

});

It will send all errors to $rootScope for data binding before allowing the call to fall through to the default implementation (addError is a custom method on $rootScope, while $delegate represents the service being decorated).

errors service to encapsulate some of the common logic.

app.factory("errors", function($rootScope){
    return {
        catch: function(message){
            return function(reason){
                $rootScope.addError({message: message, reason: reason})
            };
        }
    };
});

Handling Error:

 TestService.doWork().then()               
        .catch(errors.catch("Could not complete work!"));

Answer 2

This is obviously a bug in Firebug. The related line within its code is this one:

https://github.com/firebug/firebug/blob/a389cf78b310aedf33531520cc11f1e05051ecc3/extension/content/firebug/debugger/stack/stackFrame.js#L357

If you want this to get fixed, you should file a bug report for Firebug.