[JSNLog] Log in the fron-end with AngularJS and NLog

 #JSNLog    #Front-end logger   #NLog

▌Introduction

---

JSNLog is a javascript client side logger, you can log the user behavior or exception in front-end to the back-end logger, such as NLog, Log4Net.

In the following sample, I am going to integrate JSNLog with .Net NLog and use JSNLog’s angular service.

▌Environment

---

l   JSNLog.NLog 2.17.1

l   AngularJS 1.5.5

l   logToSerer.js 1.0.1

▌Implement

---

▋Install NLog in the Web Application

http://nlog-project.org/

▋Install JSNLog.NLog in the Web Application

After installing it, you will find the following setting in WebConfig. We can disable the logger or change the default path of “jsnlog.min.js”. The default path is /Scripts/ jsnlog.min.js

<configuration>   <jsnlog productionLibraryPath="~/Scripts/Source/jsnlog.js/jsnlog.min.js" enabled="true">   </jsnlog> </configuration>

▋Download logToServer.js

logToServer.js is the AngulaJS service for JSNLog. However, if you are not using AngularJS, you can skip this step and use the pure javascript to call the logger.

Open the logToServer.js, we can change the default file name of the logger.

▋Start logging!

var app = angular.module('app', ['logToServer']) .controller('CustomerIndexCtrl', function ($scope, $http, $log, DeleteFactory, blockUI) {     //$log Service     $log.log("Trace!");     $log.debug("Debug!");     $log.info("Information!");     $log.warn("Warning!");     $log.error("Error!");     //JS     JL("MyPage").log("Trace!");     JL("MyPage").debug("Debug!");     JL("MyPage").info("Information!");     JL("MyPage").warn("Warning!");     JL("MyPage").error("Error!"); });

Here are the results! Works fine with log viewer.

The physical log texts.

▋Log AJAX ($http)

There is another useful method for JSNLog to log the Ajax when the response encounters Timout or delays.

Set the angular’s config like this.

app.config(['$httpProvider', function($httpProvider) {     $httpProvider.interceptors.push('logToServerInterceptor'); }])

And the $http method …

$http({                 method:'GET',                 url:getUri,                 timeout:5000,                 warning: 1500             }).error(function (status, headers, config) {                }).then(function (response) {                 return response;             }).catch(function (e) {                 throw e;             });

If the request timeouts or delays, we will get a message like this,

Angular.Ajax | {"errorMessage":"timeout","status":-1,"config":{"method":"GET","transformRequest":[null],"transformResponse":[null],"url":"http://localhost:4321/api/XXX/Get","timeout":5000,"warning":1500,"headers":{"Accept":"application/json, text/plain, */*"},"msBeforeAjaxCall":1464481330322}} | 

▋Warning!

If you are using blockUI in the website, don’t forget to ignore the JSNLog http request! Or the website may encounters a blockUI deadlock!

app.config(function(blockUIConfig) {     blockUIConfig.requestFilter = function(config) {         if (config.url.match(/^\/jsnlog.logger($|\/).*/)) {             return false; // ... don't block it.         }     }; })

▌Reference

---