LogTide SDK integration for Angular — ErrorHandler, HTTP Interceptor, trace propagation
npm install @logtide/angular

LogTide integration for Angular — ErrorHandler, HTTP Interceptor, and distributed trace propagation.
---
- ErrorHandler — captures all uncaught Angular errors
- HTTP Interceptor — traces outgoing HTTP requests, injects traceparent, captures HTTP errors
- provideLogtide() — one-line setup for standalone Angular apps (17+)
- getLogtideProviders() — provider array for NgModule-based apps
- Breadcrumbs for HTTP requests and errors
- Full TypeScript support with strict types
``bash`
npm install @logtide/angularor
pnpm add @logtide/angularor
yarn add @logtide/angular
---
`typescript
// app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
import { provideLogtide } from '@logtide/angular';
export const appConfig: ApplicationConfig = {
providers: [
provideHttpClient(withInterceptorsFromDi()),
provideLogtide({
dsn: 'https://lp_your_key@your-instance.com',
// Or use apiUrl + apiKey instead of dsn:
// apiUrl: 'https://your-instance.com',
// apiKey: 'lp_your_key',
service: 'my-angular-app',
environment: 'production',
}),
],
};
`
`typescript
// app.module.ts
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { getLogtideProviders } from '@logtide/angular';
@NgModule({
imports: [HttpClientModule],
providers: [
...getLogtideProviders({
dsn: 'https://lp_your_key@your-instance.com',
// Or: apiUrl + apiKey instead of dsn
service: 'my-angular-app',
}),
],
})
export class AppModule {}
`
---
All uncaught errors in Angular components, services, and template expressions are automatically captured with:
- Error message and stack trace
- mechanism: 'angular.errorHandler' metadata
Errors are also logged to console.error so they remain visible in DevTools.
Every HttpClient request is automatically:
1. Traced — a span is created for each request (e.g. HTTP GET /api/users)traceparent
2. Propagated — header is injected into outgoing requestserror
3. Breadcrumbed — HTTP requests and errors are recorded as breadcrumbs
4. Error-captured — HTTP errors (4xx, 5xx) are sent to LogTide with:
- HTTP method, URL, status code
- Request span marked as
---
Returns EnvironmentProviders for standalone Angular apps. Registers:APP_INITIALIZER
- — initializes the LogTide hubErrorHandler
- — replaces Angular's default with LogtideErrorHandlerHTTP_INTERCEPTORS
- — adds LogtideHttpInterceptor
`typescript
import { provideLogtide } from '@logtide/angular';
provideLogtide({
dsn: '...',
service: 'my-app',
environment: 'production',
release: '1.0.0',
});
`
Returns a Provider[] for NgModule-based apps. Same registrations as provideLogtide.
`typescript
import { getLogtideProviders } from '@logtide/angular';
@NgModule({
providers: [...getLogtideProviders({ dsn: '...', service: 'my-app' })],
})
export class AppModule {}
`
Angular ErrorHandler implementation. Use directly if you need custom error handling logic:
`typescript
import { ErrorHandler } from '@angular/core';
import { LogtideErrorHandler } from '@logtide/angular';
@NgModule({
providers: [
{ provide: ErrorHandler, useClass: LogtideErrorHandler },
],
})
`
Angular HttpInterceptor implementation. Use directly for manual registration:
`typescript
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { LogtideHttpInterceptor } from '@logtide/angular';
@NgModule({
providers: [
{ provide: HTTP_INTERCEPTORS, useClass: LogtideHttpInterceptor, multi: true },
],
})
`
---
`typescript``
import {
provideLogtide,
getLogtideProviders,
LogtideErrorHandler,
LogtideHttpInterceptor,
} from '@logtide/angular';
---
MIT License - see LICENSE for details.