Docs

Measure Angular Performance

In this guide, we'll show you how to measure the performance of your Angular application using the Polaris SDK.

  • First, we'll measure the intial render time of a component.
  • Next, we'll measure the re-render time of a component.
  • Finally, we'll measure the performance of a critical workflow in our app.

Measure Initial Render Time

First, let's measure the time it takes to render a component for the first time.

app.component.ts
import { measureFirstRender } from '@getpolaris.ai/sdk-angular';

export class AppComponent {
  constructor() {
    measureFirstRender();
  }
}

Let's review the code above.

  1. We import the measureFirstRender function from the @getpolaris.ai/sdk-angular package.
  2. We call the measureFirstRender function in the constructor of the AppComponent.

You can invoke the measureFirstRender function in any component's constructor() function to measure the time it takes to render that component for the first time.

Measure Re-render Time

Next, let's measure the time it takes to re-render a component.

app.component.ts
import { measureRender } from '@getpolaris.ai/sdk-angular';

export class AppComponent {
  constructor() {
    measureRender();
  }
}

Let's review the code above.

  1. We import the measureRender function from the @getpolaris.ai/sdk-angular package.
  2. We call the measureRender function in the constructor of the AppComponent.

You can invoke the measureRender function in any component's constructor() function to measure the time it takes to re-render that component.

Measure Critical Workflows

We want to measure the performance of a critical workflow in our app, such as the authentication flow.

First, we need to create an instrument in Polaris using the getInstrument() method on the PolarisService class.

app.component.ts
export class AppComponent {
  const polaris = inject(PolarisService);

  onAuthenticate() {
    const instrument = polaris.getInstrument('auth-flow');
    instrument.start();
  }
}

Let's review the code above.

  1. We import the PolarisService class from the @getpolaris.ai/sdk-angular package.
  2. We call the getInstrument() method on the PolarisService class to create an instrument with the name auth-flow.
  3. We call the start() method on the instrument to start measuring the performance of the authentication flow.

Next, we need to stop the instrument when the authentication flow is complete.

app.component.ts
export class DashboardComponent {
  const polaris = inject(PolarisService);

  ngAfterViewInit() {
    const instrument = polaris.getInstrument('auth-flow');
    instrument.done())
  }
}

We call the done() method on the instrument to stop measuring the performance of the authentication flow.