Logging in Angular apps ... and how to filter those log messages

The classic way to log in JavaScript is through the delightful console.log call; it's pretty brute-force - it logs. That's it. No filtering log messages, no log levels (i.e. warn, error, etc.).

What's nice is that Angular provides us a handy service that wraps console.log and it's called, funnily enough, $log.

$log is a simple service that, when included in your code, provides four methods:

1. error: for, well, errors - also gives you a stack trace
2. info: for informational messages
3. log: uh, log messages?
4. warn: warning messages, duh

2 of those are pretty obvious as to their function: warn & error. How you use info and log are really up to you; to be, they're pretty similar. I typically use log to mean debug. Info would be for generalised informational messages (such as a service saying "Hey, I'm using the staging server")

Obtaining the Angular $log is pretty simple, just declare it as a dependency in your particular 'thing', so for a controller:

function SomeCtrl($scope, $log) {
    $log.info('SomeCtrl - starting up, yeah!');
}

Filtering those $log messages

Saying all of that, getting a lot of log in the console can be a little like receiving a ton of spam. Plus, maybe you don't want to log everything. Maybe you want to send errors to a remote server.

So, Angular provides us with the concept of 'decorators' and these allow us to wrap the original $log service and provide our own implementations (or wrap the original ones).

The following example (borrowed from this Google Group thread) is silent when it comes to log messages (because, for me, they're debug messages) and decides to call alert() for any error messages.

myApp.config(function($provide) {
  $provide.decorator('$log', function($delegate, $sniffer) {
        var _log = $delegate.log; //Saving the original behavior

        $delegate.log = function(message) { };
        $delegate.error = function(message) {
            alert(msg);
        }

        return $delegate;
    });
})

A little more info on $log can be found on the Angular documentation page here.