JustAnalytics/Documentation

JustAnalytics for React Native

Step-by-step guide to add crash reporting, analytics, and performance monitoring to your React Native app

JustAnalytics for React Native

Add crash reporting, network tracking, navigation analytics, and performance monitoring to your React Native application.

Time to data: 5 minutes

Prerequisites#

Install the SDK

npm install @justanalyticsapp/react-native

Or with Expo:

npx expo install @justanalyticsapp/react-native

Initialize the SDK

Initialize as early as possible in your app entry point:

// App.tsx or index.ts
import JustAnalytics from '@justanalyticsapp/react-native';

JustAnalytics.init({
  siteId: 'site_abc123',
  apiKey: 'ja_sk_your_api_key_here',
  environment: __DEV__ ? 'development' : 'production',
  release: '1.0.0',  // Your app version
});

Tip: Store your credentials in environment variables using react-native-config or Expo's .env support.

Add crash reporting

Wrap your root component with the ErrorBoundary to catch React rendering errors:

import { ErrorBoundary } from '@justanalyticsapp/react-native';
import { Text, View } from 'react-native';

function FallbackScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Something went wrong. Please restart the app.</Text>
    </View>
  );
}

export default function App() {
  return (
    <ErrorBoundary fallback={<FallbackScreen />}>
      <Navigation />
    </ErrorBoundary>
  );
}

The SDK also installs a global error handler for uncaught JavaScript exceptions and unhandled promise rejections.

Add navigation tracking

React Navigation:

import { createNavigationContainerRef, NavigationContainer } from '@react-navigation/native';
import JustAnalytics from '@justanalyticsapp/react-native';

const navigationRef = createNavigationContainerRef();

export default function App() {
  return (
    <ErrorBoundary fallback={<FallbackScreen />}>
      <NavigationContainer
        ref={navigationRef}
        onReady={() => JustAnalytics.recordInitialRoute(navigationRef)}
        onStateChange={() => JustAnalytics.createNavigationListener(navigationRef)()}
      >
        <RootNavigator />
      </NavigationContainer>
    </ErrorBoundary>
  );
}

Expo Router:

// app/_layout.tsx
import { usePathname } from 'expo-router';
import JustAnalytics from '@justanalyticsapp/react-native';
import { useEffect } from 'react';

export default function RootLayout() {
  const pathname = usePathname();

  useEffect(() => {
    JustAnalytics.trackExpoRouterNavigation(pathname);
  }, [pathname]);

  return <Stack />;
}

Add performance monitoring

Mark when your app is ready for interaction and measure screen renders:

import JustAnalytics from '@justanalyticsapp/react-native';

// In your main screen's useEffect
useEffect(() => {
  JustAnalytics.markAppReady();
}, []);

// Measure screen render time
function HomeScreen() {
  const renderId = useRef(JustAnalytics.startScreenRender('HomeScreen'));

  useEffect(() => {
    JustAnalytics.endScreenRender(renderId.current);
  }, []);

  return <View>...</View>;
}

Verify Your Setup

Launch your app on a simulator or device, navigate between screens, then check the dashboard. You should see screen view events and network traces.

Open Dashboard

Advanced Features#

Manual error capture#

try {
  await riskyOperation();
} catch (error) {
  JustAnalytics.captureException(error, {
    tags: { module: 'checkout' },
    extra: { orderId: '12345' },
  });
}

Custom events#

JustAnalytics.trackEvent('purchase_completed', {
  orderId: 'o123',
  total: 99.99,
  items: 3,
});

JustAnalytics.trackEvent('onboarding_step', {
  step: 2,
  stepName: 'profile_setup',
});

User identification#

// After login
JustAnalytics.setUser({
  id: user.id,
  email: user.email,
  username: user.displayName,
});

Global tags#

JustAnalytics.setTag('app_theme', 'dark');
JustAnalytics.setTag('subscription', 'premium');

Capture messages#

JustAnalytics.captureMessage('User completed onboarding', 'info', {
  tags: { flow: 'onboarding' },
});

Network tracking#

The SDK automatically intercepts fetch and XMLHttpRequest calls, creating spans for each network request with W3C traceparent propagation. No configuration needed.

To connect frontend network calls with your backend traces, ensure your backend also uses a JustAnalytics SDK.

Offline support#

The SDK queues events when the device is offline using AsyncStorage. Events are automatically retried when connectivity is restored. No configuration needed.

Flush before exit#

// Before the app goes to background
import { AppState } from 'react-native';

AppState.addEventListener('change', (state) => {
  if (state === 'background') {
    JustAnalytics.flush();
  }
});

Clean shutdown#

// When your app is about to unmount
JustAnalytics.close();

Configuration options#

| Option | Type | Default | Description | |--------|------|---------|-------------| | siteId | string | required | Site ID from dashboard | | apiKey | string | required | API key (ja_sk_...) | | environment | string | 'production' | Deployment environment | | release | string | — | App version string | | debug | boolean | false | Enable debug logging | | enabled | boolean | true | Enable/disable SDK |