Angular integration

Vantmetry works in any Angular app through the core init and logger API. Providing a custom ErrorHandler captures the errors Angular routes through its own handler.

Installation

npm install vantmetry

Setup

Initialize the tracker in your entry file, before the app bootstraps:

// src/main.ts, before bootstrapApplication
import { init } from 'vantmetry';

init({ publicKey: 'YOUR_PUBLIC_KEY' });

Create a custom error handler that forwards to the logger:

// src/app/vantmetry-error-handler.ts
import { ErrorHandler, Injectable } from '@angular/core';
import { logger } from 'vantmetry';

@Injectable()
export class VantmetryErrorHandler implements ErrorHandler {
  handleError(error: unknown): void {
    logger.error(error);
    console.error(error);
  }
}

Register it as the ErrorHandler provider:

// src/app/app.config.ts
import { ErrorHandler, type ApplicationConfig } from '@angular/core';
import { VantmetryErrorHandler } from './vantmetry-error-handler';

export const appConfig: ApplicationConfig = {
  providers: [{ provide: ErrorHandler, useClass: VantmetryErrorHandler }],
};

For NgModule apps, register the same provider object in the providers array of AppModule instead of app.config.ts. The console.error(error) line keeps Angular's default console output visible.

Why the custom ErrorHandler matters

Angular catches uncaught exceptions from components, services, and lifecycle hooks and routes them to the application ErrorHandler instead of letting them reach window.onerror. Without providing a handler that forwards to the tracker, those errors never reach Vantmetry. Errors outside Angular's boundary, such as async code or other scripts on the page, are still captured automatically by init.

Structured logging

Use logger anywhere in your app to record context alongside an error:

import { logger } from 'vantmetry';

async function loadDashboard() {
  try {
    await this.dashboard.load();
  } catch (error) {
    logger.error('Dashboard load failed', { view: 'dashboard' });
  }
}

Source maps

To get readable stack traces from your minified production build, emit source maps. See Source maps for the details and Angular CLI configuration.

Core Features

For details on batching, deduplication, circuit breaker, PII masking, and other core tracker features, see the main Tracker page.