@pascaliske/ngx-sentry

This library provides an ErrorHandler and a HttpInterceptor for connecting an Angular application with Sentry service.

Requirements

To use this library you need to install the @sentry/browser library into your project

$ yarn add @sentry/browser

Installation

To install the library itself use the following command:

$ yarn add @pascaliske/ngx-sentry

Usage

Import the provideSentry() function in your application configuration file. The function expects an object with at least the following two keys: enabled, sentry. More options can be found in the SentryOptions section below.

import type { ApplicationConfig } from '@angular/core'
import { provideSentry } from '@pascaliske/ngx-sentry'

export const appConfig: ApplicationConfig = {
    providers: [
        provideExperimentalZonelessChangeDetection(),
        provideSentry({
            enabled: true,
            sentry: {
                dsn: 'https://[email protected]',
            },
        }),
    ],
}

SentryService

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.

SentryOptions

You can configure the library for yourself. The possible options for the provideSentry() function are:

enabled

Type: boolean
Required: true

This flag allows to enable or disable the whole sentry tracking.

sentry

Type: object
Required: true

Configure Sentry, see here for more information.

dialog

Type: boolean | ReportDialogOptions
Required: false
Default: false

Enable or disable the reporting dialog.

http

Type: object
Required: false

Configure the HTTP interceptor.

http.enabled

Type: boolean
Required: false
Default: true

Enable or disable HTTP intercepting.

http.message

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

http.whitelist

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.

http.blacklist

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.

License

MIT © Pascal Iske