Skip to Content
DocumentationThird Party ServicesSentry

Sentry (Error Monitoring & Performance)

Sentry is integrated into this React Native app for error tracking, performance monitoring, and crash reporting. It automatically captures exceptions, tracks performance issues, and provides detailed debugging information to help identify and fix issues in production.

Configuration

Sentry is configured in app/_layout.tsx:

  • DSN: Set via EXPO_PUBLIC_SENTRY_DSN environment variable
  • Debug Mode: Enabled in development, disabled in production builds
  • Navigation Integration: Tracks navigation performance and route changes
  • Error Boundary: Wraps the root layout to catch React errors
  • Native Frames Tracking: Enabled only in production builds (not in Expo Go)
  • Source Maps: Automatically uploaded via Expo plugin configuration

Expo Plugin Configuration

Configured in app.config.ts:

[
  '@sentry/react-native/expo',
  {
    organization: 'your-organization',
    project: 'your-project',
    url: 'https://sentry.io/',
  },
];

Integration Details

Error Boundary

The root layout is wrapped with Sentry’s error boundary:

export default Sentry.withErrorBoundary(RootLayout, {
  fallback: <Text>Error</Text>,
});

Navigation performance is tracked automatically:

const navigationIntegration = Sentry.reactNavigationIntegration({
  enableTimeToInitialDisplay: STORE_CLIENT,
});
 
// Register navigation container
navigationIntegration.registerNavigationContainer(ref);

Manual Error Reporting

To manually capture errors or add context:

import * as Sentry from '@sentry/react-native';
 
// Capture an exception
Sentry.captureException(new Error('Something went wrong'));
 
// Add user context
Sentry.setUser({
  id: '123',
  email: 'user@example.com',
});
 
// Add custom tags
Sentry.setTag('feature', 'checkout');
 
// Add breadcrumbs
Sentry.addBreadcrumb({
  message: 'User clicked checkout button',
  level: 'info',
});
 
// Set context
Sentry.setContext('checkout', {
  cartValue: 99.99,
  itemCount: 3,
});

Performance Monitoring

Track custom transactions:

const transaction = Sentry.startTransaction({
  name: 'Checkout Process',
  op: 'user.action',
});
 
// ... perform operation ...
 
transaction.finish();

Environment Setup

1. Create Sentry Project

  1. Go to Sentry.io  and create an account
  2. Create a new organization (or join existing)
  3. Create a new project (select React Native)
  4. Copy your DSN

2. Configure Environment Variables

Add your Sentry DSN to your environment variables:

EXPO_PUBLIC_SENTRY_DSN=your_dsn_here

3. Configure Expo Plugin

Update app.config.ts with your Sentry organization and project:

[
  '@sentry/react-native/expo',
  {
    organization: 'your-organization-slug',
    project: 'your-project-slug',
    url: 'https://sentry.io/',
  },
];

4. Source Maps

Source maps are automatically uploaded during build when using EAS Build. For local builds, configure source map upload in your build process.

5. Test Integration

Test that errors are being captured:

// Trigger a test error
Sentry.captureException(new Error('Test error'));

Resources

RevenueCatSupabase