Angular SDK

@logtide/angular integrates LogTide with Angular through a custom ErrorHandler, an HttpInterceptor for trace propagation, Core Web Vitals collection, and session tracking.

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 {}

Source Maps (CLI)

To see original source code in your stack traces, upload your source maps after the build. Angular generates source maps in the dist/browser directory.

# Install the CLI
npm install -g @logtide/cli

# Upload source maps
logtide sourcemaps upload --path ./dist/browser --release 1.0.0 --apiKey YOUR_API_KEY

Core Web Vitals

LogTide automatically monitors performance metrics (LCP, FID, CLS, INP, TTFB) through the Angular providers. You can view these metrics in the Metrics section of your dashboard.

Session Tracking

LogTide correlates all client-side logs, errors, and performance metrics using a unique session_id. This allows you to trace the entire user journey leading up to an error.

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 { hub } from '@logtide/core';

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

    try {
      // ... process purchase
      hub.captureLog('info', 'Purchase completed', {
        orderId: '123',
      });
    } catch (error) {
      hub.captureError(error, { 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.