Angular wrapper for the official Sentry JavaScript SDK

To set up or update an Angular project with this library use the Angular CLI's schematic commands:

$ ng add @hug/ngx-sentry

$ ng update @hug/ngx-sentry

The ng add command will install Sentry dependencies, the HUG Wrapper configuration and ask you the following questions:

1. Sentry's project name: the name used when creating the Sentry project
2. Sentry's dsn url: Data Source Name url provided during the Sentry project creation process

The ng add command will additionally perform the following actions:

• Add dependencies to package.json
• Add resolveJsonModule and allowSyntheticDefaultImports to tsconfig.json
• Create a .sentryclirc file containing all the Sentry configurations
• Initialize and configure Sentry in main.ts
• Import the NgxSentryModule in your Angular application module

Follow these steps to integrate your project's source maps with Sentry:

1. Generate Source Maps

$ ng build --source-map

2. Provide Source Maps to Sentry

$ npx ngx-sentry ./dist/your-project-name

This library is a wrapper around the official Sentry JavaScript SDK, with added functionalities and configurations.

You shouldn't have to configure anything else but in case you wanted to, you can still do it.

All options available in @sentry/browser can be configured from @hug/ngx-sentry.

The Sentry Browser's SDK can be configured in main.ts:

/**
 * @param {BrowserOptions} browserOptions
 * @link https://github.com/getsentry/sentry-javascript/blob/143ee3991e99a07bf60ee21a53723253a7f1c2fb/packages/browser/src/backend.ts#L12
 */
initSentry(browserOptions: BrowserOptions);

The behavior of the ErrorHandler can be configured in app.module.ts:

@NgModule({
    imports: [
        /**
         * @param {errorHandlerOptions} ErrorHandlerOptions
         * @link https://github.com/getsentry/sentry-javascript/blob/master/packages/angular/src/errorhandler.ts#L10
         */
        NgxSentryModule.forRoot(errorHandlerOptions?: ErrorHandlerOptions)
    ]
})
export class AppModule { }

You can define the current user via the NgxSentryService:

constructor(
    private sentryService: NgxSentryService
) {}

public ngOnInit(): void {
    // Set the current user
    this.sentryService.setUser({
        email: '[email protected]',
        username: 'rtrm',
        attr1: 'attr1'
    });

    // Remove the current user
    this.sentryService.setUser(null);
}

See the developer docs.

Want to file a bug, contribute some code or improve documentation? Excellent!

But please read up first on the guidelines for contributing, and learn about submission process, coding rules and more.

Please read and follow the Code of Conduct, and help us keep this project open and inclusive.

This library was made with @hug/ngx-lib-and-schematics-starter.