Datadog implementation in an Angular project.

Question

To implement Datadog Real User Monitoring (RUM) or Logs/APM into an Angular project, you'll need to follow a series of steps depending on which features of Datadog you're planning to use.

---

Common Use Case: Datadog RUM (Real User Monitoring)

This is the most common integration for front-end Angular apps. It captures frontend performance metrics, errors, and user behavior.

Step-by-Step: Integrate Datadog RUM in Angular

1. Install the RUM SDK

npm install @datadog/browser-rum

---

2. Initialize Datadog in your Angular App

A good place to initialize is in main.ts, before bootstrapping the Angular app.

// src/main.ts

import { datadogRum } from '@datadog/browser-rum';

datadogRum.init({
  applicationId: 'YOUR_APPLICATION_ID',
  clientToken: 'YOUR_CLIENT_TOKEN',
  site: 'datadoghq.com', // or datadoghq.eu, etc. depending on your region
  service: 'your-angular-app',
  env: 'production', // or dev/staging
  version: '1.0.0',
  sampleRate: 100,
  trackInteractions: true,
  defaultPrivacyLevel: 'mask-user-input',
});

// Optional: Start session replay
datadogRum.startSessionReplayRecording();

import('./app/app.module').then(({ AppModule }) => {
  platformBrowserDynamic().bootstrapModule(AppModule)
    .catch(err => console.error(err));
});

---

3. Track Route Changes (Optional but recommended)

If using Angular routing, you can track route changes with:

// app.component.ts

import { Component, OnInit } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { datadogRum } from '@datadog/browser-rum';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent implements OnInit {
  constructor(private router: Router) {}

  ngOnInit() {
    this.router.events.subscribe((event) => {
      if (event instanceof NavigationEnd) {
        datadogRum.addTiming('navigation-end');
      }
    });
  }
}

---

Optional: Logging with Datadog

If you also want to send logs from Angular:

1. Install the logs SDK

npm install @datadog/browser-logs

2. Initialize it

import { datadogLogs } from '@datadog/browser-logs';

datadogLogs.init({
  clientToken: 'YOUR_CLIENT_TOKEN',
  site: 'datadoghq.com',
  service: 'your-angular-app',
  env: 'production',
  forwardErrorsToLogs: true,
  sampleRate: 100,
});

3. Use the logger

datadogLogs.logger.info('App loaded', { context: 'startup' });

---

Best Practices

• Don’t commit your Datadog tokens to public repositories.
• Mask sensitive user inputs with defaultPrivacyLevel.
• Use environment variables to configure tokens and environment settings.

---

Comments

Thanks for the clear steps—super useful for anyone looking to set up RUM in Angular quickly! Just wondering, have you run into any performance or privacy concerns when using session replay in production?