@sentry/angular

What is @sentry/angular?

@sentry/angular is a package that provides error tracking and performance monitoring for Angular applications. It helps developers capture and report errors, track performance issues, and gain insights into the health of their applications.

What are @sentry/angular's main functionalities?

Error Tracking

This feature allows you to capture and report errors in your Angular application. By initializing Sentry with your DSN and implementing a custom ErrorHandler, you can automatically send error reports to Sentry.

import * as Sentry from '@sentry/angular';
import { ErrorHandler } from '@angular/core';

Sentry.init({
  dsn: 'your-dsn-url',
});

export class SentryErrorHandler implements ErrorHandler {
  handleError(error) {
    Sentry.captureException(error);
    throw error;
  }
}

Performance Monitoring

This feature allows you to monitor the performance of your Angular application. By configuring Sentry with the BrowserTracing integration and setting a sample rate, you can track performance metrics and identify bottlenecks.

import * as Sentry from '@sentry/angular';

Sentry.init({
  dsn: 'your-dsn-url',
  integrations: [
    new Sentry.BrowserTracing({
      tracingOrigins: ['localhost', 'https://yourserver.io'],
      routingInstrumentation: Sentry.routingInstrumentation,
    }),
  ],
  tracesSampleRate: 1.0,
});

User Feedback

This feature allows you to collect user feedback when an error occurs. By calling the showReportDialog method with the event ID, you can prompt users to provide additional information about the error.

import * as Sentry from '@sentry/angular';

Sentry.init({
  dsn: 'your-dsn-url',
});

function captureUserFeedback(eventId) {
  Sentry.showReportDialog({
    eventId: eventId,
  });
}

Other packages similar to @sentry/angular

bugsnag-js

Bugsnag provides error monitoring and crash reporting for JavaScript applications. It offers similar functionalities to @sentry/angular, such as error tracking and performance monitoring, but also includes features like session tracking and release tracking.

rollbar

Rollbar is another error tracking and monitoring service for JavaScript applications. It provides real-time error reporting, similar to @sentry/angular, and includes additional features like telemetry, which captures events leading up to an error, and deployment tracking.

airbrake-js

Airbrake offers error monitoring and performance tracking for JavaScript applications. It provides similar functionalities to @sentry/angular, such as error tracking and performance monitoring, but also includes features like error grouping and detailed error reports.

README

Official Sentry SDK for Angular

Links

• Official SDK Docs

Angular Version Compatibility

This SDK officially supports Angular 14 to 19.

If you're using an older Angular version please check the compatibility table in the docs.

If you're using an older version of Angular and experience problems with the Angular SDK, we recommend downgrading the SDK to version 7.x. Please note that we don't provide any support for Angular versions below 10.

General

This package is a wrapper around @sentry/browser, with added functionality related to Angular. All methods available in @sentry/browser can be imported from @sentry/angular.

To use this SDK, call Sentry.init(options) before you bootstrap your Angular application.

import { bootstrapApplication } from '@angular/platform-browser';
import { init } from '@sentry/angular';

import { AppComponent } from './app/app.component';

init({
  dsn: '__DSN__',
  // ...
});

bootstrapApplication(AppComponent, appConfig);

ErrorHandler

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

import { ApplicationConfig, NgModule, ErrorHandler } from '@angular/core';
import { createErrorHandler } from '@sentry/angular';

export const appConfig: ApplicationConfig = {
  providers: [
    {
      provide: ErrorHandler,
      useValue: createErrorHandler({
        showDialog: true,
      }),
    },
  ],
};

// Or using an old module approach:
@NgModule({
  // ...
  providers: [
    {
      provide: ErrorHandler,
      useValue: createErrorHandler({
        showDialog: true,
      }),
    },
  ],
  // ...
})
export class AppModule {}

Additionally, createErrorHandler accepts a set of options that allows you to configure its behavior. For more details see ErrorHandlerOptions interface in src/errorhandler.ts.

Tracing

@sentry/angular exports a Trace Service, Directive and Decorators that leverage the tracing features to add Angular-related spans to transactions. If tracing is not enabled, this functionality will not work. The SDK's TraceService itself tracks route changes and durations, while directive and decorators are tracking components initializations.

Install

Registering a Trace Service is a 3-step process.

• Register and configure the BrowserTracing integration, including custom Angular routing instrumentation:

import { init, browserTracingIntegration } from '@sentry/angular';

init({
  dsn: '__DSN__',
  integrations: [browserTracingIntegration()],
  tracePropagationTargets: ['localhost', 'https://yourserver.io/api'],
  tracesSampleRate: 1,
});

• Inject the TraceService in the APP_INITIALIZER:

import { ApplicationConfig, APP_INITIALIZER, provideAppInitializer } from '@angular/core';

export const appConfig: ApplicationConfig = {
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: () => () => {},
      deps: [TraceService],
      multi: true,
    },

    // Starting with Angular 19, we can use `provideAppInitializer`
    // instead of directly providing `APP_INITIALIZER` (deprecated):
    provideAppInitializer(() => inject(TraceService)),
  ],
};

// Or using an old module approach:
@NgModule({
  // ...
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: () => () => {},
      deps: [TraceService],
      multi: true,
    },

    // Starting with Angular 19, we can use `provideAppInitializer`
    // instead of directly providing `APP_INITIALIZER` (deprecated):
    provideAppInitializer(() => inject(TraceService)),
  ],
  // ...
})
export class AppModule {}

Use

To track Angular components as part of your transactions, you have 3 options.

TraceDirective: used to track a duration between OnInit and AfterViewInit lifecycle hooks in template:

import { TraceModule } from '@sentry/angular';

@Component({
  selector: 'some-component',
  imports: [TraceModule],
  // ...
})
export class SomeComponentThatUsesTraceDirective {}

Then, inside your component's template (keep in mind that the directive's name attribute is required):

<app-header trace="header"></app-header>
<articles-list trace="articles-list"></articles-list>
<app-footer trace="footer"></app-footer>

TraceClass: used to track a duration between OnInit and AfterViewInit lifecycle hooks in components:

import { Component } from '@angular/core';
import { TraceClass } from '@sentry/angular';

@Component({
  selector: 'layout-header',
  templateUrl: './header.component.html',
})
@TraceClass()
export class HeaderComponent {
  // ...
}

TraceMethod: used to track a specific lifecycle hooks as point-in-time spans in components:

import { Component, OnInit } from '@angular/core';
import { TraceMethod } from '@sentry/angular';

@Component({
  selector: 'app-footer',
  templateUrl: './footer.component.html',
})
export class FooterComponent implements OnInit {
  @TraceMethod()
  ngOnInit() {}
}

You can also add your own custom spans via startSpan(). For example, if you'd like to track the duration of Angular boostraping process, you can do it as follows:

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { init, startSpan } from '@sentry/angular';

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

// ...
startSpan(
  {
    name: 'platform-browser-dynamic',
    op: 'ui.angular.bootstrap',
  },
  async () => {
    await platformBrowserDynamic().bootstrapModule(AppModule);
  },
);

Changelog

9.16.0

Important changes

• feat: Create a Vite plugin that injects sentryConfig into the global config (#16197)

Add a new plugin makeConfigInjectorPlugin within our existing vite plugin that updates the global vite config with sentry options

• feat(browser): Add option to sample linked traces consistently (#16037)

This PR implements consistent sampling across traces as outlined in (#15754)

• feat(cloudflare): Add support for durable objects (#16180)

This PR introduces a new instrumentDurableObjectWithSentry method to the SDK, which instruments durable objects. We capture both traces and errors automatically.

• feat(node): Add Prisma integration by default (#16073)

Prisma integration is enabled by default, it should work for both ESM and CJS.

• feat(react-router): Add client-side router instrumentation (#16185)

Adds client-side instrumentation for react router's HydratedRouter. To enable it, simply replace browserTracingIntegration() with reactRouterTracingIntegration() in your client-side init call.

• fix(node): Avoid double-wrapping http module (#16177)

When running your application in ESM mode, there have been scenarios that resulted in the http/https emitting duplicate spans for incoming requests. This was apparently caused by us double-wrapping the modules for incoming request isolation.

In order to solve this problem, the modules are no longer monkey patched by us for request isolation. Instead, we register diagnosticschannel hooks to handle request isolation now. While this is generally not expected to break anything, there is one tiny change that _may affect you if you have been relying on very specific functionality:

The ignoreOutgoingRequests option of httpIntegration receives the RequestOptions as second argument. This type is not changed, however due to how the wrapping now works, we no longer pass through the full RequestOptions, but re-construct this partially based on the generated request. For the vast majority of cases, this should be fine, but for the sake of completeness, these are the only fields that may be available there going forward - other fields that may have existed before may no longer be set:

ignoreOutgoingRequests(url: string, {
  method: string;
  protocol: string;
  host: string;
  hostname: string; // same as host
  path: string;
  headers: OutgoingHttpHeaders;
})

Other changes

• feat(cloudflare): Add logs exports (#16165)
• feat(vercel-edge): Add logs export (#16166)
• feat(cloudflare): Read SENTRY_RELEASE from env (#16201)
• feat(node): Drop http.server spans with 404 status by default (#16205)
• fix(browser): Respect manually set sentry tracing headers in XHR requests (#16184)
• fix(core): Respect manually set sentry tracing headers in fetch calls (#16183)
• fix(feedback): Prevent removeFromDom() from throwing (#16030)
• fix(node): Use class constructor in docstring for winston transport (#16167)
• fix(node): Fix vercel flushing logic & add test for it (#16208)
• fix(node): Fix 404 route handling in express 5 (#16211)
• fix(logs): Ensure logs can be flushed correctly (#16216)
• ref(core): Switch to standardized log envelope (#16133)