@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

Datadog browser rum library.

Setup

NPM

import { Datacenter, datadogRum } from '@datadog/browser-rum'
datadogRum.init({
  applicationId: 'XXX',
  clientToken: 'XXX',
  datacenter: Datacenter.US,
  resourceSampleRate: 100,
  sampleRate: 100
})

Bundle

<script src = 'https://www.datadoghq-browser-agent.com/datadog-rum-us.js'>
<script>
  window.DD_RUM.init({
    applicationId: 'XXX',
    clientToken: 'XXX',
    datacenter: 'us',
    resourceSampleRate: 100,
    sampleRate: 100
  });
</script>

Public API

• Init must be called to start the tracking. Configurable options:

  • sampleRate: percentage of sessions to track. Only tracked sessions send rum events.
  • resourceSampleRate: percentage of tracked sessions with resources collection.
  • datacenter: defined to which datacenter we'll send collected data ('us' | 'eu')
  • silentMultipleInit: prevent logging errors while having multiple Init
  • trackInteractions: collect actions initiated by user interactions
  • service: name of the corresponding service
  • env: environment of the service
  • version: version of the service

  init(configuration: {
      applicationId: string,
      clientToken: string,
      datacenter?: string,
      resourceSampleRate?: number
      sampleRate?: number,
      silentMultipleInit?: boolean,
      trackInteractions?: boolean,
      service?: string,
      env?: string,
      version?: string,
  })
  

• Modify the global context

  addRumGlobalContext (key: string, value: any)  # add one key-value to the default context
  setRumGlobalContext (context: Context)  # entirely replace the default context
  

• Add user action

  addUserAction (name: string, context: Context)
  

Declarative API

Click action naming

The RUM library is using various strategies to get a name for click actions, but if you want more control, you can define a data-dd-action-name attribute on clickable elements (or any of their parents) that will be used to name the action. Examples:

<a class="btn btn-default" href="#" role="button" data-dd-action-name="Login button">Try it out!</a>

<div class="alert alert-danger" role="alert" data-dd-action-name="Dismiss alert">
  <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
  <span class="sr-only">Error:</span>
  Enter a valid email address
</div>

TypeScript support

Types are compatible with TypeScript >= 3.0. For earlier version, you can import js sources and use global variable to avoid any compilation issue:

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

window.DD_RUM.init({
  applicationId: 'XXX',
  clientToken: 'XXX',
  datacenter: 'us',
  resourceSampleRate: 100,
  sampleRate: 100
});

Changelog

v1.12.9

• 🐛 fix current action context reset on custom action (#444)
• ♻️ [RUMF-604] introduce parentContexts to return current contexts (#440)