rfx-logger

RfxLogger

Upgrade for browser console messages

Features

• One-line compact view
• Non-intrusive debug data
• Messages have customizable colors
• Message tag support HTTP codes
• Message have time and http response time
• Intercept HTTP calls and automatically prints message to the console
• Completely disable logger
• Customize data you want to show (http code, time, http duration, log types)

Installation

Install the npm package:

npm install rfx-logger

Import module and interceptor:

• interceptor is optional
• .config is optional

import { RfxLoggerModule, RfxLoggerInterceptor } from 'rfx-logger';
import { HTTP_INTERCEPTORS } from '@angular/common/http';

@NgModule({
  imports: [
    RfxLoggerModule.config({
      [ ... ]
    })
  ],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: RfxLoggerInterceptor,
      multi: true
    }
  ],
})

Module configuration

disableLogger: boolean

(default value: false)
If true, completely disable all types of messages.

disableVerbose: boolean

(default value: false)
If true, logger doesn't print any debug data, just a one line message.

disableHttpCodes: boolean

(default value: false)
If true, logger doesn't show http code when http interceptor is used.

disableHttpCallDuration: boolean

(default value: false)
If true, http calls duration are hidden

disableTime: boolean

(default value: false)
If true, disable time inside console log.

enabledLogs: (LogTypeEnum | string)[]

(default value: ['success', 'warning', 'error', 'trace'])
Enable only selected types of log. All logs are enabled by default.

colorsConfig: LogStyleModel[]

You can customize every message tag, text, time and http response time
This is the default style:

colorsConfig: [
  {
    logType: 'success',
    tagStyle: 'color: #000000; font-weight: bold; background-color: #8BC34A; padding: 1px 5px; margin-left: 2px;',
    textStyle: 'color: #8BC34A; font-weight: bold; padding: 1px 0;',
    timeStyle: 'color: #9E9E9E; font-weight: bold; padding: 1px 0;',
    responseTimeStyle: 'color: #9E9E9E; font-weight: normal; padding: 1px 0;'
  },
  {
    logType: 'warning',
    tagStyle: 'color: #000000; font-weight: bold; background-color: #FFC107; padding: 1px 5px; margin-left: 2px;',
    textStyle: 'color: #FFC107; font-weight: bold; padding: 1px 0;',
    timeStyle: 'color: #9E9E9E; font-weight: bold; padding: 1px 0;',
    responseTimeStyle: 'color: #9E9E9E; font-weight: normal; padding: 1px 0;'
  },
  {
    logType: 'error',
    tagStyle: 'color: #FFFFFF; font-weight: bold; background-color: #F44336; padding: 1px 5px; margin-left: 2px;',
    textStyle: 'color: #F44336; font-weight: bold; padding: 1px 0;',
    timeStyle: 'color: #9E9E9E; font-weight: bold; padding: 1px 0;',
    responseTimeStyle: 'color: #9E9E9E; font-weight: normal; padding: 1px 0;'
  },
  {
    logType: 'trace',
    tagStyle: 'color: #FFFFFF; font-weight: bold; background-color: #757575; padding: 1px 5px; margin-left: 2px;',
    textStyle: 'color: #BDBDBD; font-weight: bold; padding: 1px 0;',
    timeStyle: 'color: #9E9E9E; font-weight: bold; padding: 1px 0;',
    responseTimeStyle: 'color: #9E9E9E; font-weight: normal; padding: 1px 0;'
  }
]

Usage

• message custom string (eg. function name)
• data optional, any object you want to print with the debug message (eg. backend data)

import { RfxLoggerService } from 'rfx-logger';

[...]

constructor(rfxLoggerService: RfxLoggerService) { }

[...]

this.rfxLoggerService.success(message, data);    // success - green message
this.rfxLoggerService.warning(message, data);    // warning - yellow message
this.rfxLoggerService.error(message, data);      // error   - red message
this.rfxLoggerService.trace(message, data);      // trace   - gray message

Demo

https://demo.redfoxxo.dev/rfx-logger

License

This project is licensed under the MIT License