Datadog RUM

Overview

This Nuxt plugin integrates Datadog RUM (Real User Monitoring) to track frontend performance metrics, user interactions, view transitions, and resource usage. It is designed to work only in specific environments (non-local) and integrates cookie consent and debug tracking.

Features

• Tracks user sessions, interactions, resource loads, and long tasks.
• Respects runtime environment settings (local disables tracking).
• Integrates Datadog Session Replay.
• Adds user context when available.
• Logs frontend performance issues with customizable logic.
• Debug flag integration via the application's debug store.

Runtime Configuration

This plugin uses the following runtime configuration values:

Initialization Guard

if (
  config.public.appEnvironment === "local" ||
  !config.public.ddApplicationId ||
  !config.public.ddClientToken
) {
  return false;
}

Prevents plugin activation in the following cases:

• Local environment
• Missing Datadog Application ID or Client Token

Datadog RUM Options

const options = {
  beforeSend,
  applicationId: config.public.ddApplicationId,
  clientToken: config.public.ddClientToken,
  site: "datadoghq.eu",
  service: "eu24web-nuxt",
  env: config.public.appEnvironment,
  version: config.public.version,
  sessionSampleRate: 100,
  sessionReplaySampleRate: 20,
  trackUserInteractions: true,
  trackResources: true,
  trackLongTasks: true,
  trackViewsManually: true,
};

Key options include:

• sessionReplaySampleRate: Replay 20% of user sessions.
• trackViewsManually: Requires manual RUM view management (e.g., for SPAs).
• beforeSend: Custom handler for classifying resource errors.

Error Classification Logic

function beforeSend(event, context) {
  if (
    event.type === "resource" &&
    (event.resource.status_code === 500 || event.resource.status_code === 400)
  ) {
    datadogRum.addError(
      new Error(
        `Bad request: ${event.resource.method} ${event.resource.url} ${event.resource.status_code}`
      ),
      context
    );
  }
}

Used to elevate certain HTTP response codes to error status for better observability.

Global Context

datadogRum.setGlobalContext({
  host: url.host,
});

Adds the current host to all tracked RUM events.

User Context (Authenticated Users Only)

if (authStore.is_authenticated) {
  datadogRum.setUser({
    id: authStore.user.id,
    email: authStore.user.email,
    name: `${authStore.user.first_name} ${authStore.user.last_name}`,
  });
}

Enhances visibility with user-level context.

Debug Tracking

if (config.public.appDebug) {
  debugStore.services.dataDogBrowserRum.enabled = true;
  debugStore.services.dataDogBrowserRum.clientToken =
    config.public.ddClientToken;
}

Helps validate whether Datadog RUM was properly initialized in debug builds.

Error Handling

All initialization failures are captured and routed to a custom error handler:

customClientErrorHandler(
  error,
  "high",
  "Datadog Rum Plugin Error - trying to monitoring services using datadog rum",
  errorMeta
);

This ensures graceful fallback during configuration or network issues.

Usage Example

If trackViewsManually is enabled, you can manually start a RUM view:

const nuxtApp = useNuxtApp();
nuxtApp.$ddRum.startView({ name: "Checkout Page" });

Notes

• This plugin is client-side only.
• Should be used together with the Datadog Logs plugin for full observability.
• Make sure Datadog is configured to respect privacy and data protection laws (e.g., GDPR).