sentry-react-native-setup
Sentry React Native Setup
Install and configure Sentry in React Native projects using the official wizard CLI.
Invoke This Skill When
- User asks to "add Sentry to React Native" or "install Sentry" in a React Native app
- User wants error monitoring, logging, or tracing in React Native or Expo
- User mentions "@sentry/react-native" or mobile error tracking
Important: The configuration options and code samples below are examples. Always verify against docs.sentry.io before implementing, as APIs and defaults may have changed.
Wizard Setup (Recommended)
npx @sentry/wizard@latest -i reactNative
What the Wizard Does
| Task | Description |
|---|---|
| Install SDK | Adds @sentry/react-native package |
| Metro config | Adds @sentry/react-native/metro to metro.config.js |
| Expo config | Adds @sentry/react-native/expo to app.json |
| Android setup | Enables Gradle build step for source maps |
| iOS setup | Wraps Xcode build phase, adds debug symbol upload |
| Pod install | Runs pod install for iOS |
| Credentials | Stores in ios/sentry.properties, android/sentry.properties, env.local |
| Init code | Configures Sentry in App.tsx or _layout.tsx |
Manual Configuration
If not using wizard, add to your app entry point:
import * as Sentry from "@sentry/react-native";
Sentry.init({
dsn: "YOUR_SENTRY_DSN",
sendDefaultPii: true,
// Tracing
tracesSampleRate: 1.0,
// Logs
enableLogs: true,
// Profiling
profilesSampleRate: 1.0,
// Session Replay
replaysOnErrorSampleRate: 1.0,
replaysSessionSampleRate: 0.1,
integrations: [Sentry.mobileReplayIntegration()],
});
Wrap Your App
export default Sentry.wrap(App);
Expo Projects
For Expo, follow the Expo-specific setup:
npx @sentry/wizard@latest -i reactNative
Works for both managed and bare Expo projects.
Configuration Options
| Option | Description | Default |
|---|---|---|
dsn |
Sentry DSN | Required |
sendDefaultPii |
Include user data | false |
tracesSampleRate |
% of transactions traced | 0 |
profilesSampleRate |
% of traces profiled | 0 |
enableLogs |
Send logs to Sentry | false |
replaysOnErrorSampleRate |
% of error sessions replayed | 0 |
replaysSessionSampleRate |
% of all sessions replayed | 0 |
Files Created/Modified
| File | Purpose |
|---|---|
App.js / _layout.tsx |
Sentry initialization |
metro.config.js |
Metro bundler config |
app.json |
Expo config (if Expo) |
ios/sentry.properties |
iOS build credentials |
android/sentry.properties |
Android build credentials |
env.local |
Environment variables |
Environment Variables
SENTRY_DSN=https://xxx@o123.ingest.sentry.io/456
SENTRY_AUTH_TOKEN=sntrys_xxx
SENTRY_ORG=my-org
SENTRY_PROJECT=my-project
Verification
Add test error:
throw new Error("My first Sentry error!");
Or use a test button:
<Button title="Test Sentry" onPress={() => { throw new Error("Test"); }} />
Source Maps
Source maps are automatically uploaded during build when wizard configures:
- Android: Gradle plugin
- iOS: Xcode build phase
Troubleshooting
| Issue | Solution |
|---|---|
| Wizard fails | Try manual setup, check Node version |
| iOS build fails | Run cd ios && pod install |
| Source maps not uploading | Verify sentry.properties files have auth token |
| Expo errors | Ensure using compatible Expo SDK version |
| App not wrapped | Add export default Sentry.wrap(App) |
More from jaffrepaul/agent-skills
sentry-otel-exporter-setup
Configure the OpenTelemetry Collector with Sentry Exporter for multi-project routing and automatic project creation. Use when setting up OTel with Sentry, configuring collector pipelines for traces and logs, or routing telemetry from multiple services to Sentry projects.
25sentry-setup-metrics
Setup Sentry Metrics in any project. Use when asked to add custom metrics, track counters/gauges/distributions, or instrument application performance. Supports JavaScript, Python, and Ruby.
3sentry-ios-swift-setup
Setup Sentry in iOS/Swift apps. Use when asked to add Sentry to iOS, install sentry-cocoa SDK, or configure error monitoring for iOS applications using Swift and SwiftUI.
3sentry-react-setup
Setup Sentry in React apps. Use when asked to add Sentry to React, install @sentry/react, or configure error monitoring, error boundaries, session replay, or browser tracing for React applications.
3sentry-pr-code-review
Review a project's PRs to check for issues detected in code review by Seer Bug Prediction. Use when asked to review or fix issues identified by Sentry in PR comments, or to find recent PRs with Sentry feedback.
3sentry-setup-logging
Setup Sentry Logging in any project. Use when asked to add Sentry logs, enable structured logging, capture console logs, or integrate logging libraries (Consola, Loguru) with Sentry. Supports JavaScript, Python, and Ruby.
3