Track Angular Components

Learn how Sentry's Angular SDK allows you to monitor the rendering performance of your application and its 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 drill down into how your components are behaving so you can identify slow initializations or frequent updates, which might have an impact on your app's performance.

To track your components as part of your transactions, use any (or a combination) of the following options.

Our 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 TraceClass.

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
Copied
import * as Sentry from "@sentry/angular";

@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|html)
Copied
<app-header trace="header"></app-header>
<articles-list trace="articles-list"></articles-list>
<app-footer trace="footer"></app-footer>

The TraceClass decorator 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 the trace directive, TraceClassDecorator tracks all instances of the component(s) you add it to, creating spans for each component instance.

Just add TraceClass decorator with a component name to the components you want to track:

header.component.ts
Copied
import { Component } from "@angular/core";
import * as Sentry from "@sentry/angular";

@Component({
  selector: "app-header",
  templateUrl: "./header.component.html",
})
@Sentry.TraceClass({ name: "Header" })
export class HeaderComponent {
  // ...
}

Note: Due to code minification in production builds, you need to pass a name property to the TraceClass decorator. Otherwise, spans will refer to the component as <unnamed>.

The TraceMethod decorator 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:

login.component.ts
Copied
import { Component, OnInit } from "@angular/core";
import * as Sentry from "@sentry/angular";

@Component({
  selector: "app-login",
  templateUrl: "./login.component.html",
})
export class LoginComponent implements OnChanges {
  @Sentry.TraceMethod({ name: "Login.ngOnChanges" })
  ngOnChanges(changes: SimpleChanges) {
    // ...
  }
}

Note: Due to code minification in production builds, you need to pass a name property to the TraceMethod decorator. Otherwise, created spans will refer to the component as <unnamed>.

You can combine our component 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
Copied
import { Component, OnInit } from "@angular/core";
import * as Sentry from "@sentry/angular";

@Component({
  selector: "app-user-card",
  templateUrl: "./user-card.component.html",
})
@Sentry.TraceClass()
export class UserCardComponent implements OnChanges, OnDestroy {
  @Sentry.TraceMethod()
  ngOnChanges(changes: SimpleChanges) {}

  @Sentry.TraceMethod()
  ngOnDestroy() {}
}

Use the trace directive if you only want to track components in certain instances or locations:

user-card.component.html
Copied
<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
Copied
import { enableProdMode } from "@angular/core";
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
import * as Sentry from "@sentry/angular";

import { AppModule } from "./app/app.module";

// ...

Sentry.startSpan(
  {
    name: "bootstrap-angular-application",
    op: "ui.angular.bootstrap",
  },
  async () => {
    await platformBrowserDynamic()
      .bootstrapModule(AppModule)
      .catch((err) => console.error(err));
  },
);

Learn more about custom instrumentation.

Help improve this content
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").