diff --git a/docs/platforms/javascript/guides/angular/features/error-handler.mdx b/docs/platforms/javascript/guides/angular/features/error-handler.mdx new file mode 100644 index 0000000000000..10abebd24973f --- /dev/null +++ b/docs/platforms/javascript/guides/angular/features/error-handler.mdx @@ -0,0 +1,82 @@ +--- +title: Angular Error Handler +description: "Learn about Sentry's Angular SDK Error Handler and how to configure it." +--- + +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. + +```typescript {tabTitle:App Config} {filename:app.config.ts} {3,8-11} +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 {} +``` + +```typescript {tabTitle:NGModule Config} {filename:app.module.ts} {3,8-11} +import { ErrorHandler, NgModule } from "@angular/core"; + +import * as Sentry from "@sentry/angular"; + +@NgModule({ + // ... + 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: + +```typescript +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); + } +} +``` diff --git a/platform-includes/getting-started-config/javascript.angular.mdx b/platform-includes/getting-started-config/javascript.angular.mdx index 4b27bff6e3584..070693ef85a00 100644 --- a/platform-includes/getting-started-config/javascript.angular.mdx +++ b/platform-includes/getting-started-config/javascript.angular.mdx @@ -71,7 +71,7 @@ import * as Sentry from "@sentry/angular"; export class AppModule {} ``` -The `Sentry.createErrorHandler` function initializes a Sentry-specific `ErrorHandler` that automatically sends errors caught by Angular to Sentry. You can also customize the behavior by setting a couple of handler [options](https://github.com/getsentry/sentry-javascript/blob/master/packages/angular/src/errorhandler.ts). +The `Sentry.createErrorHandler` function initializes a Sentry-specific `ErrorHandler` that automatically sends errors caught by Angular to Sentry. Learn how to further configure Sentry's `ErrorHandler` behavior [here](./features/error-handler). The `Sentry.TraceService` listens to the Angular router for tracing. To inject `TraceService`, register the `APP_INITIALIZER` provider as shown above. Alternatively, you can also require the `TraceService` from inside your `AppModule` constructor: