NGX-FANCY-LOGGER

Console Logger for Angular(v6 and above)

Make debugging easier with more readable and configurable fancy logs

npmnpmGitHub starsnpm bundle sizeNPM
DOCUMENTATION

Key Features

  • Log Levels Labels INFODEBUGWARNINGERROR
  • Show/Hide Log Time
  • Show/Hide Labels
  • Show/Hide Emoji👩🏻‍💻 for each log level
  • Log Level colors and emojis are configurable
  • Show Header on console (color and fontSize configurable)
  • Debug RxJS Observable Stream using debugOperator() operator function
  • Can configure each setting.
  • Environment Specific Log Level Restriction. eg. if you set logLevel to LogLevel.WARNING, it will only show logs for WARNING and ERROR
  • Can Disable all Logs

Sample Log Screenshot

Installation

Install ngx-fancy-logger

npm install --save ngx-fancy-logger

Once it is installed, import NgxFancyLoggerModule it in AppModule.

NgxFancyLogger with Default Configuration

To use NgxFancyLoggerModule with Default configuration you just need to import it in @NgModule. No need to call .forRoot() method 

import { NgxFancyLoggerModule } from 'ngx-fancy-logger';

@NgModule({
...
imports: [
    ...
    NgxFancyLoggerModule
]
...
})
export class AppModule { }

Override NgxFancyLogger Default Configuration

You can override NgxFancyLoggerModule default configuration with forRoot method, as below. Each configuration is optional. 

import { NgxFancyLoggerModule, LogLevel } from 'ngx-fancy-logger';

@NgModule({
    ...
    imports: [
    ...
    NgxFancyLoggerModule.forRoot({
        showTime: false,
        logLevel: LogLevel.WARNING,
        levelColor: {
            [LogLevel.ERROR]: 'brown'
        }
    })
    ]
    ...
})
export class AppModule { }

Using NgxFancyLoggerService in Component/Service

Once installation is done you can use it in any component or service by injecting NgxFancyLoggerService. 

export class AppComponent {
title = 'demo';

constructor(private logger: NgxFancyLoggerService) {
    logger.header('This is a Ngx Fancy Logger Demo', { color: 'red', fontSize: 30 });
    logger.info('This is a INFO log', 123, { a: 20, b: 30 });
    logger.debug('This is a DEBUG Log', { a: 20, b: 30 });
    logger.warning('This is a WARNING Log', { a: 20, b: 30 });
    logger.error('This is an ERROR Log', { a: 20, b: 30 });

    logger.header('Observable Log Message using debugOperator() ');
    const source$ = of(Math.random(), { test: 'data' }, 123, 'This  is source observable data');
    source$.pipe(
    logger.debugOperator('Source Response : ', LogLevel.INFO),
    map(data => ({ key: Math.random(), response: data}) ),
    logger.debugOperator('Mapped Response : ')
    ).subscribe();
}