Angular

ByteHide Logger integrates with Angular applications through services and provides comprehensive logging for components and services.

Installation

npm install @bytehide/logger @angular/core

Logger Service

// services/logger.service.ts
import { Injectable } from '@angular/core';
import { Log } from '@bytehide/logger';

@Injectable({
    providedIn: 'root'
})
export class LoggerService {
    constructor() {
        Log.configure({
            projectToken: environment.byteHideToken,
            logLevel: 'info'
        });
        
        Log.info('Angular logger service initialized');
    }
    
    info(message: string, options?: any) {
        Log.info(message, options);
    }
    
    warn(message: string, options?: any) {
        Log.warn(message, options);
    }
    
    error(message: string, options?: any, error?: Error) {
        Log.error(message, options, error);
    }
    
    identify(userId: string, email?: string) {
        Log.identify(userId, email);
    }
}

Environment Configuration

// environments/environment.ts
export const environment = {
    production: false,
    byteHideToken: 'your-project-token'
};

Component Usage

// components/user.component.ts
import { Component, OnInit, OnDestroy } from '@angular/core';
import { LoggerService } from '../services/logger.service';

@Component({
    selector: 'app-user',
    templateUrl: './user.component.html'
})
export class UserComponent implements OnInit, OnDestroy {
    constructor(private logger: LoggerService) {}
    
    ngOnInit() {
        this.logger.info('UserComponent initialized');
    }
    
    ngOnDestroy() {
        this.logger.info('UserComponent destroyed');
    }
    
    onButtonClick() {
        this.logger.info('Button clicked', {
            context: { component: 'UserComponent', action: 'click' }
        });
    }
}

HTTP Interceptor

// interceptors/logging.interceptor.ts
import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler } from '@angular/common/http';
import { LoggerService } from '../services/logger.service';

@Injectable()
export class LoggingInterceptor implements HttpInterceptor {
    constructor(private logger: LoggerService) {}
    
    intercept(req: HttpRequest<any>, next: HttpHandler) {
        this.logger.info('HTTP request started', {
            context: { 
                method: req.method, 
                url: req.url 
            }
        });
        
        return next.handle(req).pipe(
            tap(
                response => {
                    this.logger.info('HTTP request completed', {
                        context: { 
                            method: req.method, 
                            url: req.url,
                            status: response.status 
                        }
                    });
                },
                error => {
                    this.logger.error('HTTP request failed', {
                        context: { 
                            method: req.method, 
                            url: req.url 
                        }
                    }, error);
                }
            )
        );
    }
}

Error Handler

// error-handler.ts
import { ErrorHandler, Injectable } from '@angular/core';
import { LoggerService } from './services/logger.service';

@Injectable()
export class GlobalErrorHandler implements ErrorHandler {
    constructor(private logger: LoggerService) {}
    
    handleError(error: any): void {
        this.logger.error('Global error handler caught error', {
            context: { source: 'GlobalErrorHandler' }
        }, error);
    }
}

App Module Configuration

// app.module.ts
import { NgModule, ErrorHandler } from '@angular/core';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { LoggerService } from './services/logger.service';
import { LoggingInterceptor } from './interceptors/logging.interceptor';
import { GlobalErrorHandler } from './error-handler';

@NgModule({
    providers: [
        LoggerService,
        {
            provide: HTTP_INTERCEPTORS,
            useClass: LoggingInterceptor,
            multi: true
        },
        {
            provide: ErrorHandler,
            useClass: GlobalErrorHandler
        }
    ]
})
export class AppModule {}

Route Logging

// app-routing.module.ts
import { Router, NavigationEnd } from '@angular/router';
import { LoggerService } from './services/logger.service';

@Injectable()
export class AppRoutingModule {
    constructor(
        private router: Router,
        private logger: LoggerService
    ) {
        this.router.events.pipe(
            filter(event => event instanceof NavigationEnd)
        ).subscribe((event: NavigationEnd) => {
            this.logger.info('Route navigation completed', {
                context: { url: event.url }
            });
        });
    }
}

Best Practices