This library provides an ErrorHandler
and a HttpInterceptor
for connecting an Angular application with Sentry service.
To use this library you need to install the @sentry/browser
library into your project
$ yarn add @sentry/browser
To install the library itself use the following command:
$ yarn add @pascaliske/ngx-sentry
Import the SentryModule
with the forRoot()
method in your applications main module. The forRoot()
method expects an options object with at least the following two keys: enabled
, sentry
. More options can be found in the options section.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { SentryModule } from '@pascaliske/ngx-sentry'
import { AppComponent } from './app.component'
@NgModule({
imports: [
BrowserModule,
SentryModule.forRoot({
enabled: true,
sentry: {
dsn: 'https://your-sentry-dsn@sentry.io',
},
}),
],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule {}
Pro tip: You can reduce your bundle size by using Sentry's ESM build. It can be enabled by aliasing it with webpack:
config.resolve.alias['@sentry/browser'] = '@sentry/browser/esm'
You can use the SentryService
injectable to manually capture errors or events as follows:
@Component({
// [...]
})
export class AppComponent {
public constructor(private sentryService: SentryService) {}
public ngOnInit(): void {
// capture single error
this.sentryService.captureException(new Error(''))
// capture single error with additional context information
this.sentryService.withScope(scope => {
scope.setExtra('currentPage', window.location.href)
this.sentryService.captureException(new Error(''))
})
}
}
Note: The
SentryService
inherits all methods directly from the Sentry library. For more information about their APIs you can visit their documentation.
You can configure the library for yourself. The possible options for the forRoot()
method are:
Type: boolean
Required: true
This flag allows to enable or disable the whole sentry tracking.
Type: object
Required: true
Configure Sentry, see here for more information.
Type: boolean
| ReportDialogOptions
Required: false
Default: false
Enable or disable the reporting dialog.
Type: object
Required: false
Configure the HTTP interceptor.
Type: boolean
Required: false
Default: true
Enable or disable HTTP intercepting.
Type: string
Required: false
Default: Http request failed. ({method}, {status}, {url})
Customize the captured message for all intercepted HTTP errors. There are a few placeholders which get replaced before sending:
{method}
- The request method{url}
- The requested url{status}
- The response status{message}
- The response message
Type: Array<number>
Required: false
Default: null
Use a whitelist of HTTP status codes to filter the intercepted HTTP requests. Only responses with whitelisted status codes get reported.
Type: Array<number>
Required: false
Default: null
Use a blacklist of HTTP status codes to filter the intercepted HTTP requests. All responses with blacklisted status codes will be skipped.
MIT © Pascal Iske