Vendor-agnostic logging, analytics and telemetry service abstractions and some implementations for Angular applications.
- Log service provides both application scoped root logger and category scoped child loggers with
createLogger(categoryName)method. - Category scoped child loggers can be destroyed with
destroyLogger(categoryName)method - Supports both standard logging api (
trace,debug,info,warn,error,fatal) and telemetry tracking api (trackPageView,trackEvent, etc.) - Support measuring user timings for events and page views with
startTrackEvent,stopTrackEvent,startTrackPageandstopTrackPage - Extendable and plugable logging providers (see built-in ConsoleLoggerProvider for implementation demo)
- Flexable logging configuration
- Latest version of Angular and compatible with server side rendering (SSR / Angular Universal)
npm
npm install @dagonmetric/ng-logor yarn
yarn add @dagonmetric/ng-logThe following code is a simple module setup with ConsoleLoggerModule.
import { LogModule } from '@dagonmetric/ng-log';
import { ConsoleLoggerModule } from '@dagonmetric/ng-log/console';
@NgModule({
imports: [
// Other module imports
// ng-log modules
LogModule.withConfig({ minLevel: 'debug' }),
ConsoleLoggerModule
]
})
export class AppModule { }See log-config.ts source file to learn more about options for LogModule.
Live edit app.module.ts in stackblitz
import { Component, OnInit } from '@angular/core';
import { LogService } from '@dagonmetric/ng-log';
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
constructor(private readonly logService: LogService) { }
ngOnInit(): void {
// Track traces
this.logService.trace('Testing trace');
this.logService.debug('Testing debug');
this.logService.info('Testing info');
this.logService.warn('Testing warn');
// Track exceptions
this.logService.error(new Error('Testing error'));
this.logService.fatal(new Error('Testing critical'));
// Track page view
this.logService.trackPageView({
name: 'My Angular App',
uri: '/home'
});
// Track custom event
this.logService.trackEvent({
name: 'video_auto_play_start',
properties: {
non_interaction: true
}
});
// Create child logger with category name
const childLogger = this.logService.createLogger('component1');
// Log with child logger
childLogger.info('Testing info');
// Destroy child logger
this.logService.destroyLogger('component1');
}
}Live edit app.component.ts in stackblitz
- Demo app view source / live edit in stackblitz
- ng-log-console - Console logging implementation for
ng-log
- ng-log-applicationinsights - Microsoft Azure Application Insights implementation for
ng-log - ng-log-gtag - Google Analytics Global Site Tag gtag.js implementation for
ng-log - ng-log-firebase-analytics - Google Firebase Analytics implementation for
ng-log - ng-log-facebook-analytics - Facebook Pixel Analytics implementation for
ng-log
- ng-config - Configuration & options service for Angular applications
- ng-cache - Caching service for Angular applications
We use lib-tools for bundling, testing and packaging our library projects.
Check out the Contributing page.
This repository is licensed with the MIT license.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent