Sign up Login Blog

Angular

Collect logs from any Angular applications.

Installation

Using NPM

npm i @logshq.io/angular --save

using YARN

yarn add @logshq.io/angular

If you don't have yarn installed, install it globally:

npm install --global yarn

Examples

The library is really easy to work with, simply import it and use your Stream and Project API keys

Track errors globally

Angular provides a way to handle errors globally using Angular's ErrorHandler service. Here's an example of how you can set up global error handling in your Angular application:

  1. Create a new class that implements the Angular ErrorHandler interface:

// error.handler.ts
import { ErrorHandler, Injectable } from '@angular/core';
import { LogsHQLogger } from '@logshq.io/angular';

@Injectable()
export class GlobalErrorHandler implements ErrorHandler {

  constructor(private logger: LogsHQLogger) {}
  
  handleError(error: any): void {
    this.logger.error(error);
  }
}

  1. In your app.module.ts file, import the error.handler.ts class and add it to the providers array:

import { ErrorHandler, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LogsHQModule } from '@logshq.io/angular'; // <= our library

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { GlobalErrorHandler } from './error.handler';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    LogsHQModule.forRoot({            // <= your configuration here
      project_id: 'YOUR_PROJECT_ID',  // environment.project_id
      api_key: 'YOUR_API_KEY',        // environment.api_key
      hostname: 'your-host-name',     // environment.service_name
      environment: 'dev',             // environment.env
    })
  ],
  providers: [
    { provide: ErrorHandler, useClass: GlobalErrorHandler} // <= import your Error handler
  ],
  bootstrap: [AppComponent]
})

export class AppModule { }

Now any unhandled errors that occur in your application will be caught by the GlobalErrorHandler class. You can customize the handleError method to log errors to send them to our remote logging infrastructure.

That's it! Now any unhandled errors that occur in your Angular application will be caught by the GlobalErrorHandler class and can be handled as needed.

Add logs to every piece of your Angular application

You can use LogsHQ built-in logging service called LogsHQLogger. The Logger service provides a way to log messages with different levels such as debug, info, warn, and error. Here's an example of how to use the LogsHQLogger service to add logs to every piece of your Angular application:

// Inside a componen
import { Component } from '@angular/core';
import { LogsHQLogger } from '@logshq.io/angular';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private logger: LogsHQLogger) {
    this.logger.info('Inside constructor', {a: 'b'})
  }

  ngOnInit() {
    this.logger.debug('AppComponent initialized');
  }
}

Use the LogsHQLogger service in your component, service, or any other class where you want to add logs. You can inject the Logger service into your constructor and use it to log messages:

import { Injectable } from '@angular/core';
import { LogsHQLogger } from '@logshq.io/angular';

@Injectable({
  providedIn: 'root'
})
export class TestService {

  constructor(private logger: LogsHQLogger) { }

  apiCall() {
    try {
      this.logger.debug('A useful debug message')
      throw new Error('Throw some error')
    } catch (error) {
      this.logger.error(error, {
        service: 'TestService',
        method: 'apiCall',
        anyUsefulDetail: 'here' 
      })
    }
  }
}

That's it! With the LogsHQLogger service, you can easily add logs to every piece of your Angular application and customize the level of messages to log.

Configuration options

PreviousIntegrationsNextNode.js

Last updated