@logtide/angular

LogTide integration for Angular — ErrorHandler, HTTP Interceptor, and distributed trace propagation.

---

Features

- 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

Installation

``bash
npm install @logtide/angular


or

pnpm add @logtide/angular

or

yarn add @logtide/angular
`

---

Quick Start

$3

`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',
}),
],
};
`

$3

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

---

What Gets Captured

$3

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.

$3

Every HttpClient request is automatically:

1. Traced — a span is created for each request (e.g. HTTP GET /api/users)
2. Propagated — traceparent header is injected into outgoing requests
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 error

---

API

$3

Returns EnvironmentProviders for standalone Angular apps. Registers:
- APP_INITIALIZER — initializes the LogTide hub
- ErrorHandler — replaces Angular's default with LogtideErrorHandler
- HTTP_INTERCEPTORS — adds LogtideHttpInterceptor

`typescript
import { provideLogtide } from '@logtide/angular';

provideLogtide({
dsn: '...',
service: 'my-app',
environment: 'production',
release: '1.0.0',
});
`

$3

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

$3

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 },
],
})
`

$3

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 },
],
})
`

---

Exports

`typescript
import {
provideLogtide,
getLogtideProviders,
LogtideErrorHandler,
LogtideHttpInterceptor,
} from '@logtide/angular';
``

---

License

MIT License - see LICENSE for details.

Links

- LogTide Website
- Documentation
- GitHub