Angular Logging, Analytics and Telemetry Service

Vendor-agnostic logging, analytics and telemetry service abstractions and some implementations for Angular applications.

Features

• 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, startTrackPage and stopTrackPage
• 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)

Getting Started

Installation

npm

npm install @dagonmetric/ng-log

or yarn

yarn add @dagonmetric/ng-log

Module Setup (app.module.ts)

The 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

Usage (app.component.ts)

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

Samples

• Demo app view source / live edit in stackblitz

Sub-modules

• ng-log-console - Console logging implementation for ng-log

Integrations

• 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

Related Projects

• ng-config - Configuration & options service for Angular applications
• ng-cache - Caching service for Angular applications

Build & Test Tools

We use lib-tools for bundling, testing and packaging our library projects.

Feedback and Contributing

Check out the Contributing page.

License

This repository is licensed with the MIT license.