Documentation Menu

Angular 2+ logging to the server

• Demo Angular 2+ site using JSNLog to log to the server

JSNLog can be used in your Angular 2+ application the same way as any other NPM package.

• Install JSNLog in your Angular 2+ application
• Send uncaught JavaScript exceptions to the server
• Log other JavaScript events to the server
• Configuring JSNLog
• Install server side component

Install JSNLog in your Angular 2+ application

1. On the command line, install the NPM package:

   npm install jsnlog --save

Send uncaught JavaScript exceptions to the server

An uncaught exception is simply an exception that isn't caught by your own code. You will want to log those to the server.

By default, Angular handles uncaught exceptions by sending error messages to the console (details). To change this, you create a provider for the ErrorHandler interface (example).

1. Open your main module in your favorite editor. This is most often called app.module.ts.
2. Above the module definition, add an uncaught exception handler that uses JSNLog to log the JavaScript exception to the server:

   export class UncaughtExceptionHandler implements ErrorHandler {
       handleError(error: any) {
           JL().fatalException('Uncaught Exception', error);
       }
   }
   
   // Existing module definition
   @NgModule({
       ...
   

3. The TypeScript compiler will complain, because you haven't imported JSNLog and ErrorHandler. Do that now:

   // ... other imports ...
   import { JL } from 'jsnlog';
   import { ErrorHandler } from '@angular/core';

4. Finally add your uncaught exception handler to the providers list, as a provider for the ErrorHandler interface:

   @NgModule({
       ...
       providers: [
           ...
           { provide: ErrorHandler, useClass: UncaughtExceptionHandler }
       ],
       ...
   })

Log other JavaScript events to the server

You may want to log not only uncaught exceptions, but other events as well. Such as AJAX timeouts and user behavior.

One way to make this happen would be to simply import the JL object into the components that need it. However, that would make unit testing of your components much harder, because you would not be able to replace JSNLog with a mocked version.

Instead, add the JL object to the providers of the modules where you need it. That way, it can be dependency injected into the components.

A complication is that JL is an object, not a class. JSNLog does expose the interface JL.JSNLog, but that can't be used here because interfaces disappear from the generated JavaScript.

One solution is to create a non-class dependency using a string as the provider token:

// file with module definition
...
import { JL } from 'jsnlog';

@NgModule({
    ...
    providers: [
        ...
        { provide: 'JSNLOG', useValue: JL }
    ],
    ...
})

Now you can dependency inject JSNLog into your components:

// component file
...
import { JL } from 'jsnlog';
import { Inject } from '@angular/core';

export class MyComponent {
    
    JL: JL.JSNLog;

    // JL.JSNLog is an interface describing the JSNLog library
    constructor(
        @Inject('JSNLOG') JL: JL.JSNLog
        ... any other parameters ...) {

        this.JL = JL;
        ...
    }

    ...

Then use the injected JSNLog object (full documentation):

doSomething() {
    this.JL().error("an error happened");
}

Configuring JSNLog

JSNLog works fine out of the box without configuration. However, it has many useful configuration settings, such as setting the severity level of loggers, batching multiple log items in one request to the server, etc.

If you use ASP.NET MVC or ASP.NET Core, you can configure JSNLog in your server side code, provided you call the Configure method in your pages.

You can configure JSNLog in your JavaScript or TypeScript code, using the methods exposed by jsnlog.js.

In an Angular application, seeing that configuring your loggers is part of your application's global configuration, it makes sense to do this in your main module (in most applications, that would be app.module.ts). For example:

// module file

// Set the level of the nameless logger to WARN, so only log items
// with severity WARN or higher get logged.
JL().setOptions({ "level": JL.getWarnLevel() });

// Existing module definition
@NgModule({
    ...

Install server side component

The jsnlog.js library sends your log items to the server using AJAX requests. JSNLog comes with server side handlers that receive these requests and store your log items in your server side log.

• Install server side handler