Advanced RUM Provider Usage

The RumProvider simplifies setup and auto-instrumentation for React Native apps.

Provider configuration

import { RumProvider } from '@mobore/rum-react-native';
import { NavigationContainer, useNavigationContainerRef } from '@react-navigation/native';

export default function App() {
  const navigationRef = useNavigationContainerRef();
  return (
    <RumProvider
      config={{
        clientToken: 'YOUR_CLIENT_TOKEN',
        enableNetworkTracking: true,
        captureConsoleErrors: true,
      }}
      ref={navigationRef}
    >
      <NavigationContainer ref={navigationRef}>{/* app */}</NavigationContainer>
    </RumProvider>
  );
}

Manual initialization and controls

import RUM, { AutoInstrumentation } from '@mobore/rum-react-native';

await RUM.initialize({ clientToken: 'YOUR_CLIENT_TOKEN' });
AutoInstrumentation.start();

// Create custom spans
const span = RUM.startSpan('checkout');
// ... work ...
span.end();

// Record handled errors
RUM.recordError(new Error('Something went wrong'), { severity: 'high' });

// Add custom attributes
RUM.setGlobalAttributes({ plan: 'pro', cohort: 'beta' });

Expo Router

import { RumProvider } from '@mobore/rum-react-native';
import { useNavigationContainerRef } from 'expo-router';

export default function RootLayout() {
  const navigationRef = useNavigationContainerRef();
  return (
    <RumProvider config={{ clientToken: 'YOUR_CLIENT_TOKEN' }} ref={navigationRef}>
      {/* routes */}
    </RumProvider>
  );
}

Best practices

• Name spans after user actions or screen-level operations.
• Avoid high-cardinality span names.
• Attach useful attributes: user id (hashed), plan, feature flags.