CS Notes

Recent writing

See 615 more →

Datadog Real User Monitoring

368 words, 2 min read
Last updated on
🌟 Edit This Page!   🗓️ History

Xinyang YU

Abstract

Setup

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

Checklist:

Troubleshooting tips

Refer to Datadog RUM troubleshooting docs to resolve a list of potential errors.

Always place the Datadog RUM initialization at the beginning of the HTML <head> section. Avoid using async or defer attributes, as they may cause missing or incomplete data collection.

You can verify if Datadog RUM is working by running window.DD_RUM.getInternalContext() in the browser console.

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',
});

Tracking at an user level

If the users of your website need to log in. You can pass the information of the users who login to your website to Datadog. This allows you to filter tracking data on a user level. For more details view identifying user session with Datadog RUM.

Changes for Frontend Source Codes

  1. Install the datadog package with NPM - 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 RUM scripts are inserted into all the frontend pages

Integration with Datadog APM

Attention

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

  • 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',
});

Graph View