Datadog RUM

Abstract

---

Datadog RUM provides Real User Monitoring

Setup

---

The example below is based on next.js. The setup process is very similar for other Javascript framework

Checklist:

• Datadog Dashboard
• Changes for Frontend Source Codes
• Integration with Datadog APM

Datadog Dashboard

1. Go to the appropriate Datadog Site. In this case, our site is https://app.datadoghq.eu, the endpoint is https://app.datadoghq.eu/rum/list
2. Create a New Application, Application Type is JS, Instrumentation Type is NPM, and we will get the following codes

import { datadogRum } from '@datadog/browser-rum';
 
datadogRum.init({
  applicationId: '<AUTO_POPULATED>',
  clientToken: '<AUTO_POPULATED>',
  site: 'datadoghq.eu',
  service: 'aegis-dev-frontend',
  env: 'aegis-dev',
  // Specify a version number to identify the deployed version of your application in Datadog
  // version: '1.0.0',
  sessionSampleRate: 100,
  sessionReplaySampleRate: 100,
  trackUserInteractions: true,
  trackResources: true,
  trackLongTasks: true,
  defaultPrivacyLevel: 'mask-user-input',
});

Changes for Frontend Source Codes

1. Install the NPM package - npm i @datadog/browser-rum
2. Append the codes we obtained from Datadog Dashboard inside the root .tsc file, usually it is named as App.tsx, so the Datadog can monitor every page of the frontend

Integration with Datadog APM

We simply add in allowedTracingUrls with your backend base url

import { datadogRum } from '@datadog/browser-rum';
 
datadogRum.init({
  applicationId: '<AUTO_POPULATED>',
  clientToken: '<AUTO_POPULATED>',
  site: 'datadoghq.eu',
  service: 'aegis-dev-frontend',
  env: 'aegis-dev',
  allowedTracingUrls: [
    (url) => url.startsWith(<YOUR_BACKEND_API_BASE_URL> ?? ''),
  ],
  // Specify a version number to identify the deployed version of your application in Datadog
  // version: '1.0.0',
  sessionSampleRate: 100,
  sessionReplaySampleRate: 100,
  trackUserInteractions: true,
  trackResources: true,
  trackLongTasks: true,
  defaultPrivacyLevel: 'mask-user-input',
});

For application that has both frontend and backend

We need to have Datadog APM enabled for the backend before we can integrate it with Datadog RUM!