Angular Integration

Install the JavaScript SDK and Angular integration. This enables easy integration with your Angular application.

Terminal
npm install @getpolaris.ai/sdk @getpolaris.ai/sdk-angular

Configure using Angular Module

If you're using Angular modules in your application, you can configure the SDK with the PolarisModule.

TS
import { PolarisModule } from '@getpolaris.ai/sdk-angular';

@NgModule({
  imports: [
    PolarisModule.forRoot({
      apiKey: API_KEY,
    }),
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

Be sure to replace API_KEY with your application's API key from Polaris.

Configure with Standalone Angular Components

If you're not using Angular modules in your application, you can configure the SDK with the providePolaris function.

TS
import { providePolaris } from '@getpolaris.ai/sdk-angular';

bootstrapApplication(AppComponent, {
  providers: [
    providePolaris({
      apiKey: API_KEY,
    }),
  ],
});

Be sure to replace API_KEY with your application's API key from Polaris.

Using the PolarisService

Once you've configured the Polaris SDK with your Angular application, you can use the PolarisService to create measurements.

TS
import { PolarisService } from '@getpolaris.ai/sdk-angular';

export class AppComponent {

  constructor(private readonly polaris: PolarisService) {}

  measurableTask() {
    // first, create a new starting point of a measurement
    const instrument = this.polaris.measure('event-name');

    try {
      // do something

      // second, invoke the done method on the instrument
      instrument.done();
    } catch (error) {
      // if an error occurs, you can add it to the measurement
      instrument.error(error);
    }
  }
}

Intercepting HTTP Requests

The Angular integration provides an HttpInterceptor that automatically instruments all HTTP requests sending the request measurements to Polaris.

Not enabled by Default

The HTTP interceptor is not enabled by default. You must explicitly enable the interceptor.

To enable the HTTP interceptor, you must set the enabled boolean to true in the intereceptor configuration option.

TS
  import { providePolaris } from '@getpolaris.ai/sdk-angular';

  bootstrapApplication(AppComponent, {
    providers: [
      providePolaris({
        apiKey: API_KEY,
        interceptor: {
          enabled: true
       }
      }),
    ],
  });

You can also customize the eventName of the measurement. The default event name value is request.

TS
import { providePolaris } from '@getpolaris.ai/sdk-angular';

bootstrapApplication(AppComponent, {
  providers: [
    providePolaris({
      apiKey: API_KEY,
      interceptor: {
        enabled: true,
        eventName: 'api-request'
      }
    }),
  ],
});

Interceptor Metadata

If you are using the Angular interceptor for all HTTP requests, the following user-defined metadata will be added to the measurement:

  • url: The URL of the HTTP request.
  • method: The HTTP method of the request.
  • status: The HTTP status code of the response.

Here is an example of a measurement with the interceptor metadata:

TS
  {
    eventName: 'request',
    userMetadata: {
      url: 'https://api.example.com',
      method: 'GET',
      status: 200
    },
    duration: 1000
  }