@gpeel/plog v17.1.1
Colorful logs with @gpeel/plog
This library was generated with Angular CLI version 17.0.9
For Angular 16 use @gpeel/plog 16.1.0 or more recent For Angular 12 to 15 => use @gpeel/plog 12.2.0 For Angular 11.x.y => use @gpeel/plog@11.0.1 (last version for angular 11)
npm repo: https://www.npmjs.com/package/@gpeel/plog
Github repo at : https://github.com/gpeel/gpeel-plog-ng17
Medium story : https://medium.com/p/62dd10ba3d10/edit
INSTALLATION
npm i @gpeel/plog
Example of what you get
You get obvious colors and also keep the logs clickable to navigate to your source code.
To get those style the activated loggers have been defined in a file (for example plog-config.ts) as follow:
export const plogConfig: PlogConfig = {
createComponent: ['color:green;', 'New-@Comp'],
error: 'color:red; font-size:1rem;',
warn: 'color:orange',
info: 'color:blue',
debug: 'color:limegreen;font-weight:bold',
action: ['color:#8f72cf; font-weight:bold;', '@ACTION'], // to log inside Action method
tu: ['color:blue; font-size:1rem;', 'TU'],
errorState: ['color:#cf3c04', '@ERROR'], // to log error in Store
};
And the result is =>
DECLARATION as a MgModule
import {PlogModule} from '@gpeel/plog';
import {environment} from '../environments/environment';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
PlogModule.forRoot(plogConfig) // <<< HERE, takes into account you loggers definition
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {
}
Default loggers definition
For your developpment you typically would activate much more loggers.
You can find an example of ALL available loggers in PLOG_CONFIG_DEFAULT where all loggers are activated :
export const PLOG_CONFIG_DEFAULT = {
debug: 'color:limegreen',
info: 'color:blue',
error: 'color:red',
warn: 'color:orange',
// Performance logs
perf: 'color:darkturquoise',
perfComponent: ['color:darkturquoise', 'PERF-¤¤'],
perfCD: ['color:darkturquoise', 'PERF-¤¤¤¤¤¤¤'],
perfDom: ['color:darkturquoise', 'PERF-¤-¤-¤-¤'],
// NG hooks
ngOnChanges: ['color:orange', 'OnChange'],
ngOnInit: ['color:orange', 'OnInit'],
ngOnDestroy: ['color:orange', 'OnDestroy'],
ngDoCheck: ['color:orange', 'DoCheck'],
ngAfterContentInit: ['color:orange', 'AfterContentInit'],
ngAfterContentChecked: ['color:orange', 'AfterContentChecked'],
ngAfterViewInit: ['color:orange', 'AfterViewInit'],
ngAfterViewChecked: ['color:orange', 'AfterViewChecked'],
// constructor logs
create: ['color:green', 'new'],
createComponent: ['color:green', 'New-@Comp'],
createDirective: ['color:green', 'New-@Dir'],
createService: ['color:green', 'New-Svc'],
createPipe: ['color:green', 'New-@Pipe'],
createGuard: ['color:green', 'New-@Guard'],
createResolver: ['color:green', 'New-@Resolver'],
// NG types
resolve: ['color:brown', 'RESOLVE'],
guard: ['color:sandybrown', 'GUARD'],
validator: 'color:plum',
pipe: 'color:brown',
callback: 'color:violet',
state: 'color:blueviolet', // Redux style or BehaviorSubject, as you want
// specific logs for NGXS, Akita
action: ['color:#8f72cf', '@ACTION'], // to log inside Action method
data: ['color:coral', 'DATA'],
onAction: ['color:orange', 'ON'], // log for onClick() ... NG event Handlers
event: ['color:dodgerblue', 'EVENT'],
select: ['color:#84467c', '@SELECT'], // to log inside select method
errorState: ['color:#cf3c04', '@ERROR'], // to log error in Store
effect: ['color:8F72CF', '@EFFECT'], // to log inside effect method (even if using @Effet is not advised)
cache: ['color:blueviolet', 'CACHE'],
signal: ['color:blueviolet', 'SIGNALS'],
siEffect: ['color:blueviolet', 'SIGNALS-EFFECT'],
siEffectCleanup: ['color:blueviolet', 'SIGNALS-EFFECT-CLEANUP'],
siSet: ['color:blueviolet', 'SIGNALS-SET'],
siModif: ['color:blueviolet', 'SIGNALS-MODIF'],
siUpdate: ['color:blueviolet', 'SIGNALS-UPDATE'],
siMutate: ['color:blueviolet', 'SIGNALS-MUTATE'],
siComputed: ['color:blueviolet', 'SIGNALS-COMPUTED'],
formValueChanges: ['orange', 'FORM-VALUE'],
formEvent: ['greenyellow', 'FORM-EVENT'],
streamEvent: ['darkorange', 'STREAM'],
subscription: ['coral', 'SUBSCRIBED-DATA'],
unsubscription: ['coral', 'UN-SUBSCRIPTION'],
// Specific loggers for @gpeel/my-validators
validationCompute: ['color:orange', '@VALID'], // tracing validators when they compute
validationErrorMsgRefresh: ['color:orange', '@VALID_PERF'], // tracing refresh of <my-error-msg>
validationErrorMsgCreation: ['color:orange', '@ERROR_MSG_NEW'], // tracing creation of component <my-error-msg>
errorMsg: ['color:orange', '@VALID'], // used by <error-msg> deprecated
// network actions (interceptors)
network: ['color:blue', 'HTTP'],
networkRequest: ['color:blue', 'HTTP-Request'],
networkResponse: ['color:blue', 'HTTP-Response'],
networkError: ['color:red', 'HTTP-Error'],
networkCreate: ['color:green', 'NEW-HTTP'],
httpCall: ['color:springgreen', 'HTTP-CALL'], // http prefix : for service logic
httpSuccess: ['color:springgreen', 'HTTP-SUCCESS'],
httpError: ['color:red', 'HTTP-ERROR'],
httpDebug: ['color:springgreen', 'HTTP-TAP'],
obsSubscribe: ['color:springgreen', 'OBS-sub'],
obsSuccess: ['color:springgreen', 'OBS-SUCCESS'],
obsError: ['color:red', 'OBS-ERROR'],
obsDebug: ['color:springgreen', 'OBS-DEBUG'],
obsComplete: ['color:springgreen', 'OBS-COMPLETE'],
// tests
tu: ['color:slateblue', 'tu'],
tuBeforeEach: ['color:slateblue', 'tu-BEFORE-EACH'],
tuBeforeAll: ['color:slateblue', 'tu-BEFORE-ALL'],
tuAfterEach: ['color:tomato', 'tu-AFTER-EACH'],
tuAfterAll: ['color:tomato', 'tu-AFTER-ALL'],
tuArrange: ['color:blue', 'tu'],
tuAct: ['color:blueviolet', 'tu'],
tuAssert: ['color:brown', 'tu'],
ti: ['color:green', 'ti'],
te2e: ['color:green', 'e2e'],
// colors
pink: ['color:#FF40BD;', '############'], // pink flashy
red: ['color:red', '############'],
orange: ['color:orange', '############'],
green: ['color:springgreen', '############'],
blue: ['color:cadetblue', '############'],
lightBlue: ['color:darkturquoise', '############'],
violet: ['color:blueviolet', '############'],
// same color-loggers with a prefix 'color' (easier to find with intellisense)
colorPink: ['color:#FF40BD;', '############'], // pink flashy
colorRed: 'color:red', // red without the console.error() stacktrace
colorOrange: ['color:orange', '############'],
colorGreen: ['color:springgreen', '############'],
colorBlue: ['color:cadetblue', '############'],
colorLightBlue: ['color:darkturquoise', '############'],
colorViolet: ['color:blueviolet', '############'],
feature1: ['color:blueviolet', 'FEATURE1'],
feature2: ['color:dodgerblue', 'FEATURE2'],
feature3: ['color:blue', 'FEATURE3'],
feature4: ['color:deepskyblue', 'FEATURE4'],
feature5: ['color:hotpink', 'FEATURE5'],
feature6: ['color:deeppink', 'FEATURE6'],
feature7: ['color:mediumspringgreen', 'FEATURE7'],
feature8: ['color:greenyellow', 'FEATURE8'],
feature9: ['color:green', 'FEATURE9'],
step1: ['color:blueviolet', 'STEP1'],
step2: ['color:dodgerblue', 'STEP2'],
step3: ['color:blue', 'STEP3'],
step4: ['color:deepskyblue', 'STEP4'],
step5: ['color:hotpink', 'STEP5'],
step6: ['color:deeppink', 'STEP6'],
step7: ['color:mediumspringgreen', 'STEP7'],
step8: ['color:greenyellow', 'STEP8'],
step9: ['color:green', 'STEP9'],
usecase1: ['color:blueviolet', 'USECASE1'],
usecase2: ['color:dodgerblue', 'USECASE2'],
usecase3: ['color:blue', 'USECASE3'],
usecase4: ['color:deepskyblue', 'USECASE4'],
usecase5: ['color:hotpink', 'USECASE5'],
usecase6: ['color:deeppink', 'USECASE6'],
usecase7: ['color:mediumspringgreen', 'USECASE7'],
usecase8: ['color:greenyellow', 'USECASE8'],
usecase9: ['color:green', 'USECASE9'],
event1: ['color:blueviolet', 'EVENT1'],
event2: ['color:dodgerblue', 'EVENT2'],
event3: ['color:blue', 'EVENT3'],
event4: ['color:deepskyblue', 'EVENT4'],
event5: ['color:hotpink', 'EVENT5'],
event6: ['color:deeppink', 'EVENT6'],
event7: ['color:mediumspringgreen', 'EVENT7'],
event8: ['color:greenyellow', 'EVENT8'],
event9: ['color:green', 'EVENT9'],
};
To deactivate a logger, simply comment its line.
You can change the CSS (color or anything else), and the prefix.
you can choose the color and the prefix :
aLogger: [ YourCSS, YourLogPrefix>],
example
action: ['color:orange', '@ACTION'],
Plog.action("message"); will log
@ACTION: message
Typescript source codes are delivered inside the installed packge in node_modules/@gpeel/plog/src/lib
2 months ago
4 months ago
4 months ago
10 months ago
9 months ago
9 months ago
10 months ago
9 months ago
9 months ago
9 months ago
9 months ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago