Logger des événements client avec JSNLog

Continuons l’exploration des solutions de log et voyons comment logger des événements client dans une application web. Prenons une application web Angular couplée à une WebAPI DotNet Core. JSNLog couplé à Serilog vous permettra de logger depuis Angular des informations pour les intégrer dans vos logs serveurs “classique”.

JavaScript dans un site asp.net core MVC

Dans Visual Studio, récupérer le package via Package Manager :

PM> Install-Package JSNLog

Dans le startup.cs :

using JSNLog;

public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
{
   // ...
   // Configure JSNLog
   var jsnlogConfiguration = new JsnlogConfiguration();
   app.UseJSNLog(new LoggingAdapter(loggerFactory), jsnlogConfiguration);

   app.UseStaticFiles();

   // ...
}

Enregistrer le script jsnlog pour qu’il soit disponible partout

//Add to _Layout.cshtml*@

Dans le code Javascript

// log text
JL().trace("log message");
JL().warn("log message");
// log JSON
JL().fatal({"i": 5, "j": 6});

JSNLog - Intellisense

Angular

Récupérer le package via npm :

npm install jsnlog -save

Ensuite il faut modifier son application Angular pour prendre en utiliser ce nouvel outil.

// nouveaux imports
import { JL } from 'jsnlog';
import { Inject } from '@angular/core';

export class LoginComponent implements OnInit, OnDestroy {
// nouvelle propriété
JL: JL.JSNLog;
// injection dans le constructeur et initialisation
constructor(@Inject('JSNLOG') JL: JL.JSNLog, private alertService: AlertService, private authService: AuthService, private configurations: ConfigurationService) {
this.JL = JL;
}

// utilisation
ngOnInit() {
this.JL().error("Login - ngOnInit");
this.JL().info("Login - login");
}

Comme vous le voyez, les logs contiennent des informations issues d’Angular mais aussi des WebAPI.

Références :

JSNLog

JSNLog – Documentation – Angular2