Angular Error Handler

Angular often wraps errors in its own error classes, making it hard for Sentry to extract the important data correctly without a custom error handler, which is where Sentry's Angular SDK ErrorHandler can help. On this page, you'll learn how to customize the SDK's ErrorHandler to work for your use case.

Using the Sentry ErrorHandler

To get started, register the Sentry ErrorHandler in your Angular application's providers. We recommend to do this in your main app.config.ts or app.module.ts file to ensure that the ErrorHandler is available everywhere in your application.

import { ApplicationConfig, ErrorHandler } from "@angular/core";

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

export const appConfig: ApplicationConfig = {
  providers: [
    // ...
    {
      provide: ErrorHandler,
      useValue: Sentry.createErrorHandler(),
    },
  ],
};
export class AppModule {}

Options

As an alternative, you can configure the behavior of the ErrorHandler by passing an object to the createErrorHandler function. The following options are available:

logErrors

Type: boolean Default: true

Lets you log errors to the console. This is true by default to ensure consistency with Angular's default behavior.

extractor

Type: function Default: undefined

Lets you extract the raw, incoming error object. The SDK uses its own extraction logic by default, but you can override it by providing your own function.

Multiple Error Handlers

Angular doesn't let you provide multiple ErrorHandler instances in the same Angular application in app.config.ts or app.module.ts. Therefore, if you're using your own error handler or you want to add additional logic to Sentry's ErrorHandler, you have to extend Sentry's ErrorHandler like in the example below:

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

export class CustomErrorHandler extends Sentry.ErrorHandler {
  constructor() {
    // Pass options to Sentry's ErrorHandler here. For Example:
    super({ logErrors: false });
  }

  handleError(error: any): void {
    // Your custom error handling logic
    // Call Sentry's error handler to capture errors:
    super.handleError(error);
  }
}