@datadog/browser-rum

What is @datadog/browser-rum?

The @datadog/browser-rum package is a Real User Monitoring (RUM) solution provided by Datadog. It allows developers to collect and analyze performance and user behavior data from their web applications in real-time. This data can be used to identify and troubleshoot issues, improve user experience, and monitor application performance.

What are @datadog/browser-rum's main functionalities?

Real User Monitoring

Initializes the RUM SDK to start collecting data from the user's browser, including session replay recording.

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

datadogRum.init({
  applicationId: 'YOUR_APPLICATION_ID',
  clientToken: 'YOUR_CLIENT_TOKEN',
  site: 'datadoghq.com',
  service:'your-service-name',
  // Specify a version number to identify the deployed version of your application in Datadog
  version: '1.0.0',
  sampleRate: 100,
  trackInteractions: true,
});

datadogRum.startSessionReplayRecording();

Custom User Actions

Records custom user actions, such as button clicks, with additional context.

datadogRum.addAction('button_click', { buttonId: 'my-button' });

Logging Errors

Logs errors manually with additional context to help with debugging.

datadogRum.addError(new Error('Something went wrong'), {
  context: {
    productId: 123
  }
});

User Tracking

Sets user information to track user-specific data and associate it with the collected RUM data.

datadogRum.setUser({
  id: '1234',
  name: 'John Doe',
  email: '[e-mail]',
  // User-defined attributes
  plan_type: 'premium',
});

Other packages similar to @datadog/browser-rum

raygun4js

Raygun4js is a JavaScript SDK for Raygun, providing error tracking and real user monitoring. It captures errors and performance data from the browser, offering a feature set that competes with @datadog/browser-rum, with a focus on error diagnosis and resolution.

README

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. To collect events, add the RUM Browser SDK to your browser application and configure what data is collected using initialization parameters.

Setup

The RUM Browser SDK supports all modern desktop and mobile browsers including IE11. For more information, see the Browser Support table.

To set up RUM Browser Monitoring, create a RUM application:

1. In Datadog, navigate to the RUM Applications page and click the New Application button.
   • Enter a name for your application and click Generate Client Token. This generates a clientToken and an applicationId for your application.
   • Choose the installation type for the RUM Browser SDK: npm, or a hosted version (CDN async or CDN sync).
   • Define the environment name and service name for your application to use unified service tagging for RUM & Session Replay. Set a version number for your deployed application in the initialization snippet. For more information, see Tagging.
   • Set the sampling rate of total user sessions collected and use the slider to set the percentage of total Browser RUM & Session Replay sessions collected. Browser RUM & Session Replay sessions include resources, long tasks, and replay recordings. For more information about configuring the percentage of Browser RUM & Session Replay sessions collected from the total amount of user sessions, see Configure Your Setup For Browser and Browser RUM & Session Replay Sampling.
   • Click the Session Replay Enabled toggle to access replay recordings in Session Replay.
   • Select a privacy setting for Session Replay in the dropdown menu.
2. Deploy the changes to your application. Once your deployment is live, Datadog collects events from your users' browsers.
3. Visualize the data collected in dashboards or create a search query in the RUM Explorer.

Until Datadog starts receiving data, your application appears as pending on the RUM Applications page.

Choose the right installation method

npm (node package manager) : This method is recommended for modern web applications. The RUM Browser SDK is packaged with the rest of your front-end JavaScript code. It has no impact on page load performance. However, the SDK may miss errors, resources, and user actions triggered before the SDK is initialized. Datadog recommends using a matching version with the Browser Logs SDK.

CDN async : This method is recommended for web applications with performance targets. The RUM Browser SDK loads from our CDN asynchronously, ensuring the SDK download does not impact page load performance. However, the SDK may miss errors, resources, and user actions triggered before the SDK is initialized.

CDN sync : This method is recommended for collecting all RUM events. The RUM Browser SDK loads from our CDN synchronously, ensuring the SDK loads first and collects all errors, resources, and user actions. This method may impact page load performance.

npm

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

Latest version

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,
  sessionReplaySampleRate: 100, // if not included, the default is 100
  trackResources: true,
  trackLongTasks: true,
  trackInteractions: true,
})

before v4.20.0

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,
  premiumSampleRate: 100, // if not included, the default is 100
  trackInteractions: true,
})

before v4.10.2

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,
  replaySampleRate: 100, // if not included, the default is 100
  trackInteractions: true,
})

The trackInteractions and trackFrustrations parameters enable 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.

Latest version

<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-v4.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,
      sessionReplaySampleRate: 100, // if not included, the default is 100
      trackResources: true,
      trackLongTasks: true,
      trackInteractions: true,
    })
  })
</script>

beforev4.20.0

<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-v4.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,
      premiumSampleRate: 100, // if not included, the default is 100
      trackInteractions: true,
    })
  })
</script>

beforev4.10.2

<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-v4.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,
      replaySampleRate: 100, // if not included, the default is 100
      trackInteractions: true,
    })
  })
</script>

The trackInteractions and trackFrustrations parameters enable 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.

Latest version

<script src="https://www.datadoghq-browser-agent.com/datadog-rum-v4.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,
      sessionReplaySampleRate: 100, // if not included, the default is 100
      trackResources: true,
      trackLongTasks: true,
      trackInteractions: true,
    })
</script>

beforev4.20.0

<script src="https://www.datadoghq-browser-agent.com/datadog-rum-v4.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,
      premiumSampleRate: 100, // if not included, the default is 100
      trackInteractions: true,
    })
</script>

beforev4.10.2

<script src="https://www.datadoghq-browser-agent.com/datadog-rum-v4.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,
      replaySampleRate: 100, // if not included, the default is 100
      trackInteractions: true,
    })
</script>

The trackInteractions and trackFrustrations parameters enable 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 Browser SDK.

TypeScript

Types are compatible with TypeScript >= 3.8.2. For earlier versions, import JavaScript 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',
  sampleRate: 100,
  sessionReplaySampleRate: 100, // if not included, the default is 100
  trackResources: true,
  trackLongTasks: true,
})

Configuration

Initialization parameters

Call the initialization command to start tracking. The following parameters are available:

applicationId : Required
Type: String
The RUM application ID.

clientToken : Required
Type: String
A Datadog client token.

site : Required
Type: String
Default: datadoghq.com
The Datadog site parameter of your organization.

service : Optional
Type: String
The service name for your application. Follows the tag syntax requirements.

env : Optional
Type: String
The application’s environment, for example: prod, pre-prod, and staging. Follows the tag syntax requirements.

version : Optional
Type: String
The application’s version, for example: 1.2.3, 6c44da20, and 2020.02.13. Follows the tag syntax requirements.

trackViewsManually : Optional
Type: Boolean
Default: false
Allows you to control RUM views creation. See override default RUM view names.

trackInteractions : Optional
Type: Boolean
Default: false
Enables automatic collection of users actions.

trackFrustrations : Optional
Type: Boolean
Default: false
Enables automatic collection of user frustrations. Implies trackInteractions: true.

trackResources : Optional
Type: Boolean
Default: false
Enables collection of resource events.

trackLongTasks : Optional
Type: Boolean
Default: false
Enables collection of long task events.

defaultPrivacyLevel : Optional
Type: String
Default: mask-user-input
See Session Replay Privacy Options.

actionNameAttribute : Optional
Type: String
Specify your own attribute to be used to name actions.

sampleRate : Optional
Type: Number
Default: 100
The percentage of sessions to track: 100 for all, 0 for none. Only tracked sessions send RUM events. For more details about sampleRate, see the sampling configuration.

replaySampleRate : Optional - Deprecated
Type: Number
Default: 100
See sessionReplaySampleRate.

premiumSampleRate : Optional - Deprecated
Type: Number
Default: 100
See sessionReplaySampleRate.

sessionReplaySampleRate : Optional
Type: Number
Default: 100
The percentage of tracked sessions with Browser RUM & Session Replay pricing features: 100 for all, 0 for none. For more details about sessionReplaySampleRate, see the sampling configuration.

silentMultipleInit : Optional
Type: Boolean
Default: false
Initialization fails silently if the RUM Browser SDK is already initialized on the page.

proxyUrl : Optional
Type: String
Optional proxy URL, for example: https://www.proxy.com/path. For more information, see the full proxy setup guide.

allowedTracingOrigins : Optional
Type: List
A list of request origins used to inject tracing headers. For more information, see Connect RUM and Traces.

tracingSampleRate : Optional
Type: Number
Default: 100
The percentage of requests to trace: 100 for all, 0 for none. For more information, see Connect RUM and Traces.

telemetrySampleRate : Optional
Type: Number
Default: 20
Telemetry data (such as errors and debug logs) about SDK execution is sent to Datadog in order to detect and solve potential issues. Set this option to 0 to opt out from telemetry collection.

excludedActivityUrls : Optional
Type: List
A list of request origins ignored when computing the page activity. See How page activity is calculated.

Options that must have matching configuration when you are using the Logs Browser SDK:

trackSessionAcrossSubdomains : Optional
Type: Boolean
Default: false
Preserve the session across subdomains for the same site.

useSecureSessionCookie : Optional
Type: Boolean
Default: false
Use a secure session cookie. This disables RUM events sent on insecure (non-HTTPS) connections.

useCrossSiteSessionCookie : Optional
Type: Boolean
Default:false
Use a secure cross-site session cookie. This allows the RUM Browser SDK to run when the site is loaded from another one (iframe). Implies useSecureSessionCookie.

Tagging

A service is an independent, deployable code repository that maps to a set of pages.

• If your browser application was constructed as a monolith, your RUM application has one service name for the application.
• If your browser application was constructed as separate repositories for multiple pages, edit the default service names throughout the lifecycle of your application.

Access internal context

After the Datadog browser RUM SDK is initialized, you can access the internal context of the SDK.

You can explore the following attributes:

Attribute	Description
application_id	ID of the application.
session_id	ID of the session.
user_action	Object containing action ID (or undefined if no action is found).
view	Object containing details about the current view event.

For more information, see RUM Browser Data Collected.

Example

{
  application_id : "xxx",
  session_id : "xxx",
  user_action: { id: "xxx" },
  view : {
    id : "xxx",
    referrer : "",
    url: "http://localhost:8080/",
    name: "homepage"
  }
}

You can optionally use startTime parameter to get the context of a specific time. If the parameter is omitted, the current context is returned.

getInternalContext (startTime?: 'number' | undefined)

NPM

For NPM, use:

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

datadogRum.getInternalContext() // { session_id: "xxxx", application_id: "xxxx" ... }

CDN async

For CDN async, use:

DD_RUM.onReady(function () {
  DD_RUM.getInternalContext() // { session_id: "xxxx", application_id: "xxxx" ... }
})

CDN sync

For CDN sync, use:

window.DD_RUM && window.DD_RUM.getInternalContext() // { session_id: "xxxx", application_id: "xxxx" ... }

Further reading

{{< partial name="whats-next/whats-next.html" >}}

Changelog

v4.28.0

• 🐛 [RUMF-1337] Fix incorrect fetch duration (#1875)