Demo
Đăng nhập

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:
Copied
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):

Copied
<app-header [trace]="'header'"></app-header>
<articles-list [trace]="'articles-list'"></articles-list>
<app-footer [trace]="'footer'"></app-footer>
  1. TraceClassDecorator tracks a duration between OnInit and AfterViewInit lifecycle hooks in components:
Copied
import { Component } from "@angular/core";
import * as Sentry from "@sentry/angular";

@Component({
  selector: "layout-header",
  templateUrl: "./header.component.html",
})
@Sentry.TraceClassDecorator()
export class HeaderComponent {
  // ...
}
  1. TraceMethodDecorator tracks a specific lifecycle hooks as point-in-time spans in components:
Copied
import { Component, OnInit } from "@angular/core";
import * as Sentry from "@sentry/angular";

@Component({
  selector: "app-footer",
  templateUrl: "./footer.component.html",
})
export class FooterComponent implements OnInit {
  @Sentry.TraceMethodDecorator()
  ngOnInit() {}
}

You can also add your own custom spans by attaching them to the current active transaction using getActiveTransaction helper. For example, to track the duration of the Angular bootstraping process:

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';

// ...

const activeTransaction = Sentry.getActiveTransaction();
const boostrapSpan =
  activeTransaction &&
  activeTransaction.startChild({
    description: 'platform-browser-dynamic',
    op: 'ui.angular.bootstrap',
  });

platformBrowserDynamic()
  .bootstrapModule(AppModule)
  .then(() => console.log(`Bootstrap success`))
  .catch(err => console.error(err));
  .finally(() => {
    if (bootstrapSpan) {
      boostrapSpan.finish();
    }
  })
Package:
npm:@sentry/browser
Version:
8.24.0
Repository:
https://github.com/getsentry/sentry-javascript