Official LogsHQ.io logger for Angular

The official LogsHQ.io notifier for capturing errors in Angular and reporting them to LogsHQ.

Installation

Using npm:

npm install @logshq.io/angular --save

Using yarn:

yarn add @logshq.io/angular

PS

Compatible with Angular version >= 8

Usage

Create a Stream and get your Stream API KEY, and use it like this:

Example 1

Add logs in every piece of your App

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

// <= import module here
import { LogsHQModule } from '@logshq.io/angular';

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

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    LogsHQModule.forRoot({            // <= Add module 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: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Logging inside your Components

import { Component } from '@angular/core';
import { LogsHQLogger } from '@logshq.io/angular'; // <= Import 

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  constructor(private logger: LogsHQLogger) { // 
    this.logger.silly("I'm silly log")  // <= Your log 
  }
  
  SomeMethod() {
    this.logger.info("I'm an info message", {
      param1: '1',
      param2: '2'
    })  // <= Your log 
  }

}

Logging inside your Service

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

@Injectable({
  providedIn: 'root'
})
export class TestService {
  constructor(private logger: LogsHQLogger) { }
  
  someFunction() {
      try {
          JSON.parse("Sorry can't parse this")
      } catch (error) {
        // Log your error here
         this.logger.error(error, {
            someParam: 'ABC'
         })
      }
  }
  apiCall() {
    // ...
    this.logger.info('Some clear message here')
    // ...
  }
}

Example 2

A traditional way of handling errors in Angular is to provide an ErrorHandler class. This class can be extended to create your own global error handler. This is also a useful way to handle all errors that occur.

Create the Error handler class that implements ErrorHandler

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

@Injectable()
export class LogsHQErrorHandler implements ErrorHandler {
  constructor(private logger: LogsHQLogger) {}

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

And add it the provider section in your module

import { ErrorHandler, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LogsHQModule } from 'projects/logshq.io/angular/src/public-api';
// import { AngularModule } from '@logshq.io/angular';

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


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    LogsHQModule.forRoot({            // <= Add module 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: LogsHQErrorHandler} // <= Add your class here
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

More Docs