\n\n# Official Sentry SDK for Angular with Ivy Compatibility\n\n[](https://www.npmjs.com/package/@sentry/angular-ivy)\n[](https://www.npmjs.com/package/@sentry/angular-ivy)\n[](https://www.npmjs.com/package/@sentry/angular-ivy)\n\n## Links\n\n- [Official SDK Docs](https://docs.sentry.io/platforms/javascript/angular/)\n\n## Package Discontinued\n\nThe `@sentry/angular-ivy` package was discontinued with the release of version 8.0.0 of `@sentry/angular`. The v8\n`@sentry/angular` package is now fully compatible with Ivy by default, making this package obsolete. Furthermore, new\nAngular versions (18+) are supported in version 8.\n\nTo upgrade to v8, follow the\n[Angular SDK migration guide](https://docs.sentry.io/platforms/javascript/guides/angular/migration/v7-to-v8/).\n\n## Angular Version Compatibility\n\nThis SDK officially supports Angular 12 to 17 with Angular's new rendering engine, Ivy.\n\nIf you're using Angular 10, 11 or a newer Angular version with View Engine instead of Ivy, please use [`@sentry/angular`](https://github.com/getsentry/sentry-javascript/blob/develop/packages/angular/README.md).\n\nIf you're using an older version of Angular and experience problems with the Angular SDK, we recommend downgrading the SDK to version 6.x.\nPlease note that we don't provide any support for Angular versions below 10.\n\n## General\n\nThis package is a wrapper around `@sentry/browser`, with added functionality related to Angular. All methods available\nin `@sentry/browser` can be imported from `@sentry/angular-ivy`.\n\nTo use this SDK, call `Sentry.init(options)` before you bootstrap your Angular application.\n\n```javascript\nimport { enableProdMode } from '@angular/core';\nimport { platformBrowserDynamic } from '@angular/platform-browser-dynamic';\nimport { init } from '@sentry/angular-ivy';\n\nimport { AppModule } from './app/app.module';\n\ninit({\n dsn: '__DSN__',\n // ...\n});\n\n// ...\n\nenableProdMode();\nplatformBrowserDynamic()\n .bootstrapModule(AppModule)\n .then(success => console.log(`Bootstrap success`))\n .catch(err => console.error(err));\n```\n\n### ErrorHandler\n\n`@sentry/angular-ivy` exports a function to instantiate an ErrorHandler provider that will automatically send Javascript errors\ncaptured by the Angular's error handler.\n\n```javascript\nimport { NgModule, ErrorHandler } from '@angular/core';\nimport { createErrorHandler } from '@sentry/angular-ivy';\n\n@NgModule({\n // ...\n providers: [\n {\n provide: ErrorHandler,\n useValue: createErrorHandler({\n showDialog: true,\n }),\n },\n ],\n // ...\n})\nexport class AppModule {}\n```\n\nAdditionally, `createErrorHandler` accepts a set of options that allows you to configure its behavior. For more details\nsee `ErrorHandlerOptions` interface in `src/errorhandler.ts`.\n\n### Tracing\n\n`@sentry/angular-ivy` exports a Trace Service, Directive and Decorators that leverage the tracing features to add\nAngular-related spans to transactions. If tracing is not enabled, this functionality will not work. The SDK's\n`TraceService` itself tracks route changes and durations, while directive and decorators are tracking components\ninitializations.\n\n#### Install\n\nRegistering a Trace Service is a 3-step process.\n\n1. Register and configure the `BrowserTracing` integration, including custom Angular routing\n instrumentation:\n\n```javascript\nimport { init, browserTracingIntegration } from '@sentry/angular-ivy';\n\ninit({\n dsn: '__DSN__',\n integrations: [\n browserTracingIntegration(),\n ],\n tracePropagationTargets: ['localhost', 'https://yourserver.io/api'],\n tracesSampleRate: 1,\n});\n```\n\n2. Register `SentryTrace` as a provider in Angular's DI system, with a `Router` as its dependency:\n\n```javascript\nimport { NgModule } from '@angular/core';\nimport { Router } from '@angular/router';\nimport { TraceService } from '@sentry/angular-ivy';\n\n@NgModule({\n // ...\n providers: [\n {\n provide: TraceService,\n deps: [Router],\n },\n ],\n // ...\n})\nexport class AppModule {}\n```\n\n3. Either require the `TraceService` from inside `AppModule` or use `APP_INITIALIZER` to force-instantiate Tracing.\n\n```javascript\n@NgModule({\n // ...\n})\nexport class AppModule {\n constructor(trace: TraceService) {}\n}\n```\n\nor\n\n```javascript\nimport { APP_INITIALIZER } from '@angular/core';\n\n@NgModule({\n // ...\n providers: [\n {\n provide: APP_INITIALIZER,\n useFactory: () => () => {},\n deps: [TraceService],\n multi: true,\n },\n ],\n // ...\n})\nexport class AppModule {}\n```\n\n#### Use\n\nTo track Angular components as part of your transactions, you have 3 options.\n\n_TraceDirective:_ used to track a duration between `OnInit` and `AfterViewInit` lifecycle hooks in template:\n\n```javascript\nimport { TraceModule } from '@sentry/angular-ivy';\n\n@NgModule({\n // ...\n imports: [TraceModule],\n // ...\n})\nexport class AppModule {}\n```\n\nThen, inside your component's template (keep in mind that the directive's name attribute is required):\n\n```html\n\n\n\n```\n\n_TraceClassDecorator:_ used to track a duration between `OnInit` and `AfterViewInit` lifecycle hooks in components:\n\n```javascript\nimport { Component } from '@angular/core';\nimport { TraceClassDecorator } from '@sentry/angular-ivy';\n\n@Component({\n selector: 'layout-header',\n templateUrl: './header.component.html',\n})\n@TraceClassDecorator()\nexport class HeaderComponent {\n // ...\n}\n```\n\n_TraceMethodDecorator:_ used to track a specific lifecycle hooks as point-in-time spans in components:\n\n```javascript\nimport { Component, OnInit } from '@angular/core';\nimport { TraceMethodDecorator } from '@sentry/angular-ivy';\n\n@Component({\n selector: 'app-footer',\n templateUrl: './footer.component.html',\n})\nexport class FooterComponent implements OnInit {\n @TraceMethodDecorator()\n ngOnInit() {}\n}\n```\n\nYou can also add your own custom spans via `startSpan()`. For example, if you'd like to track the duration of Angular boostraping process, you can do it as follows:\n\n```javascript\nimport { enableProdMode } from '@angular/core';\nimport { platformBrowserDynamic } from '@angular/platform-browser-dynamic';\nimport { init, startSpan } from '@sentry/angular';\n\nimport { AppModule } from './app/app.module';\n\n// ...\nstartSpan({\n name: 'platform-browser-dynamic',\n op: 'ui.angular.bootstrap'\n },\n async () => {\n await platformBrowserDynamic().bootstrapModule(AppModule);\n }\n);\n```\n","readmeFilename":"README.md","users":{"flumpus-dev":true}}
![\"Sentry\"](\"https://sentry-brand.storage.googleapis.com/sentry-wordmark-dark-280x84.png\")
\n \n