---
title: Angular
description: Monitor Angular applications and generate metrics using Datadog RUM
breadcrumbs: Docs > Integrations > Angular
---

# Angular
Supported OSIntegration version2.0.0
{% callout %}
# Important note for users on the following Datadog sites: us2.ddog-gov.com

{% alert level="info" %}
To find out if this integration is available in your organization, see your [Datadog Integrations](https://app.datadoghq.com/integrations) page or ask your organization administrator.

To initiate an exception request to enable this integration for your organization, email [support@ddog-gov.com](mailto:support@ddog-gov.com).
{% /alert %}

{% /callout %}

## Overview{% #overview %}

With the Datadog RUM Angular integration, resolve performance issues quickly in Angular applications by:

- Debugging the root cause of performance bottlenecks, such as a slow server response time, render-blocking resource, or an error inside a component
- Automatically correlating web performance data with user journeys, HTTP calls, and logs
- Alerting your engineering teams when crucial web performance metrics (such as Core Web Vitals) fall below a threshold that results in a poor user experience

Monitor your Angular applications from end-to-end by:

- Tracking and visualizing user journeys across your entire stack
- Debugging the root cause of slow load times, which may be an issue with your Angular code, network performance, or underlying infrastructure
- Analyzing and contextualizing every user session with attributes such as user ID, email, name, and more
- Unifying full-stack monitoring in one platform for frontend and backend development teams

## Setup{% #setup %}

Set up [Datadog RUM](https://docs.datadoghq.com/real_user_monitoring/browser/setup/client.md) in your Angular application. If you're creating a new RUM application in the Datadog App, select Angular as the application type. If you have an existing RUM application, you can update its type to Angular instead. After you configure your RUM application, the Datadog App provides instructions for integrating the [RUM-Angular plugin](https://www.npmjs.com/package/@datadog/browser-rum-angular) with the Browser SDK.

## Error Tracking{% #error-tracking %}

To track errors that occur inside Angular components, you can either use the built-in provider or report errors manually from your own error handler.

### `provideDatadogErrorHandler` usage{% #providedatadogerrorhandler-usage %}

`provideDatadogErrorHandler()` replaces Angular's default `ErrorHandler` with one that reports errors to Datadog RUM. It preserves the default `console.error` behavior.

**Standalone setup:**

```typescript
import { bootstrapApplication } from '@angular/platform-browser'
import { angularPlugin, provideDatadogErrorHandler } from '@datadog/browser-rum-angular'
import { datadogRum } from '@datadog/browser-rum'

datadogRum.init({
  applicationId: '<APP_ID>',
  clientToken: '<CLIENT_TOKEN>',
  plugins: [angularPlugin()],
})

bootstrapApplication(AppComponent, {
  providers: [
    provideDatadogErrorHandler(),
  ],
})
```

**NgModule setup:**

```typescript
import { angularPlugin, provideDatadogErrorHandler } from '@datadog/browser-rum-angular'
import { datadogRum } from '@datadog/browser-rum'

datadogRum.init({
  applicationId: '<APP_ID>',
  clientToken: '<CLIENT_TOKEN>',
  plugins: [angularPlugin()],
})

@NgModule({
  providers: [provideDatadogErrorHandler()],
})
export class AppModule {}
```

### Reporting Angular errors from your own `ErrorHandler`{% #reporting-angular-errors-from-your-own-errorhandler %}

If you already have a custom `ErrorHandler`, use `addAngularError` to report errors to Datadog without replacing your handler:

```typescript
import { ErrorHandler } from '@angular/core'
import { addAngularError } from '@datadog/browser-rum-angular'

class MyCustomErrorHandler implements ErrorHandler {
  handleError(error: unknown): void {
    addAngularError(error)
    // ... custom logic (show toast, log to service, etc.)
  }
}
```

## Angular router integration{% #angular-router-integration %}

To track route changes with Angular's built-in router, initialize the `angularPlugin` with the `router: true` option and add `provideDatadogRouter()` to your providers.

**Standalone setup:**

```typescript
import { bootstrapApplication } from '@angular/platform-browser'
import { provideRouter } from '@angular/router'
import { angularPlugin, provideDatadogRouter } from '@datadog/browser-rum-angular'
import { datadogRum } from '@datadog/browser-rum'

datadogRum.init({
  applicationId: '<APP_ID>',
  clientToken: '<CLIENT_TOKEN>',
  plugins: [angularPlugin({ router: true })],
})

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(routes),
    provideDatadogRouter(),
  ],
})
```

**NgModule setup:**

```typescript
import { angularPlugin, provideDatadogRouter } from '@datadog/browser-rum-angular'
import { datadogRum } from '@datadog/browser-rum'

datadogRum.init({
  applicationId: '<APP_ID>',
  clientToken: '<CLIENT_TOKEN>',
  plugins: [angularPlugin({ router: true })],
})

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  providers: [provideDatadogRouter()],
})
export class AppModule {}
```

When enabled, the integration uses route patterns as view names instead of resolved URLs. For example, navigating to `/article/2` generates a view named `/article/:articleId`.

## Go Further with Datadog Angular Integration{% #go-further-with-datadog-angular-integration %}

### Traces{% #traces %}

Connect your RUM and trace data to get a complete view of your application's performance. See [Connect RUM and Traces](https://docs.datadoghq.com/real_user_monitoring/platform/connect_rum_and_traces.md?tab=browserrum).

### Logs{% #logs %}

To start forwarding your Angular application's logs to Datadog, see [JavaScript Log Collection](https://docs.datadoghq.com/logs/log_collection/javascript.md).

### Metrics{% #metrics %}

To generate custom metrics from your RUM application, see [Generate Metrics](https://docs.datadoghq.com/real_user_monitoring/generate_metrics.md).

## Troubleshooting{% #troubleshooting %}

Need help? Contact [Datadog Support](https://docs.datadoghq.com/help/).