Back to Blog
Session Replays and Frontend Performance Tracking with Datadog RUM
·UptimePulse Team

Session Replays and Frontend Performance Tracking with Datadog RUM

Learn how to use Datadog RUM session replay and frontend performance tracking to understand user behavior and optimize web application speed.

datadog rumsession replayfrontend performanceweb monitoring

Knowing your website loads in 2 seconds is useful. Seeing exactly where users click, scroll, and get frustrated is transformative. Datadog RUM session replay turns abstract metrics into concrete user insights.

What is Session Replay?

Session replay records real user sessions in your web application:

  • Visual playback — watch exactly what users see and do
  • Click heatmaps — where users click most frequently
  • Scroll depth — how far users scroll on each page
  • Form interactions — where users abandon forms
  • Error reproduction — see errors from the user's perspective

Unlike screen recording, session replay uses DOM manipulation to reconstruct the session, making it lightweight and privacy-friendly.

Datadog RUM Session Replay Setup

Basic Configuration

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

datadogRum.init({
  applicationId: 'YOUR_APP_ID',
  clientToken: 'YOUR_CLIENT_TOKEN',
  site: 'datadoghq.com',
  service: 'my-web-app',
  env: 'production',
  version: '1.0.0',
  sessionSampleRate: 100,
  sessionReplaySampleRate: 100,  // Capture all sessions
  trackUserInteractions: true,
  trackResources: true,
  trackErrors: true
});

// Start session replay recording
datadogRumSessionReplay.start();

Sampling Configuration

Recording every session is expensive. Configure sampling:

datadogRum.init({
  // ... other config
  sessionSampleRate: 100,      // Track 100% of sessions for metrics
  sessionReplaySampleRate: 10  // Record 10% of sessions for replay
});

Privacy Settings

Session replay respects user privacy by default:

datadogRum.init({
  // ... other config
  sessionReplaySampleRate: 10,
  defaultPrivacyLevel: 'mask-user-input',  // Mask form inputs
  // Options: 'allow', 'mask', 'mask-user-input'
});

Privacy levels:

  • allow — capture everything (use only for testing)
  • mask — mask all text and images
  • mask-user-input — mask form fields only (recommended)

Frontend Performance Tracking

Core Web Vitals

Track Google's Core Web Vitals automatically:

Largest Contentful Paint (LCP)

  • Measures loading performance
  • Target: under 2.5 seconds

First Input Delay (FID)

  • Measures interactivity
  • Target: under 100 milliseconds

Cumulative Layout Shift (CLS)

  • Measures visual stability
  • Target: under 0.1

Custom Performance Metrics

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

// Track custom timing
const startTime = performance.now();

await loadProductData();

const duration = performance.now() - startTime;

datadogRum.addAction('performance', {
  name: 'product_data_load',
  duration: duration
});

Resource Timing

Datadog RUM automatically tracks:

  • API request duration
  • Script load times
  • Image loading
  • CSS/Font loading

Network Request Monitoring

datadogRum.init({
  // ... other config
  firstPartyHosts: [
    'api.myapp.com',
    'cdn.myapp.com'
  ]
});

This enables:

  • Distributed tracing from browser to backend
  • Correlation between frontend and APM data
  • Error tracking across the full stack

Session Replay Features

Visual Playback

Watch sessions like a video:

  • Pause, rewind, and fast-forward
  • Speed up slow sessions
  • Skip idle time
  • Export clips for sharing

Event Timeline

See a timeline of user actions:

  • Clicks and taps
  • Page views
  • Errors
  • Network requests
  • Custom events

Console Logs

Session replay captures browser console output:

  • JavaScript errors
  • Console warnings
  • Network failures
  • Custom console.log messages

Network Waterfall

Visualize network requests during the session:

  • Request timing
  • Response sizes
  • Error rates
  • Slow requests highlighted

Heatmaps and Click Tracking

Click Heatmaps

Identify where users click:

  • Popular click targets
  • Rage clicks (frustrated rapid clicks)
  • Dead clicks (clicks on non-interactive elements)
  • Error clicks (clicks that trigger errors)

Scroll Heatmaps

Understand content engagement:

  • How far users scroll
  • Where they stop scrolling
  • Content visibility analysis
  • A/B test comparisons

Form Analytics

Track form completion:

  • Fields with highest abandonment
  • Time spent in each field
  • Validation errors
  • Successful submissions

Performance Monitoring Dashboard

Build a dashboard tracking:

Loading Performance

  • Page load time
  • Time to First Byte (TTFB)
  • First Contentful Paint (FCP)
  • Largest Contentful Paint (LCP)

Interactivity

  • First Input Delay (FID)
  • Time to Interactive (TTI)
  • Total Blocking Time (TBT)

Visual Stability

  • Cumulative Layout Shift (CLS)
  • Layout shift count
  • Layout shift sources

Error Tracking

  • JavaScript errors per session
  • Error rate by page
  • Unhandled promise rejections
  • Resource loading failures

Best Practices

Sample Strategically

Record enough sessions for insights without breaking the budget:

// Start with 10% sampling
sessionReplaySampleRate: 10

// Increase if you need more data
sessionReplaySampleRate: 25

Focus on Key Pages

Record high-value pages more aggressively:

  • Checkout flow: 100% recording
  • Product pages: 10% recording
  • Homepage: 5% recording

Set Up Alerts

Alert on performance degradation:

// Alert if LCP exceeds 4 seconds
datadogRum.addAction('performance_alert', {
  metric: 'LCP',
  threshold: 4000,
  actual: lcpValue
});

Use in Development

Test session replay in staging:

  1. Record sessions in staging environment
  2. Review replays before deploying to production
  3. Verify privacy settings work correctly

Privacy Compliance

  • Inform users about session recording
  • Respect do-not-track signals
  • Mask sensitive form fields
  • Allow users to opt out

Common Use Cases

Debugging User Issues

When a user reports a bug:

  1. Find their session in Datadog RUM
  2. Watch the replay to see exactly what happened
  3. Understand the context without asking the user

Optimizing Conversion

For checkout abandonment:

  1. Watch sessions of users who abandoned
  2. Identify friction points
  3. Fix UX issues
  4. Measure improvement

Performance Optimization

For slow pages:

  1. Analyze session replays for slow experiences
  2. Identify bottlenecks in the visual experience
  3. Prioritize fixes based on user impact

A/B Testing Analysis

Compare session replays between variants:

  • Watch how users interact with each version
  • Identify usability issues
  • Understand why one variant performs better

Integration with Other Datadog Products

APM Correlation

Link frontend sessions to backend traces:

  • See the full user journey
  • Identify backend bottlenecks
  • Debug errors across the stack

Log Management

Include RUM data in logs:

  • Frontend errors appear in log search
  • Session IDs enable correlation
  • Custom attributes filter logs

Synthetics

Combine RUM with synthetic monitoring:

  • RUM shows real user experience
  • Synthetics provide baseline performance
  • Together they give complete visibility

Getting Started

  1. Enable session replay in your RUM configuration
  2. Start with low sampling rate (5-10%)
  3. Build a performance dashboard
  4. Set up alerts for key metrics
  5. Review session replays weekly for insights
  6. Optimize based on real user data

Session replay transforms abstract metrics into concrete user experiences. Seeing exactly what users see helps you build better products faster.