npm package: @logshq.io/angular
Description: <p align="left">   <img src="https://logshq.io/logo-480.jpg" width="200"> </p>
Author: LogsHQ LTD
Latest version: 1.0.8

<p align="left">
  <img src="https://logshq.io/logo-480.jpg" width="200">
</p>

# Official LogsHQ.io logger for Angular

The official LogsHQ.io notifier for capturing errors in Angular and reporting them to [LogsHQ](https://www.logshq.io/).

## Installation

Using npm:

```sh
npm install @logshq.io/angular --save
```

Using yarn:

```sh
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
```js
// 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
```js
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

```js
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 
```js
// 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

```js
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](https://docs.logshq.io/reference/integrations/angular)