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 --api-key YOUR_API_KEY

Core Web Vitals

Core Web Vitals (LCP, INP, CLS) are opt-in: set browser.webVitals to true and install the optional web-vitals package. They are sent as info-level log events.

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:
// - mechanism: 'angular.errorHandler'
// - angular.zone: 'inside' or 'outside' NgZone
// - 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 via the ErrorHandler
    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: 'custom',
      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.