-
-
Notifications
You must be signed in to change notification settings - Fork 1.5k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(angular): Add documentation for Sentry's
ErrorHandler
(#11361)
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
Showing
2 changed files
with
83 additions
and
1 deletion.
There are no files selected for viewing
82 changes: 82 additions & 0 deletions
82
docs/platforms/javascript/guides/angular/features/error-handler.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); | ||
} | ||
} | ||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters