Product
API
Sign In

Angular

On this page, we provide concise information to use Sentry with your Angular application. You will need to use @sentry/angular (Sentry’s Browser Angular SDK).

Install

Sentry captures data by using an SDK within your application’s runtime. Add the Sentry SDK as a dependency using yarn or npm:

Copied
npm install --save @sentry/angular

Configure

init the Sentry browser SDK as soon as possible during your application load up, before initializing Angular:

Copied
import { enableProdMode } from "@angular/core";
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
import * as Sentry from "@sentry/angular";

import { AppModule } from "./app/app.module";

Sentry.init({ dsn: "https://examplePublicKey@o0.ingest.sentry.io/0" });

enableProdMode();
platformBrowserDynamic()
  .bootstrapModule(AppModule)
  .then(success => console.log(`Bootstrap success`))
  .catch(err => console.error(err));

Once this is done, all uncaught exceptions are automatically reported to Sentry. Additionally, you can configure @sentry/angular to catch any Angular-specific exceptions reported through the @angular/core/ErrorHandler provider.

Important: Note your DSN. The DSN (Data Source Name) tells the SDK where to send events. If you forget it, view Settings -> Projects -> Client Keys (DSN) in the Sentry web UI.

Automatically Send Errors with ErrorHandler

@sentry/angular exports a function to instantiate an ErrorHandler provider that will automatically send JavaScript errors captured by the Angular's error handler.

Copied
import { NgModule, ErrorHandler } from "@angular/core";
import * as Sentry from "@sentry/angular";

@NgModule({
  // ...
  providers: [
    {
      provide: ErrorHandler,
      useValue: Sentry.createErrorHandler({
        showDialog: true,
      }),
    },
  ],
  // ...
})
export class AppModule {}

Additionally, createErrorHandler accepts a set of options that allows you to configure its behavior. For more details see the ErrorHandlerOptions interface in our repository.

Monitor Performance

@sentry/angular exports a Trace Service, Directive, and Decorators that leverages the @sentry/tracing, Sentry's Tracing integration, to add Angular-related spans to transactions. The service itself tracks route changes and durations, where directive and decorators are tracking component initializations.

Install

Install a Trace Service with these three steps:

  1. Register and configure the Tracing integration, including custom Angular routing instrumentation:
Copied
import * as Sentry from "@sentry/angular";
import { Integrations } from "@sentry/tracing";

Sentry.init({
  dsn: "https://examplePublicKey@o0.ingest.sentry.io/0",
  integrations: [
    new Integrations.BrowserTracing({
      tracingOrigins: ["localhost", "https://yourserver.io/api"],
      routingInstrumentation: Sentry.routingInstrumentation,
    }),
  ],
  tracesSampleRate: 1.0, // Be sure to lower this in production
});
  1. Register TraceService as a provider in Angular's DI system, with a Router as its dependency:
Copied
import { NgModule } from "@angular/core";
import { Router } from "@angular/router";
import * as Sentry from "@sentry/angular";

@NgModule({
  // ...
  providers: [
    {
      provide: Sentry.TraceService,
      deps: [Router],
    },
  ],
  // ...
})
export class AppModule {}
  1. Either require the TraceService from inside AppModule or use APP_INITIALIZER to force instantiate Tracing.
Copied
@NgModule({
  // ...
})
export class AppModule {
  constructor(trace: Sentry.TraceService) {}
}

or

Copied
import { APP_INITIALIZER } from "@angular/core";

@NgModule({
  // ...
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: () => () => {},
      deps: [Sentry.TraceService],
      multi: true,
    },
  ],
  // ...
})
export class AppModule {}
You can edit this page on GitHub.
On this page