Angular2 Logging [closed]

Question

I am looking to introduce logging to an angular2 app and want to check any good libraries or approaches you could recommend on this.

Requirements for logging are:

• Will have options configure logging like info, warn, error, debug and verbose.
• Will be able to keep logs into local storage and then after a certain interval sync the logs to a server end point
• Will be able to support Json format and have control over the log format

Requirement below would be nice to have and any experience on working with web worker that you can share would be appreciated.

• Would be nice to have the logging function build as a web-worker so away from browser thread and we could potentially use app cache as temporary storage?

Any advice on this would be much appreciated.

Answer 1

You can use ngx-logger

NGX Logger is a simple logging module for angular (currently supports angular 4.3+). It allows "pretty print" to the console, as well as allowing log messages to be POSTed to a URL for server-side logging.

Installation

npm install --save ngx-logger

Once installed you need to import our main module:

import { LoggerModule, NgxLoggerLevel } from 'ngx-logger';

The only remaining part is to list the imported module in your application module, passing in a config to intialize the logger.

@NgModule({
  declarations: [AppComponent, ...],
  imports: [LoggerModule.forRoot({serverLoggingUrl: '/api/logs', level: NgxLoggerLevel.DEBUG, serverLogLevel: NgxLoggerLevel.ERROR}), ...],
  bootstrap: [AppComponent]
})
export class AppModule {
}

Usage

To use the Logger, you will need import it locally, then call one of the logging functions

import { Component } from '@angular/core';
import { NGXLogger } from 'ngx-logger';

@Component({
  selector: 'your-component',
  templateUrl: './your.component.html',
  styleUrls: ['your.component.less'],
  providers: [NGXLogger]
})
export class YourComponent {
    constructor(private logger: NGXLogger) {
        this.logger.debug('Your log message goes here');
        this.logger.debug('Multiple', 'Argument', 'support');
    };
}

Config Options

serverLogLevel - Only sends logs to the server for the level specified or higher (OFF disables the logger for the server) serverLoggingUrl - URL to POST logs level: The app will only log message for that level or higher (OFF disables the logger for the client) enableDarkTheme: Sets the default color to white instead of black TRACE|DEBUG|INFO|LOG|WARN|ERROR|OFF Server Side Logging

If serverLogginUrl exists, NGX Logger will attempt to POST that log to the server.

Payload Example {level: 'DEBUG', message: 'Your log message goes here'}

You can read the documentation as well for the same. https://www.npmjs.com/package/ngx-logger