@jfkz/ngx-toolkit-logger NPM

@ngx-toolkit/logger

Angular LoggerService (with default ConsoleLoggerService implementation)

Installation

Install the npm package.

# To get the latest stable version and update package.json file:
npm install @ngx-toolkit/logger --save
# or
yarn add @ngx-toolkit/logger

Import LoggerModule in the root Module of your application with forRoot(level?: Level) to choose your log level. If you don't specify a level, you haven't any log.

import { NgModule, isDevMode }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LoggerModule, Level } from '@ngx-toolkit/logger';

import { AppComponent }  from './app.component';

const LOG_LEVEL: Level = isDevMode() ? Level.INFO : Level.ERROR;

@NgModule({
  imports: [ BrowserModule, LoggerModule.forRoot(LOG_LEVEL) ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

Usage

import { Component, OnInit } from '@angular/core';
import { LoggerService } from '@ngx-toolkit/logger';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  constructor(private logger: LoggerService) {}

  ngOnInit() {
    this.logger.info('OnInit my AppCommponent');
  }
}

LoggerService

The LoggerSerivce API:

/**
 * Outputs an error message.
 */
error(message?: any, ...optionalParams: any[]) {}

/**
 * Outputs a warning message.
 */
warn(message?: any, ...optionalParams: any[]) {}

/**
 * Outputs an informational message.
 */
info(message?: any, ...optionalParams: any[]) {}

/**
 * Outputs a debug message.
 */
debug(message?: any, ...optionalParams: any[]) {}

/**
 * Outputs a message.
 */
log(message?: any, ...optionalParams: any[]) {}

Custom implementation

You can create you own implementation. Our sample with the winston API:

import { Inject, Injectable } from '@angular/core';
import { LoggerService, LOGGER_LEVEL, Level } from '@ngx-toolkit/logger';
import winston from 'winston';

@Injectable()
export class WinstonLoggerService extends LoggerService {
  private logger: any;
  
  constructor(@Inject(LOGGER_LEVEL) level: Level) {
    super();

    this.logger = winston.createLogger({
      transports: [
        new winston.transports.File({
          filename: 'combined.log',
          level: 'info'
        })
      ]
    });
  }
  
  info(message?: any, ...optionalParams: any[]) {
    this.logger.info(message, optionalParams);
  }
  
  ...
}

To register WinstonLoggerService in the Angular application, provide the LoggerModule with forRoot(level?: Level, provider?: Type<LoggerService>,) as:

import { NgModule, isDevMode }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LoggerModule, Level } from '@ngx-toolkit/logger';

import { WinstonLoggerService } from './winston-logger.service';
import { AppComponent }  from './app.component';

const LOG_LEVEL: Level = isDevMode() ? Level.INFO : Level.ERROR;

@NgModule({
  imports: [ BrowserModule, LoggerModule.forRoot(LOG_LEVEL, WinstonLoggerService) ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

Logger rxjs operator

logger(message: string, nextLevel: Level = Level.INFO, errorLevel: Level = Level.ERROR, completeLevel?: Level): MonoTypeOperatorFunction

import { Component, OnInit } from '@angular/core';
import { logger } from '@ngx-toolkit/logger';
import { timer } from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  constructor() {}

  ngOnInit() {
    timer(1000, 2000).pipe(
      logger('timer')
    ).subscribe();
  }
}

Logger decorator

Log(message?: string, level: Level = Level.INFO)
Debug(message?: string) : Alias of Log(message?: string, Level.DEBUG)

import { Component, OnInit } from '@angular/core';
import { Debug } from '@ngx-toolkit/logger';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  constructor() {}

  @Debug()
  action(param: string) {
    return "result";
  }
}