RUM Browser Monitoring

Overview

Datadog Real User Monitoring (RUM) enables you to visualize and analyze the real-time performance and user journeys of your application’s individual users.

Setup

To set up Datadog RUM browser monitoring:

1. In Datadog, navigate to the Real User Monitoring page and click the New Application button.
2. Enter a name for your application and click Generate Client Token. This generates a clientToken and an applicationId for your application.
3. Setup the Datadog RUM SDK via npm or via one of the hosted versions: CDN async or CDN sync.
4. Deploy the changes to your application. Once your deployment is live, Datadog collects events from user browsers.
5. Visualize the data collected using Datadog dashboards.

Note: Your application shows up on the application list page as “pending” until Datadog starts receiving data.

Choose the right installation method

npm

Add @datadog/browser-rum to your package.json file, then initialize it with:

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

datadogRum.init({
  applicationId: '<DATADOG_APPLICATION_ID>',
  clientToken: '<DATADOG_CLIENT_TOKEN>',
  site: '<DATADOG_SITE>',
  //  service: 'my-web-application',
  //  env: 'production',
  //  version: '1.0.0',
  sampleRate: 100,
  trackInteractions: true,
})

Note: The trackInteractions parameter enables the automatic collection of user clicks in your application. Sensitive and private data contained on your pages may be included to identify the elements interacted with.

CDN async

Add the generated code snippet to the head tag of every HTML page you want to monitor in your application.

<script>
 (function(h,o,u,n,d) {
   h=h[d]=h[d]||{q:[],onReady:function(c){h.q.push(c)}}
   d=o.createElement(u);d.async=1;d.src=n
   n=o.getElementsByTagName(u)[0];n.parentNode.insertBefore(d,n)
})(window,document,'script','https://www.datadoghq-browser-agent.com/datadog-rum.js','DD_RUM')
  DD_RUM.onReady(function() {
    DD_RUM.init({
      clientToken: '<CLIENT_TOKEN>',
      applicationId: '<APPLICATION_ID>',
      site: '<DATADOG_SITE>',
      //  service: 'my-web-application',
      //  env: 'production',
      //  version: '1.0.0',
      sampleRate: 100,
      trackInteractions: true,
    })
  })
</script>

Notes:

• The trackInteractions parameter enables the automatic collection of user clicks in your application. Sensitive and private data contained on your pages may be included to identify the elements interacted with.
• Early RUM API calls must be wrapped in the DD_RUM.onReady() callback. This ensures the code only gets executed once the SDK is properly loaded.

CDN sync

Add the generated code snippet to the head tag (in front of any other script tags) of every HTML page you want to monitor in your application. Including the script tag higher and synchronized ensures Datadog RUM can collect all performance data and errors.

<script src="https://www.datadoghq-browser-agent.com/datadog-rum.js" type="text/javascript"></script>
<script>
  window.DD_RUM &&
    window.DD_RUM.init({
      clientToken: '<CLIENT_TOKEN>',
      applicationId: '<APPLICATION_ID>',
      site: '<DATADOG_SITE>',
      //  service: 'my-web-application',
      //  env: 'production',
      //  version: '1.0.0',
      sampleRate: 100,
      trackInteractions: true,
    })
</script>

Notes:

• The trackInteractions parameter enables the automatic collection of user clicks in your application. Sensitive and private data contained on your pages may be included to identify the elements interacted with.
• The window.DD_RUM check is used to prevent issues if a loading failure occurs with the RUM SDK.

TypeScript

Types are compatible with TypeScript >= 3.0. For earlier versions, import JS sources and use global variables to avoid any compilation issues:

import '@datadog/browser-rum/bundle/datadog-rum'

window.DD_RUM.init({
  applicationId: 'XXX',
  clientToken: 'XXX',
  site: 'datadoghq.com',
  resourceSampleRate: 100,
  sampleRate: 100,
})

Configuration

Initialization parameters

The following parameters are available:

Options that must have matching configuration when also using logs SDK:

Example

Init must be called to start the tracking:

init(configuration: {
    applicationId: string,
    clientToken: string,
    site?: string,
    resourceSampleRate?: number
    sampleRate?: number,
    silentMultipleInit?: boolean,
    trackInteractions?: boolean,
    service?: string,
    env?: string,
    version?: string,
    allowedTracingOrigins?: Array<String|Regexp>,
    trackSessionAcrossSubdomains?: boolean,
    useSecureSessionCookie?: boolean,
    useCrossSiteSessionCookie?: boolean,
})