Setting Up Datadog RUM with React Native: A Complete Guide

Mobile app performance directly impacts user retention. A slow or crashing app gets uninstalled. Datadog RUM (Real User Monitoring) with React Native gives you visibility into real user experiences on iOS and Android.

What is Datadog RUM?

Datadog RUM captures real user interactions in your mobile and web applications:

• Session data — user journeys, screen views, and session duration
• Performance metrics — app startup time, screen rendering, network requests
• Errors and crashes — unhandled exceptions and ANR (Application Not Responding)
• User actions — taps, swipes, and custom events
• Session replay — visual reproduction of user sessions

Datadog RUM React Native SDK

The React Native SDK provides native performance monitoring for both iOS and Android from a single JavaScript codebase.

Installation

# Install the RUM package
npm install @datadog/mobile-react-native

# iOS additional setup
cd ios && pod install

Basic Configuration

import { DdSdkReactNative, DdSdkReactNativeConfiguration } from '@datadog/mobile-react-native';

const config = new DdSdkReactNativeConfiguration(
  'YOUR_CLIENT_TOKEN',  // Client token (not API key)
  'prod',               // Environment name
  '1.0.0',              // Application version
  true,                 // Track user interactions
  true,                 // Track XHR resources
  true                  // Track errors
);

// Optional: Configure advanced options
config.site = 'US1';                    // Datadog site
config.sessionSamplingRate = 100;       // Session replay sample rate
config.resourceTracingSamplingRate = 100; // Resource tracing sample rate
config.firstPartyHosts = ['api.yourapp.com']; // First-party domains

await DdSdkReactNative.initialize(config);

Tracking Custom Actions

import { DdRum } from '@datadog/mobile-react-native';

// Track a button tap
DdRum.addAction('tap', 'checkout_button', Date.now());

// Track a custom event with context
DdRum.addAction('custom', 'purchase_completed', Date.now(), {
  productId: 'prod_123',
  amount: 49.99,
  currency: 'USD'
});

Tracking Errors

import { DdRum } from '@datadog/mobile-react-native';

// Manually track errors
try {
  await riskyOperation();
} catch (error) {
  DdRum.addError(
    error.message,
    'source',
    error.stack,
    Date.now()
  );
}

React Navigation Integration

Automatically track screen views with React Navigation:

import { DdRumReactNavigationTracking } from '@datadog/mobile-react-navigation-tracking';

// In your App.js or navigation setup
const navigationRef = React.createRef();

DdRumReactNavigationTracking.startTrackingViews(navigationRef.current);

// Wrap your NavigationContainer
<NavigationContainer ref={navigationRef}>
  {/* Your app screens */}
</NavigationContainer>

Datadog RUM Setup for Web

For web applications, the RUM SDK provides browser-based monitoring:

Installation

npm install @datadog/browser-rum

Configuration

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

datadogRum.init({
  applicationId: 'YOUR_APP_ID',
  clientToken: 'YOUR_CLIENT_TOKEN',
  site: 'datadoghq.com',
  service: 'my-web-app',
  env: 'production',
  version: '1.0.0',
  sampleRate: 100,          // Session sample rate
  trackInteractions: true,   // Track user clicks
  trackResources: true,      // Track network requests
  trackErrors: true          // Track JS errors
});

// Start RUM
datadogRum.startSessionReplayRecording();

React Integration

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

// Track page views on route changes
useEffect(() => {
  datadogRum.startView('/home', 'Home Page');

  return () => {
    datadogRum.stopView('/home');
  };
}, []);

// Track custom actions
const handlePurchase = () => {
  datadogRum.addAction('purchase', {
    productId: 'prod_123',
    amount: 49.99
  });
};

Datadog RUM Mobile

The mobile SDK supports iOS and Android natively:

iOS (Swift)

import Datadog

Datadog.initialize(
    with: Datadog.Configuration(
        clientToken: "YOUR_CLIENT_TOKEN",
        env: "production",
        service: "ios-app",
       追踪采样率: 100
    ),
    trackingConsent: .granted
)

// Start RUM
RUMMonitor.shared().startView(name: "HomeView")

Android (Kotlin)

import com.datadog.android.DdSdk

Datadog.initialize(
    context = this,
    configuration = Configuration(
        clientToken = "YOUR_CLIENT_TOKEN",
        env = "production",
        service = "android-app",
        sessionSamplingRate = 100f
    )
)

// Start RUM
GlobalRumMonitor.get().startView("HomeView")

Datadog RUM Metrics

Track these key RUM metrics:

Performance Metrics

• App startup time — cold and warm start duration
• Time to Interactive (TTI) — when the app becomes responsive
• Screen rendering time — time to display each screen
• Network latency — API response times

User Engagement Metrics

• Session duration — how long users stay in the app
• Screen views per session — engagement depth
• Action count — interactions per session
• Crash rate — sessions that ended with a crash

Error Metrics

• Error count — total errors encountered
• Error rate — errors per session
• ANR rate — Application Not Responding events

Best Practices

Sample Strategically

Don't capture 100% of sessions in production:

config.sessionSamplingRate = 10;  // 10% of sessions
config.resourceTracingSamplingRate = 100; // 100% of resources

Tag Sessions

Add context tags for filtering:

config.service = 'react-native-app';
config.env = 'production';
config.version = '2.1.0';

// Add custom attributes
config.additionalConfiguration = {
  userId: 'user_123',
  plan: 'premium'
};

Filter Sensitive Data

Never capture sensitive user data:

// Mask sensitive views
config.viewTrackingPredicate = (viewName) => {
  return !viewName.includes('payment') && !viewName.includes('profile');
};

Monitor Key Flows

Focus RUM on critical user journeys:

• Onboarding flow
• Checkout process
• Login/registration
• Core feature usage

Common Issues

SDK not initializing:

• Verify client token (not API key)
• Check network connectivity
• Ensure SDK version compatibility

Session data missing:

• Check sampling rate settings
• Verify RUM is enabled in Datadog
• Review browser/device console for errors

Performance impact:

• Reduce sampling rate if needed
• Disable resource tracing for non-critical apps
• Use automatic tracking instead of manual instrumentation

Getting Started

1. Create a RUM application in Datadog
2. Get your client token and app ID
3. Install the SDK for your platform
4. Configure basic initialization
5. Deploy to staging first, verify data flows
6. Roll out to production with appropriate sampling

Datadog RUM with React Native gives you visibility into real user experiences. Start with basic session tracking, then add custom actions and error monitoring as you learn what matters most to your users.