diff --git a/src/platforms/javascript/guides/angular/components/tracehelpers.mdx b/src/platforms/javascript/guides/angular/components/tracehelpers.mdx index 5e56f0b8c1913..d348c86cac407 100644 --- a/src/platforms/javascript/guides/angular/components/tracehelpers.mdx +++ b/src/platforms/javascript/guides/angular/components/tracehelpers.mdx @@ -4,28 +4,7 @@ title: Track Angular Components To track Angular components as part of your transactions, use any of these three options: -1. `TraceDirective` to track a duration between `OnInit` and `AfterViewInit` lifecycle hooks in template: - -```javascript -import * as Sentry from "@sentry/angular"; - -@NgModule({ - // ... - declarations: [Sentry.TraceDirective], - // ... -}) -export class AppModule {} -``` - -Then, inside your components template, (remember that the directive name attribute is required): - -```html - - - -``` - -2. `TraceClassDecorator` tracks a duration between `OnInit` and `AfterViewInit` lifecycle hooks in components: +1. `TraceClassDecorator` tracks a duration between `OnInit` and `AfterViewInit` lifecycle hooks in components: ```javascript import { Component } from "@angular/core"; @@ -41,7 +20,7 @@ export class HeaderComponent { } ``` -3. `TraceMethodDecorator` tracks a specific lifecycle hooks as point-in-time spans in components: +2. `TraceMethodDecorator` tracks a specific lifecycle hooks as point-in-time spans in components: ```javascript import { Component, OnInit } from "@angular/core"; @@ -87,3 +66,39 @@ platformBrowserDynamic() } }) ``` + +3. `TraceDirective` tracks a duration between `OnInit` and `AfterViewInit` lifecycle hooks in template: + + + +Using `TraceDirective` or `TraceModule` currently causes a compiler error at application compile +time of your Angular application if AOT compilation is enabled in your application config (which it is by default). +This is a [known limitation](https://github.com/getsentry/sentry-javascript/issues/3282) of our current +Angular SDK (v6.*) and it will be [adressed and fixed](https://github.com/getsentry/sentry-javascript/issues/4644) +in our next major Angular SDK release (v7). +In the meantime, please use options 1 (`TraceClassDecorator`) and 2 (`TraceMethodDecorator`) +above to track your Angular components. + + + +Import `TraceModule` either globally in your application's `app.module.ts` file or locally in the module(s) +you want to track your components: + +```javascript +import * as Sentry from "@sentry/angular"; + +@NgModule({ + // ... + imports: [Sentry.TraceModule], + // ... +}) +export class AppModule {} +``` + +Then, inside your components template, (remember that the directive name attribute is required): + +```html + + + +```