Track Angular Components
Sentry's Angular SDK offers a feature to monitor the performance of your Angular components: component tracking. Enabling this feature provides you with spans in your transactions that show the initialization and update cycles of your Angular components. This allows you to get a drilled-down view into how your components are behaving so you can do things like identify slow initializations or frequent updates, which might have an impact on your app's performance.
To set up component tracking, you need to configure performance monitoring. For details on how to do this, check out our Performance documentation.
To track your components as part of your transactions, use any (or a combination) of the following options.
TraceDirective
tracks a duration between the OnInit
and AfterViewInit
lifecycle hooks in your component template. It adds spans called ui.angular.init
to the currently active transaction that allows you to track specific individual instances of your components. If you want to track all instances instead, use TraceClassDecorator
.
Import TraceModule
either globally in your application's app.module.ts
file or in the module(s) in which you want to track your components:
app.module.ts
import * as Sentry from "@sentry/angular-ivy";
@NgModule({
// ...
imports: [Sentry.TraceModule],
// ...
})
export class AppModule {}
Then, in your component's template, add the directive to all components you want to track. Remember to give the trace
attribute a name, which will be shown in the span's description:
app.component.ts
<app-header [trace]="'header'"></app-header>
<articles-list [trace]="'articles-list'"></articles-list>
<app-footer [trace]="'footer'"></app-footer>
Compatibility
If you're using version 6 of the Angular SDK, using TraceDirective
or TraceModule
causes a compiler error at application compile time of your Angular application. This is a known issue of our Angular SDK v6 and it was fixed in version 7. We recommend upgrading to the latest Angular SDK version. Otherwise, please use the other options (TraceClassDecorator
and TraceMethodDecorator
) below to track your Angular components.
TraceClassDecorator
tracks the duration between the OnInit
and AfterViewInit
lifecycle hooks in components. It adds spans called ui.angular.init
to the currently active transaction. In contrast to TraceDirective
, TraceClassDecorator
tracks all instances of the component(s) you add it to, creating spans for each component instance.
Just add TraceClassDecorator
to the components you want to track:
header.component.ts
import { Component } from "@angular/core";
import * as Sentry from "@sentry/angular-ivy";
@Component({
selector: "app-header",
templateUrl: "./header.component.html",
})
@Sentry.TraceClassDecorator()
export class HeaderComponent {
// ...
}
TraceMethodDecorator
tracks specific component lifecycle hooks as point-in-time spans. The added spans are called ui.angular.[methodname]
(like, ui.angular.ngOnChanges
). For example, you can use this decorator to track how often component changes are detected during an ongoing transaction:
login.component.ts
import { Component, OnInit } from "@angular/core";
import * as Sentry from "@sentry/angular-ivy";
@Component({
selector: "app-login",
templateUrl: "./login.component.html",
})
export class LoginComponent implements OnChanges {
@Sentry.TraceMethodDecorator()
ngOnChanges(changes: SimpleChanges) {}
}
You can combine our tracking utilities and track the bootstrapping duration of your app.
To get the best insights into your components' performance, you can combine TraceDirective
, TraceClassDecorator
, and TraceMethodDecorator
. This allows you to track component initialization durations as well as arbitrary lifecycle events, such as change and destroy events:
user-card.component.ts
import { Component, OnInit } from "@angular/core";
import * as Sentry from "@sentry/angular-ivy";
@Component({
selector: "app-user-card",
templateUrl: "./user-card.component.html",
})
@Sentry.TraceClassDecorator()
export class UserCardComponent implements OnChanges, OnDestroy {
@Sentry.TraceMethodDecorator()
ngOnChanges(changes: SimpleChanges) {}
@Sentry.TraceMethodDecorator()
ngOnDestroy() {}
}
User TraceDirective
if you only want to track components in certain instances or locations:
user-card.component.html
<div>
<app-icon trace="user-icon">user</app-icon>
<label>{{ user.name }}</label>
<!--...-->
<app-button trace="save-user">Save</app-button>
</div>
You can add your own custom spans using startSpan()
. For example, you can track the duration of the Angular bootstrapping process to find out how long your app takes to bootstrap on your users' devices:
main.ts
import { enableProdMode } from "@angular/core";
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
import * as Sentry from "@sentry/angular-ivy";
import { AppModule } from "./app/app.module";
// ...
Sentry.startSpan(
{
name: "bootstrap-angular-application",
op: "ui.angular.bootstrap",
},
async () => {
await platformBrowserDynamic()
.bootstrapModule(AppModule)
.then(() => console.log(`Bootstrap success`))
.catch((err) => console.error(err));
}
);
Learn more about custom instrumentation.
Our documentation is open source and available on GitHub. Your contributions are welcome, whether fixing a typo (drat!) or suggesting an update ("yeah, this would be better").