CODEWITHSUNDEEP
javascriptangularjslogging
Benny Bottema
Benny Bottema

Reputation: 11493

How can I enhance Angular's $log with a timestamp and class name?

How can I make it so that Angular adds a timestamp and classname to its logs?

Something like this:

$log.info('this log entry came from FooBar');

"9:37:18 pm, FooBar: this log entry came from FooBar"

Examples I found around the web are either not clear or combining many other things (like requirejs). I did find working some examples which go into Angular decorators, but I'm was wondering if there isn't a simpler way.

Upvotes: 3

Views: 2462

Answers (1)

Benny Bottema
Benny Bottema

Reputation: 11493

16-05-2015: this code was turned into a GitHub project called angular-logger. The code shown below is rather outdated.

You don't have to use decorators. You can just trick Angular's $log with some basic javascript:

app.run(['$log', function($log) {
    $log.getInstance = function(context) {
        return {
            log   : enhanceLogging($log.log, context),
            info  : enhanceLogging($log.info, context),
            warn  : enhanceLogging($log.warn, context),
            debug : enhanceLogging($log.debug, context),
            error : enhanceLogging($log.error, context)
        };
    };

    function enhanceLogging(loggingFunc, context) {
        return function() {
            var modifiedArguments = [].slice.call(arguments);
            modifiedArguments[0] = [moment().format("dddd h:mm:ss a") + '::[' + context + ']> '] + modifiedArguments[0];
            loggingFunc.apply(null, modifiedArguments);
        };
    }
}]);

Usage:

var logger = $log.getInstance('Awesome');
logger.info("This is awesome!");

Output:

Monday 9:37:18 pm::[Awesome]> This is awesome!

I used Moment.js for timestamp formatting. This example uses Angular’s module run block support to configure the application before anything else starts running.

For a more elegant and configurable solution, here's the same log enhancer, but as a configurable provider:

angular.module('app').provider('logEnhancer', function() {
    this.loggingPattern = '%s - %s: ';

    this.$get = function() {
        var loggingPattern = this.loggingPattern;
        return {
            enhanceAngularLog : function($log) {
                $log.getInstance = function(context) {
                    return {
                        log : enhanceLogging($log.log, context, loggingPattern),
                        info    : enhanceLogging($log.info, context, loggingPattern),
                        warn    : enhanceLogging($log.warn, context, loggingPattern),
                        debug   : enhanceLogging($log.debug, context, loggingPattern),
                        error   : enhanceLogging($log.error, context, loggingPattern)
                    };
                };

                function enhanceLogging(loggingFunc, context, loggingPattern) {
                    return function() {
                        var modifiedArguments = [].slice.call(arguments);
                        modifiedArguments[0] = [ sprintf(loggingPattern, moment().format("dddd h:mm:ss a"), context) ] + modifiedArguments[0];
                        loggingFunc.apply(null, modifiedArguments);
                    };
                }
            }
        };
    };
});

To use and configure it:

var app = angular.module('app', []);

app.config(['logEnhancerProvider', function(logEnhancerProvider) {
    logEnhancerProvider.loggingPattern = '%s::[%s]> ';
}]);

app.run(['$log', 'logEnhancer', function($log, logEnhancer) {
    logEnhancer.enhanceAngularLog($log);
}]);

Upvotes: 6

Related Questions