Skip to content

feat(react-native): Adds experimental AI prompt#16284

Draft
antonis wants to merge 3 commits intomasterfrom
antonis/rn-ai-prompt
Draft

feat(react-native): Adds experimental AI prompt#16284
antonis wants to merge 3 commits intomasterfrom
antonis/rn-ai-prompt

Conversation

@antonis
Copy link
Contributor

@antonis antonis commented Feb 6, 2026

DESCRIBE YOUR PR

Tell us what you're changing and why. If your PR resolves an issue, please link it so it closes automatically.
Fixes getsentry/sentry-react-native#5607
Adds experimental AI prompt. The prompt was tested with different project setups and agents and was successfull in setting up a basic project.

Collapsed Expanded
Screenshot 2026-02-06 at 16 21 00 Screenshot 2026-02-06 at 16 21 06

Example Agent Sessions

Expo Project

⏺ I am the AI coding assistant! It looks like you want me to integrate Sentry into your React Native project. Let me start by checking what type of project this is.

⏺ Read 2 files (ctrl+o to expand)                                                                                                                                                       
   
⏺ Perfect! I can see this is an Expo project (has 'expo' in package.json dependencies). Let me help you integrate Sentry.                                                               
                                                                                                                                                                                      
  Before I proceed, I need some information from you:                                                                                                                                   
                                         
⏺ User answered Claude's questions:                                                                                                                                                     
  ⎿  · What's your Sentry DSN? (Find it at: Project Settings > Client Keys (DSN) in your Sentry dashboard) → I'll provide it now
     · Which features do you want to enable? (You can select multiple) → Performance Tracing (Recommended), Profiling, Session Replay, Logs                                             
                                          
⏺ Great! You've selected:                                                                                                                                                               
  - ✅ Performance Tracing               
  - ✅ Profiling                                                                                                                                                                        
  - ✅ Session Replay                                                                                                                                                                   
  - ✅ Logs                                                                                                                                                                             
                                                                                                                                                                                        
  Now I need the actual DSN string. Please provide your Sentry DSN (it looks like: https://[key]@[org].ingest.sentry.io/[project])                                                      
                                                                                                                                                                                        
❯ https://1df17bd4e543fdb31351dee1768bb679@o447951.ingest.sentry.io/5428561                                                                                                             
                                                                                                                                                                                        
⏺ Perfect! Now let me integrate Sentry into your Expo app. Let me start by checking your app structure and then proceed with the installation.                                          
                                                                                                                                                                                        
⏺ Searched for 1 pattern (ctrl+o to expand)  
                                                                                                                                                                                        
⏺ Bash(npm install @sentry/react-native) 
  ⎿  added 16 packages, and audited 928 packages in 6s                                                                                                                                  
                                         
     165 packages are looking for funding                                                                                                                                               
     … +3 lines (ctrl+o to expand)                                                    
  ⎿  (timeout 2m)                                                                                                                                                                       
                                                                                                                                                                                        
⏺ Read 1 file (ctrl+o to expand)                                                                                                                                                        
                                                                                                                                                                                        
⏺ Now let me add Sentry initialization to your app. I'll add the import, configure Sentry with all the features you selected, and wrap the root component:                              
                                                                                                                                                                                        
⏺ Update(app/_layout.tsx)                                                                                                                                                               
  ⎿  Added 22 lines                                                                                                                                                                     
       2  import { Stack } from 'expo-router';                                                                                                                                          
       3  import { StatusBar } from 'expo-status-bar';                                                                                                                                  
       4  import 'react-native-reanimated';                                                                                                                                             
       5 +import * as Sentry from '@sentry/react-native';                                                                                                                               
       6                                 
       7  import { useColorScheme } from '@/hooks/use-color-scheme';                                                                                                                    
       8                                                                                                                                                                              
       9 +Sentry.init({                                                                                                                                                                 
      10 +  dsn: 'https://1df17bd4e543fdb31351dee1768bb679@o447951.ingest.sentry.io/5428561',                                                                                           
      11 +                                                                                                                                                                              
      12 +  // Better debugging with user context                                                                                                                                       
      13 +  sendDefaultPii: true,                                                                                                                                                       
      14 +                                                                                                                                                                              
      15 +  // Performance Tracing                                                                                                                                                      
      16 +  tracesSampleRate: 1.0, // 100% in dev, reduce to 0.1-0.2 in production                                                                                                      
      17 +                                                                                                                                                                              
      18 +  // Profiling                                                                                                                                                                
      19 +  profilesSampleRate: 1.0, // 100% in dev, reduce to 0.1-0.2 in production                                                                                                    
      20 +                                                                                                                                                                              
      21 +  // Session Replay                                                                                                                                                           
      22 +  replaysOnErrorSampleRate: 1.0, // Capture 100% of sessions with errors                                                                                                      
      23 +  replaysSessionSampleRate: 0.1, // Capture 10% of sessions (reduce to 0.01 in production)                                                                                    
      24 +  integrations: [Sentry.mobileReplayIntegration()],                                                                                                                           
      25 +                                                                                                                                                                              
      26 +  // Logs                                                                                                                                                                     
      27 +  enableLogs: true,                                                                                                                                                           
      28 +});                                                                                                                                                                           
      29 +                                                                                                                                                                              
      30  export const unstable_settings = {                                                                                                                                            
      31    anchor: '(tabs)',                                                                                                                                                           
      32  };                                                                                                                                                                            
                                                                                                                                                                                        
⏺ Update(app/_layout.tsx)                                                                                                                                                               
  ⎿  Added 3 lines, removed 1 line                                                                                                                                                      
      31    anchor: '(tabs)',                                                                                                                                                           
      32  };                                                                                                                                                                            
      33                                                                                                                                                                                
      34 -export default function RootLayout() {                                                                                                                                        
      34 +function RootLayout() {                                                                                                                                                       
      35    const colorScheme = useColorScheme();                                                                                                                                       
      36                                                                                                                                                                                
      37    return (                                                                                                                                                                    
     ...
      44      </ThemeProvider>
      45    );
      46  }
      47 +                                                                                                                                                                       
      48 +export default Sentry.wrap(RootLayout);                                                                                                                                

⏺ Now let me set up the Metro config and Expo plugin:
                                                                                      
⏺ Read 2 files (ctrl+o to expand)              
                                                                                                                                                                                        
⏺ Write(metro.config.js)                             
  ⎿  Wrote 4 lines to metro.config.js                                                                                                                                                   
      1 const { getSentryExpoConfig } = require('@sentry/react-native/metro');                       
      2 const config = getSentryExpoConfig(__dirname);                                                                                                                                  
      3 module.exports = config;                                                                     
                                                                                                                                                                                        
⏺ Update(app.json)                                                                                   
  ⎿  Added 2 lines, removed 1 line                                                                                                                                                      
      38              "backgroundColor": "#000000"                                                   
      39            }                                                                                                                                                                   
      40          }
      41 -      ]                                                                                                                                                                       
      41 +      ],                                                                                                                                                               
      42 +      "@sentry/react-native/expo"                                                                                                                                      
      43      ],
      44      "experiments": {
      45        "typedRoutes": true,

⏺ Now let me add a test button to verify the setup. Let me check your tab screens:
                                                                                      
⏺ Searched for 1 pattern, read 1 file (ctrl+o to expand)     
                                                                                                                                                                                        
⏺ Update(app/(tabs)/index.tsx)                         
  ⎿  Added 2 lines, removed 1 line                                                                                                                                                      
      1  import { Image } from 'expo-image';                                                         
      2 -import { Platform, StyleSheet } from 'react-native';                                                                                                                           
      2 +import { Platform, StyleSheet, Button } from 'react-native';                                                                                                            
      3 +import * as Sentry from '@sentry/react-native';                                                                                                                                
      4                                                                                              
      5  import { HelloWave } from '@/components/hello-wave';
      6  import ParallaxScrollView from '@/components/parallax-scroll-view';

⏺ Update(app/(tabs)/index.tsx)        
  ⎿  Added 13 lines                                                                   
      75            <ThemedText type="defaultSemiBold">app-example</ThemedText>.
      76          </ThemedText>                                                                                                                                                         
      77        </ThemedView>
      78 +      <ThemedView style={styles.stepContainer}>                                                                                                                               
      79 +        <ThemedText type="subtitle">🛡️ Test Sentry Integration</ThemedText>                                                                                            
      80 +        <ThemedText>                                                                                                                                                   
      81 +          Press the button below to send a test error to Sentry. Check your Sentry dashboard to see it appear!                                                         
      82 +        </ThemedText>                                                                                                                                                  
      83 +        <Button                                                                                                                                                        
      84 +          title="Trigger Test Error"                                                                                                                                   
      85 +          onPress={() => {                                                                                                                                             
      86 +            Sentry.captureException(new Error('Test error from Sentry integration!'));                                                                                 
      87 +            alert('Test error sent to Sentry! Check your dashboard.');                                                                                                 
      88 +          }}                                                                                                                                                           
      89 +        />                                                                                                                                                             
      90 +      </ThemedView>                                                                                                                                                    
      91      </ParallaxScrollView>
      92    );
      93  }

⏺ Read 1 file (ctrl+o to expand)                  
                                                                                      
⏺ Perfect! ✅ Sentry integration is complete! Here's what I've set up:                                                                                                                  
                                                                                                                                                                                        
  What Was Configured:                                                                                                                                                                  
                                                                                                                                                                                        
  ✅ Installed & Initialized                                                                                                                                                            
                                                                                                                                                                                        
  - Installed @sentry/react-native package                                                                                                                                              
  - Added Sentry initialization to app/_layout.tsx with your DSN
  - Wrapped the root component with Sentry.wrap() for automatic tracking

  ✅ Features Enabled:

  - Error Monitoring - Automatic error capture
  - Performance Tracing - Tracks app performance (tracesSampleRate: 1.0)
  - Profiling - Code execution profiling (profilesSampleRate: 1.0)
  - Session Replay - Records user sessions (100% on errors, 10% overall)
  - Logs - Captures console logs

  ✅ Expo Configuration:

  - Created metro.config.js with Sentry configuration
  - Added @sentry/react-native/expo plugin to app.json
  - Test button added to home screen

  Next Steps:

  1️⃣ Test It Now:

  npx expo run:ios
  # or
  npx expo run:android

  IMPORTANT: You must use development builds (commands above). Expo Go is NOT supported by Sentry.

  2️⃣ Verify Setup:

  1. Launch the app on your device/simulator
  2. Go to the home screen
  3. Scroll down to "🛡️ Test Sentry Integration"
  4. Press "Trigger Test Error"
  5. Check your Sentry dashboard at: https://o447951.ingest.sentry.io/

  You should see the error appear within seconds with device info, breadcrumbs, and stack trace!

  3️⃣ Before Production:

  When you're ready to deploy, update app/_layout.tsx to reduce sampling rates:
  tracesSampleRate: 0.2,        // 20% of transactions
  profilesSampleRate: 0.2,       // 20% of profiles
  replaysSessionSampleRate: 0.01 // 1% of normal sessions

  Optional: Source Maps Upload (Production Only)

  If you want source maps uploaded for production builds, you'll need to:
  1. Get your organization slug and project slug from Sentry
  2. Create an auth token at: https://sentry.io/settings/account/api/auth-tokens/
  3. Create .env.local file with SENTRY_AUTH_TOKEN=your-token
  4. Update the plugin config in app.json

  Your .gitignore already protects .env.local files, so auth tokens won't be committed.

  ---
  All done! 🎉 Try running the app now and test the error button!

✻ Cogitated for 1m 27s

React Native Project

⏺ I'll help you integrate Sentry into your React Native app. Let me first check your project structure to determine if this is an Expo or bare React Native project.

⏺ Read 2 files (ctrl+o to expand)                                                                                                                                                       
   
⏺ Great! I can see this is a bare React Native project (has ios/ and android/ directories). Let me gather the configuration details from you.                                           
  ⎿  Tool use rejected with user message: The user wants to clarify these questions.                                                                                                  
         This means they may have additional information, context or questions for you.                                                                                                 
         Take their response into account and then reformulate the questions if appropriate.                                                                                          
         Start by asking them what they would like to clarify.                                                                                                                          
                                                                                                                                                                                        
         Questions asked:                                                                                                                                                               
     - "What's your Sentry DSN? (Find it at: Project Settings > Client Keys (DSN) in your Sentry dashboard)"
       Answer: https://1df17bd4e543fdb31351dee1768bb679@o447951.ingest.sentry.io/5428561                                                                                                
     - "Which Sentry features do you want to enable?"                                                                                                                                   
       Answer: Session Replay, Logs, Performance Tracing (Recommended)                                                                                                                  
                                                                                                                                                                                        
⏺ Perfect! I can see you've provided:                                                                                                                                                   
  - DSN: https://1df17bd4e543fdb31351dee1768bb679@o447951.ingest.sentry.io/5428561                                                                                                      
  - Features: Performance Tracing, Session Replay, Logs                                                                                                                                 
                                                                                                                                                                                        
  What would you like to clarify before I proceed with the integration?                                                                                                                 
                                                                                                                                                                                        
❯ nothing, go ahead with the setup                                                                                                                                                      
                                                         
⏺ Perfect! Let me set up Sentry for you. I'll start by installing the package and configuring your app.                                                                                 
                                                                                                                                                                                        
⏺ Bash(npm install @sentry/react-native)
  ⎿  added 21 packages, and audited 868 packages in 9s                                                                                                                                  
                                         
     164 packages are looking for funding                                                                                                                                               
     … +8 lines (ctrl+o to expand)       
  ⎿  (timeout 2m)                                                                                                                                                                       
                                                         
⏺ Read 2 files (ctrl+o to expand)                        
                                                                                                                                                                                        
⏺ Great! Now let me configure Sentry in your app. I'll update App.tsx to initialize Sentry and wrap the root component.                                                                 
                                                                                                                                                                                        
⏺ Update(App.tsx)                                                                                                                                                                       
  ⎿  Added 11 lines                                                                                                                                                                     
       5   * @format                                                                                                                                                                    
       6   */                                                                                                                                                                           
       7                                                                                                                                                                                
       8 +import * as Sentry from '@sentry/react-native';                                                                                                                               
       9  import { NewAppScreen } from '@react-native/new-app-screen';
      10  import { StatusBar, StyleSheet, useColorScheme, View } from 'react-native';                                                                                                   
      11  import {                                               
     ...                                                                                                                                                                                
      13    useSafeAreaInsets,                                                                                                                                                        
      14  } from 'react-native-safe-area-context';                                                                                                                                      
      15                                                                                                                                                                                
      16 +Sentry.init({                                                                                                                                                                 
      17 +  dsn: 'https://1df17bd4e543fdb31351dee1768bb679@o447951.ingest.sentry.io/5428561',                                                                                           
      18 +  sendDefaultPii: true,                                                                                                                                                       
      19 +  tracesSampleRate: 1.0, // 100% in dev, reduce to 0.1-0.2 in production                                                                                                      
      20 +  replaysOnErrorSampleRate: 1.0, // Capture 100% of sessions with errors                                                                                                      
      21 +  replaysSessionSampleRate: 0.1, // Capture 10% of sessions (reduce to 0.01 in production)                                                                                    
      22 +  integrations: [Sentry.mobileReplayIntegration()],                                                                                                                           
      23 +  enableLogs: true,                                                                                                                                                           
      24 +});                                                                                                                                                                           
      25 +                                                                                                                                                                              
      26  function App() {                                                                                                                                                              
      27    const isDarkMode = useColorScheme() === 'dark';                                                                                                                             
      28                                                                                                                                                                                
                                                                                                                                                                                        
⏺ Update(App.tsx)                                                                                                                                                                       
  ⎿  Added 1 line, removed 1 line                                                                                                                                                       
      53    },                                                                                                                                                                          
      54  });                                                                                                                                                                           
      55                                                                                                                                                                                
      56 -export default App;                                                                                                                                                           
      56 +export default Sentry.wrap(App);                                                                                                                                              
                                                                                                                                                                                        
⏺ Now I'll update the Metro configuration to include Sentry:                                                                                                                            
                                                                                                                                                                                        
⏺ Update(metro.config.js)                                                                                                                                                               
  ⎿  Added 2 lines, removed 1 line                                                                                                                                                      
      1  const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
      2 +const { withSentryConfig } = require('@sentry/react-native/metro');                                                                                                            
      3                                                                                                                                                                               
      4  /**                                                                                                                                                                            
      5   * Metro configuration                                                                      
     ...
       9   */
      10  const config = {};
      11
      11 -module.exports = mergeConfig(getDefaultConfig(__dirname), config);                                                                                                     
      12 +module.exports = withSentryConfig(mergeConfig(getDefaultConfig(__dirname), config));                                                                                   

⏺ Perfect! The basic Sentry SDK is now configured. For production-ready setup with source maps and debug symbols upload, you have two options:
                                                         
  OPTION 1 - RECOMMENDED: Use the Sentry Wizard (Easiest)
                                                                                                                                                                                        
  Run this command to automatically configure iOS and Android native build tools:
                                                                                                                                                                                        
  npx @sentry/wizard@latest -i reactNative                                                           

  The wizard will handle all the complex native configuration for you.

  OPTION 2 - Manual Setup (Full Control)

  If you prefer manual setup, I'll need some information from your Sentry account:

  1. Organization slug (from your Sentry URL: sentry.io/organizations/[ORG-SLUG]/)
  2. Project slug (from your Sentry URL: sentry.io/organizations/[ORG]/projects/[PROJECT-SLUG]/)
  3. Auth token (create at https://sentry.io/settings/account/api/auth-tokens/ with scopes: project:releases, project:write)

  Manual setup involves:
  - Creating ios/sentry.properties and android/sentry.properties
  - Modifying Xcode build phases (requires manual project file editing)
  - Updating android/app/build.gradle

  ⚠️ Note: The manual iOS setup requires editing Xcode project files, which is complex and error-prone. The wizard is strongly recommended.

  ---
  Which option would you like to use?

  Also, let me add a test button to App.tsx so you can verify the Sentry integration is working:

⏺ Update(App.tsx)                   
  ⎿  Added 1 line, removed 1 line                        
       7  
       8  import * as Sentry from '@sentry/react-native';                                                                                                                               
       9  import { NewAppScreen } from '@react-native/new-app-screen';
      10 -import { StatusBar, StyleSheet, useColorScheme, View } from 'react-native';                                                                                                   
      10 +import { Button, StatusBar, StyleSheet, useColorScheme, View } from 'react-native';                                                                                    
      11  import {
      12    SafeAreaProvider,
      13    useSafeAreaInsets,

⏺ Update(App.tsx)                   
  ⎿  Added 6 lines                                       
      39  
      40    return (                                                                                                                                                                    
      41      <View style={styles.container}>
      42 +      <Button                                                                                                                                                                 
      43 +        title="Trigger Test Error"                                                                                                                                     
      44 +        onPress={() => {                                                                                                                                               
      45 +          Sentry.captureException(new Error('Test error from Sentry integration!'));                                                                                   
      46 +        }}                                                                                                                                                             
      47 +      />                                                                                                                                                               
      48        <NewAppScreen
      49          templateFileName="App.tsx"
      50          safeAreaInsets={safeAreaInsets}

⏺ Excellent! I've completed the core Sentry integration:
                                                         
  ✅ What's Been Configured:
                                                                                                                                                                                        
  1. Sentry SDK installed - @sentry/react-native package added
  2. SDK initialized in App.tsx with:                                                                                                                                                   
    - Your DSN                                                                                       
    - Performance Tracing (100% sample rate for dev)
    - Session Replay (100% on errors, 10% regular sessions)
    - Logs enabled
    - sendDefaultPii enabled for better debugging
  3. App wrapped with Sentry.wrap(App) for automatic tracking
  4. Metro config updated with Sentry support
  5. Test button added - Press "Trigger Test Error" to verify Sentry is working

  🎯 Test It Now:

  You can run your app right now and test Sentry:

  # iOS
  npm run ios

  # Android
  npm run android

  Press the "Trigger Test Error" button and check your Sentry dashboard (Issues page) - you should see the error within seconds!

  📋 Next Steps (Optional - For Production):

  For source maps and debug symbols upload (needed to see actual file names and line numbers in production errors), run the wizard:

  npx @sentry/wizard@latest -i reactNative

  This is optional now but recommended before deploying to production.

  📝 Production Checklist:

  Before production, update these values in App.tsx:
  - tracesSampleRate: 0.1 (reduce to 10%)
  - replaysSessionSampleRate: 0.01 (reduce to 1%)

  Would you like me to run the wizard now, or would you prefer to test the current setup first?

## IS YOUR CHANGE URGENT?

Help us prioritize incoming PRs by letting us know when the change needs to go live.

  • Urgent deadline (GA date, etc.):
  • Other deadline:
  • None: Not urgent, can wait up to 1 week+

SLA

  • Teamwork makes the dream work, so please add a reviewer to your PRs.
  • Please give the docs team up to 1 week to review your PR unless you've added an urgent due date to it.
    Thanks in advance for your help!

PRE-MERGE CHECKLIST

Make sure you've checked the following before merging your changes:

  • Checked Vercel preview for correctness, including links
  • PR was reviewed and approved by any necessary SMEs (subject matter experts)
  • PR was reviewed and approved by a member of the Sentry docs team

LEGAL BOILERPLATE

Look, I get it. The entity doing business as "Sentry" was incorporated in the State of Delaware in 2015 as Functional Software, Inc. and is gonna need some rights from me in order to utilize my contributions in this here PR. So here's the deal: I retain all rights, title and interest in and to my contributions, and by keeping this boilerplate intact I confirm that Sentry can use, modify, copy, and redistribute my contributions, under Sentry's choice of terms.

EXTRA RESOURCES

@vercel
Copy link

vercel bot commented Feb 6, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
sentry-docs Ready Ready Preview, Comment Feb 6, 2026 4:33pm
1 Skipped Deployment
Project Deployment Actions Updated (UTC)
develop-docs Ignored Ignored Preview Feb 6, 2026 4:33pm

Request Review


STEP 2 - ASK USER FOR CONFIGURATION:

1. "What's your Sentry DSN?"
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Try using Sentry CLI for this

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This option requires getting a token first which probably beats the purpose of automating the dsn retrieval. The tool installation also adds friction.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tweaked the dsn step to offer to open the page instead with 01e2b1f

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Create AI Integration Prompt

1 participant