Custom AngularJS Error Logger Service

In my one of earlier posts, Custom exception handling in angularJS, I showed how to handle these exceptions. But exceptions are not the only problems that may be happening in your application. You probably have lot of async services that are communicating with your web services or some third party services to get and set data. When these calls fail you definitely want ability to log these errors, warning etc. in your repository on server. In this post I will show you a custom AngularJS logging service that I wrote for my trading application.

Custom AngularJS logging service

Following code snippet show the service that I use in my application.

TradePortalApp.service('diagnostics', 
    ['$log', '$window', '$http', function ($log, $window, $http) {
var log = function(msg, context, remote) {
    if (remote) {
        remoteLog(msg, context, "info");
    }
    $log.log(msg);
};
var warn = function (msg, context, remote) {
    if (remote) {
        remoteLog(msg, context, "warn");
    }
    $log.warn(msg);
};
var info = function (msg, context, remote) {
    if (remote) {
        remoteLog(msg, context, "info");
    }
    $log.info(msg);
};
var error = function (msg, context, remote) {
    if (remote) {
        remoteLog(msg, context, "error");
    }
    $log.error(msg);
};
var remoteLog = function (msg, context, type) {
    var actionUrl = PortalSettings.baseUrl + "api/TradeDiagnostics/ClientLog";
    var data = { Type: type, Message: msg, Context: context, 
   UserAgent: $window.navigator.userAgent };
    $http({ method: 'POST', url: actionUrl, data: data }).then(
        function () { },
        function(response) {
            $log.error(response.data);
        });
};
return {
    log: log,
    warn: warn,
    info: info,
    error:error
};
}]);

As you can see that this diagnostics angularJS service is simply extending services provided by $log service. I have added some additional functionality to it. I have added a parameter that allows you to tell this service if logging information is to be logged locally or remotely. If you pass in parameter for remote logging, then remoteLog is used to send the data to server via a WebApi call. I am using MVC WebApi as my remote end point to receive diagnostics data.

Using custom AngularJS logger

Followin code snippet shows how this API is used when one of the async call fails in one of my other services.

 TradePortalApp.controller("TradeListingController", 
  ['$scope', 'listingApi', 'diagnostics', '$http', '$log', 
   function ($scope, listingApi, diagnostics, $http, $log) {
 $scope.thisListing = null;
 $scope.addListing = function () {
     listingApi.addListing($scope.thisListing).
         then(
         function(data) {
             resetListingModel($scope.thisListing);
         },
         function(data) {
             diagnostics.log('failed to adding new listing:' + data.status, 
              "addListing", true);
         });
 };)

Pretty simple and easy custom AngularJS logging service.