Skip to content

Commit

Permalink
feat(angular): Add documentation for Sentry's ErrorHandler (#11361)
Browse files Browse the repository at this point in the history
The new page about the Angular SDK's error handler explains
- what the error handler does / why it's necessary
- a couple of options (omitted the old `reportDialog` options in favour of User Feedback)
- how to handle multiple error handlers

---------

Co-authored-by: Liza Mock <liza.mock@sentry.io>
  • Loading branch information
Lms24 and lizokm authored Sep 17, 2024
1 parent a623415 commit db5e0e2
Show file tree
Hide file tree
Showing 2 changed files with 83 additions and 1 deletion.
Original file line number Diff line number Diff line change
@@ -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);
}
}
```
Original file line number Diff line number Diff line change
Expand Up @@ -139,7 +139,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).

<Alert>

Expand Down

0 comments on commit db5e0e2

Please sign in to comment.