Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

ngx-logger

dbfannin395.7kMIT5.0.12TypeScript support: included

npm version

angular, logging

readme

npm version

NGX Logger

NGX Logger is a simple logging module for angular (currently supports angular 6+. Warning : you might need older version of the lib to use older versions of angular). It allows "pretty print" to the console, as well as allowing log messages to be POSTed to a URL for server-side logging.

Join the NGX Logger discord server!

Join our discord server! Get updated on the latest changes and newest feature! Get help faster from the community! Share implementation strategies! Make friends :)

Installation

npm install --save ngx-logger

Once installed you need to import our main module (optionally you will need to import HttpClientModule):

import { LoggerModule, NgxLoggerLevel } from "ngx-logger";
// HttpClientModule is only needed if you want to log on server or if you want to inspect sourcemaps
import { HttpClientModule } from "@angular/common/http";

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

@NgModule({
  declarations: [AppComponent, ...],
  imports:
  [
    // HttpClientModule is only needed if you want to log on server or if you want to inspect sourcemaps
    HttpClientModule,
    LoggerModule.forRoot({
      serverLoggingUrl: '/api/logs',
      level: NgxLoggerLevel.DEBUG,
      serverLogLevel: NgxLoggerLevel.ERROR
    }),
    ...
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
}

Usage

To use the Logger, you will need to 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.scss"],
})
export class YourComponent {
  constructor(private logger: NGXLogger) {
    this.logger.error("Your log message goes here");
    this.logger.warn("Multiple", "Argument", "support");
  }
}

For most browsers, you need to enable "verbose" or "debug" mode in the developper tools to see debug logs

Configuration

Configuration is sent by the forRoot call LoggerModule.forRoot({level: NgxLoggerLevel.DEBUG})

For more information about configuration see the doc

Customise logger behavior

Since version 5 NGXLogger is fully customisable

See how in the doc

Features

You can see more of the features supported by NGXLogger in this doc

Demo App

There is a demo application with examples of how to use ngx-logger. To run it perform the following:

  • Clone the repo
  • Run npm ci or npm install
  • Build ngx-logger using ng build
  • Run ng serve demo to serve the app

A convenience script has been added to package.json that performs the above steps. Simply run npm run demo to have the demo built and served.

Dependencies

  • @angular/common
  • @angular/core

Testing Your App When Using NGXLogger

If you inject any of the NGX Logger services into your application, you will need to provide them in your Testing Module.

To provide them in your Testing Module:

import { LoggerTestingModule } from 'ngx-logger/testing';

TestBed.configureTestingModule({
  imports: [
    LoggerTestingModule
  ],
  ...
});

All services have mocked classes that can be used for testing located here

Contribute

All are welcome to contribute to NGX Logger.

See the doc to know how

changelog

Changelog

All notable changes to this project will be documented in this file.

The format is based on Keep a Changelog, and this project adheres to Semantic Versioning.

[Unreleased] - Merged features waiting to be published in upcoming version

[5.0.12] - 2022-04-13

Added

  • Added serverCallsOutsideNgZone to allow users to perform server calls outside of angular zone (fix #324)
  • Added serverCallsBatchSize, serverCallsTimer and flushQueue to allow users to perform server calls in batch (fix #279)

Changed

  • If you override NGXLoggerServerService, it now optionnaly accepts ngZone in constructor (for serverCallsOutsideNgZone feature)
  • If you override NGXLoggerServerService.customiseRequestBody, it now receives metadata: INGXLoggerMetadata | INGXLoggerMetadata[] as parameter instead of metadata: INGXLoggerMetadata

[5.0.11] - 2022-05-24

Added

  • Added INGXLogger.partialUpdateConfig that updates only some fields of the config
  • Added partialConfig parameter to CustomNGXLoggerService.getNewInstance
  • Added context to INGXLoggerConfig, context is written in {} to the log for every log messages

[5.0.10] - 2022-05-24

Added

  • Added getNewInstance in CustomNGXLoggerService that allows more params for instantiating a new instance of NGXlogger

Changed

  • Removes the @deprecated on CustomNGXLoggerService

[5.0.9] - 2022-03-03

Added

  • Added the function alterHttpRequest to allow users to tweak the HttpRequest just before it is sent to the API

Fixed

  • Fix typo in doc (customise.md)

[5.0.8] - 2022-02-20

Changed

  • Makes the DatePipe dependency Optional

Breaking Changes

  • If you use timestampFormat, you now need to manually provide DatePipe from @angular/common
    • If not provided, this will just display an error when logging, build will not break, your application will still run and logger will still produce an output

[5.0.7] - 2022-01-22

Fixed

  • Now correctly secures message and additional from payload when sending log to server (fixes #286)

[5.0.6] - 2022-01-15

Changed

  • REVERT : testing project is now under main project (this was causing compilation error)

[5.0.5] - 2022-01-15

Changed

  • testing project is now under main project (this was causing compilation error)

Breaking changes

  • ConfigEngine is not provided in DI anymore, this was causing a bug where all NGXLogger instances share the same config (only the forRoot call would make a NGXLogger instance independant) fixes #282
    • Now ConfigEngine is instantiated by the INGXLoggerConfigEngineFactory, the call is made in NGXLogger constructor
    • The INGXLoggerConfigEngineFactory is provided in DI if any user wants to tweak this behavior

[5.0.4] - 2021-12-06

Changed

  • Lib is now built with Angular v13
  • Lib is now built in ivy compatible mode (fixes #277)

[5.0.3] - 2021-11-08

Added

  • Added a step in the ServerService that allow users to fully customise the body sent to the API (see example in customise doc)

[5.0.2] - 2021-11-08

Changed

  • HttpClientModule is not needed by default anymore If HttpClientModule is not imported and you use the ServerSide logger, it will log an error If HttpClientModule is not imported and you use the enableSourceMaps, it will log an error

[5.0.1] - 2021-11-07

Added

  • NGXLogger is now fully customisable, see more in docs

Changed

  • Column number is now displayed by default in metadata before "... [my-component.ts:15] ..." after "... [my-component.ts:15:10] ..."
  • null sent in message will still log something before "this.logger.error(null, myVar)" would not log anything, now it does if you want to come back to the old behavior, you can override INGXLoggerRulesService

Breaking Changes

  • LoggerConfig is renamed to INGXLoggerConfig
  • NGXLogInterface is changed to INGXLoggerMetadata
  • LoggerColorScheme is renamed to NGXLoggerColorScheme
  • NGXMapperService is renamed to INGXLoggerMapperService
  • NGXLoggerHttpService is renamed to INGXLoggerServerService
  • If server logger fails it now throws an exception instead of logging an error
  • LoggerUtils is deleted
  • For server side logging : If an error is sent (in message or in additional) then we return the error.stack only. It was done only for message now it is also done for additional.
  • NgxLoggerService is not a singleton anymore and respects Angular DI rules (before it was providedIn: 'root')

Deprecated features

  • CustomNGXLoggerService is now deprecated because the Logger is now fully customisable
  • NGXLoggerMonitor is now deprecated, you should use INGXLoggerMonitor instead
  • setCustomHttpHeaders is now deprecated, the property is now part of the config
  • setCustomParams is now deprecated, the property is now part of the config
  • setWithCredentialsOptionValue is now deprecated, the property is now part of the config

[4.2.3, 4.3.0, 4.3.1, 4.3.2 and 4.3.3] - 2021-07-12 & 2021-07-13

NB : those changelogs where not added correctly when the version was published, I reread all the commits to update changelog

Note about version numbers : 4.2.3 was never published (but it was commited) 4.3.1 publish was bugged and was changed for 4.3.2 right after

Breaking changes

  • NGXLoggerService is now a singleton (used with providedIn: 'root') For information, this change was reverted in 5.x.x so that the lib respects Angular DI rules and you have control on how you want to provide NGXLogger instances

Changes

  • (internal) Changed the way some internal services were provided
  • (internal) e2e project was deleted because it was not used
  • Added forChild function to LoggerModule

[4.2.2] - 2021-05-23

Fixed

  • Fix getcolor, colorscheme was not binded correctly #253. Thanks @jschank

Added

[4.2.1] - 2021-02-23

Fixed

  • Fix for sourcemap parsing in Firefox #227. Thanks @bmtheo
  • Fix for logging complex structures (circular) without introducing a new dependency #223. Thanks @bmtheo

[4.2.0] - 2021-02-22

Added

  • A new option proxiedSteps {number} has been introduced. When set to a number, the given number of steps will be ignored in the stacktrace to compute the caller location. If you happen to always see the same location reported in the logs (for example a wrapper service of your own), tune this option to skip this step in the stack traces #192. Thanks @amilor & @bmtheo
  • New config option disableFileDetails (defaults to false). When set to true, filename details will not be shown in log messages (#214). Thanks @Raphy
  • Calling the debug endpoint now use console.debug api on the browser (#213). Thanks @bmtheo
  • Gives direct accesss to current log levels through level() and serverLogLevel(). #215. Thanks @bmtheo

Fixed

  • Fix missing HttpClientModule import (#212). Thanks @markterrill
  • Various dependencies bumps

Changed

  • Now in order to display the messages in the debug level you need to enable “verbose” or "debug" mode in the developer tools - console of the browser.

  • Firefox – Enable debug

  • Chrome – Enable verbose
  • Edge – Enable verbose
  • Opera – Enable verbose

[4.1.8] - 2020-04-16

Fixed

  • Fixed issues with filename and line number being incorrect

[4.1.7] - 2020-04-16

Added

  • Now supports custom color schemes for logs (see README)

[4.1.5] - 2020-04-16

Fixed

  • Now support custom format timestamps in addition to pre-defined ones in Angular @qortex. Fixes #178.

Breaking changes for NGX Logger 3.* to 4.*

  • Importing mocks and the logger testing module should now be imported from the new testing entrypoint
    • import {LoggerTestingModule} from 'ngx-logger/testing';