Angular SDK

@logtide/angular integrates LogTide with Angular through a custom ErrorHandler, an HttpInterceptor for trace propagation, and providers for both standalone and NgModule-based apps.

Installation

npm install @logtide/angular

Standalone Setup

For Angular 17+ standalone applications:

// main.ts
import { bootstrapApplication } from '@angular/platform-browser';
import { provideLogtide } from '@logtide/angular';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, {
  providers: [
    provideLogtide({
      dsn: 'https://[email protected]',
      service: 'angular-app',
      environment: 'production',
      release: '1.0.0',
    }),
  ],
});

provideLogtide() registers the ErrorHandler, HttpInterceptor, and initializes the SDK in a single call.

NgModule Setup

For NgModule-based applications:

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

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [
    ...getLogtideProviders({
      dsn: 'https://[email protected]',
      service: 'angular-app',
      environment: 'production',
    }),
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

Error Handler

The SDK replaces Angular's default ErrorHandler to automatically capture uncaught errors with component context:

// Errors thrown in components, services, or templates
// are automatically captured with:
// - Component name and lifecycle hook
// - Route information
// - User context (if configured)
// - Breadcrumbs trail

// Example: an error in a component
@Component({ selector: 'app-dashboard', template: '...' })
export class DashboardComponent implements OnInit {
  ngOnInit() {
    // If this throws, LogTide captures it with
    // component: 'DashboardComponent', hook: 'ngOnInit'
    this.loadData();
  }
}

HTTP Interceptor

The SDK adds an HttpInterceptor that injects traceparent headers into outgoing HTTP requests and logs failed requests:

// Outgoing HttpClient requests automatically include:
// - traceparent header for distributed tracing
// - Breadcrumb for each request (url, method, status)
// - Error capture for failed requests (4xx, 5xx, network errors)

@Injectable()
export class UserService {
  constructor(private http: HttpClient) {}

  getUser(id: string) {
    // traceparent header is automatically added
    // Failed requests are automatically captured
    return this.http.get<User>('/api/users/' + id);
  }
}

Service Usage

Use the @logtide/core API directly in services and components:

import { Component } from '@angular/core';
import * as Logtide from '@logtide/core';

@Component({
  selector: 'app-checkout',
  template: '<button (click)="purchase()">Buy</button>',
})
export class CheckoutComponent {
  purchase() {
    Logtide.addBreadcrumb({
      category: 'ui',
      message: 'Purchase button clicked',
    });

    try {
      // ... process purchase
      Logtide.captureLog('info', 'Purchase completed', {
        orderId: '123',
      });
    } catch (error) {
      Logtide.captureError(error, {
        tags: { module: 'checkout' },
      });
    }
  }
}

API Reference

Export	Description
`provideLogtide(options)`	Standalone provider — registers ErrorHandler + HttpInterceptor + init
`getLogtideProviders(options)`	NgModule providers array — same as provideLogtide for module-based apps
`LogtideErrorHandler`	Custom Angular ErrorHandler (registered automatically)
`LogtideHttpInterceptor`	HttpInterceptor for trace propagation (registered automatically)

See the JavaScript SDK core docs for the full @logtide/core API.

Edit this page on GitHub