@bugbybug/angular

The official Angular SDK for BugByBug. This library provides a seamless integration with Angular's dependency injection system and global error handling mechanism.

Installation

npm install @bugbybug/angular

Usage

Setup in Application Config

For Standalone Applications (Angular 15+):

In your app.config.ts:

import { ApplicationConfig } from '@angular/core';
import { provideBugByBug } from '@bugbybug/angular';

export const appConfig: ApplicationConfig = {
  providers: [
    provideBugByBug({
      apiKey: 'YOUR_PROJECT_API_KEY', // Starts with bbb_
      environment: 'production'
    })
    // ... other providers
  ]
};

For Module-based Applications:

In your app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { provideBugByBug } from '@bugbybug/angular';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [
    provideBugByBug({
      apiKey: 'YOUR_PROJECT_API_KEY',
      environment: 'production'
    })
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Identifying Users

You can inject the BugByBugService into your authentication service or components to set the user context.

import { Component } from '@angular/core';
import { BugByBugService } from '@bugbybug/angular';

@Component({ ... })
export class LoginComponent {
  constructor(private bugByBug: BugByBugService) {}

  onLoginSuccess(user: any) {
    this.bugByBug.setUser(user.id, user.email);
  }
}

Manual Error Capture

The SDK automatically captures unhandled exceptions. However, if you catch an exception and want to report it manually:

try {
  this.doSomethingRisky();
} catch (error) {
  this.bugByBug.captureException(error, { component: 'LoginComponent' });
}

Features

Automatic Angular Error Handling: Implements Angular's ErrorHandler to catch template errors, lifecycle hook errors, and more.

Zone.js Integration: Ensures errors are reported without interfering with Angular's change detection cycles.

Full Core SDK Power: Includes all features of the browser SDK (Breadcrumbs, Device Info, Performance metrics).