Logger is a small Angular service for writing output to the browser's console. It helps make
console messages easier to filter by prefixing messages with the current class name. So if you have a component named MainComponent you
can filter by Main: and see only console messages from that component.
Logger extends console so messages continue to display the current filename and line number.
For example;
@Component({...})
export class MainComponent implements OnInit {
private _log: LogService;
private _subject: Subject<string> = new Subject();
public constructor(log: LogService) {
this._log = log.withPrefix(MainComponent.name);
}
public ngOnInit() {
this._log.debug('Hello world!');
// ^^^ outputs "Main: Hello world!"
}
}- What is Logger?
- Table Of Contents
- Why another console logger for Angular?
- Installation
- LoggerConfig
- LogService
- LogService Prefixes
- LogService Methods
I've been copying and pasting the same log service between projects for several years. Everything else I tried was either too complicated or erased the file name and line number from the browser's console output, and I just kept reusing my trusty logger code. I decided it was time to make it a library that could be easily installed and reused.
Logger works exactly the same as the console object in your browser. The only differences are:
- you have to inject LogService
- you have to give it a prefix
It can be added to your classes quickly with an extra parameter on the constructor and two more lines of code. I feel that it greatly improves the readability of the console messages making this small extra work worthwhile.
For example;
@Component({..})
export class MainComponent {
private _log: LogService;
constructor(log: LogService) {
this._log = log.withPrefix(MainComponent.name);
}
}The prefix value can be anything that you want, but using MainComponent.name means that the value will be
updated if you rename the class using an IDE that automatically updates all usages.
To get started, install the package from npm.
npm install @reactgular/loggerthen in app.module.ts, import the LoggerModule:
import {NgModule} from '@angular/core';
import {LoggerModule} from '@reactgular/logger';
@NgModule({
imports: [
LoggerModule.forRoot({enabled: true})
]
})
export class AppModule {}When you include the module in the import, you can pass a configuration object of type LoggerConfig.
If you are lazy loading, you can just use the LoggerModule module.
Options such as enabled can be passed to the module as the second argument in the forRoot method. When enabled is
set to false the log service gets replaced with a tiny proxy service and outputs nothing.
It's important for you add LoggerModule.forRoot() at the root of your modules.
You can provide a config object of type LoggerConfig, as the first parameter for LoggerModule.forRoot().
@NgModule({
imports: [
LoggerModule.forRoot({
console: window.console,
enabled: !environment.production,
levels: LOGGER_LEVEL.DEBUG | LOGGER_LEVEL.ERROR | LOGGER_LEVEL.INFO | LOGGER_LEVEL.LOG | LOGGER_LEVEL.WARN,
tails: ['Component', 'Directive', 'Service', 'Factory', 'Pipe', 'Module', 'Resolver', 'Provider']
})
]
})
export class AppModule {}The LogService object provides access to the browser's debugging console, because the specifics of how the console works
across different browsers varies the available methods are debug(), log(), info(), error() and warn().
constructor(log: LogService) {
log.info('The constructor method was executed.');
}When you're using the LogService with Angular classes like components, services, pipes, etc. The name of those classes can be used to set the
prefix string for each log message to the console. Using a prefix value of "MainComponent" can create wide console messages. So this function
creates a new LogService object with a trimmed prefix where the tail strings have been removed.
For example;
The following prefix "MainComponent" will be rewritten to "Main".
@Component({...})
export class MainComponent {
private _log: LogService;
constructor(log: LogService) {
this._log = log.withPrefix(MainComponent.name);
}
}When you set the tails option in the LoggerConfig it replaces all the tails that are removed from prefixes. If you don't define an
array of strings to fails then these default values will be used.
/**
* Defaults list of tails to remove.
*/
export const LOGGER_TAILS_DEFAULT = ['Component', 'Directive', 'Service', 'Factory', 'Pipe', 'Module', 'Resolver', 'Provider'];If you want to add additional tails to be removed you can configure the logger like this:
import {LoggerModule, LOGGER_TRAILS_DEFAULT} from '@reactgular/logger';
@NgModule({
imports: [
LoggerModule.forRoot({
tails: [...LOGGER_TAILS_DEFAULT, 'FooBar', 'Magic', 'Proxy']
})
]
})
export class AppModule {}This section documents methods available on the LogService object and gives a few usage examples.
Outputs a message to the console with the log level "debug".
This method can be disabled by excluding LOGGER_LEVEL.DEBUG from the levels property of LoggerConfig.
Starting with Chromium 58 this method only appears in Chromium browser consoles when level "Verbose" is selected.
Outputs an error message. You may use string substitution and additional arguments with this method.
This method can be disabled by excluding LOGGER_LEVEL.ERROR from the levels property of LoggerConfig.
Informative logging of information. You may use string substitution and additional arguments with this method.
This method can be disabled by excluding LOGGER_LEVEL.INFO from the levels property of LoggerConfig.
Outputs a warning message. You may use string substitution and additional arguments with this method.
This method can be disabled by excluding LOGGER_LEVEL.WARN from the levels property of LoggerConfig.
Returns the prefix string used by the LogService object.
Sets a new prefix for the logger. This will change the internal prefix value used by the LogService. This function does not have the same
effect as withPrefix() which returns a new LogService object with a trail strings removed for the prefix.
Creates a new LogService object with the given prefix.