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.

---

Idea:
custom metrics to be tracked and reported.
You can track and monitor the whole user activity across your application
If your application is taking time to load, you can debug the root cause of it.
In case you want to analyze a particular user session, you can filter the results based on certain attributes like userId, email, etc.
You can add logs in case you want to analyze some results and also analyze if there is any error.

What is RUM in Datadog?

RUM stands for real user monitoring, which gives you end-to-end visibility of the real-time activity of the users. RUM can help you monitor the applications in such scenarios:

Performance: Tracks the performance of your pages on each action and network request.

Error Management: Tracks any ongoing bugs or issues.

Usage: Datadog will track which user is using your application along with their country, device, and browser and how they are interacting with the application, including all navigation or clicks.

Support: Retrieve all of the information related to one user session to troubleshoot an issue (session duration, pages visited, interactions, resources loaded, and errors)

A user session can last up to four hours. If a user does not interact with an application for 15 minutes, the session is considered complete. A new session will start when the user interacts with the application again. To start browser RUM event tracking, you need to add this package to your application.

Use this command:

npm i @datadog/browser-rum

If you want to add logs in your application, you can use another package. Here is the command for it:

npm i @datadog/browser-logs

Fotr more info about this: https://www.datadoghq.com/

Proactive monitoring

Application Performance Monitoring (APM)

Ux Monitoring > Sessions Explorer, and then we will create our first Real User Monitoring (RUM).

Select JavaScript as the application type and give a name to our RUM.

Suppose you have two metrics:

INITIAL_LOAD—The initial build time, when you run ng serve

RELOAD—The build time when you change something and save

Logging and monitoring—Work with application security teams to configure Datadog and/or CloudWatch agents to collect and push application performance data into a unified dashboard.

Identify and document custom metrics to be tracked and reported

The building blocks of a dashboard are called widgets. The dashboard has three groups of widgets: Overall Performance, Infrastructure & Network, and Databases.