sentry-react-sdk

All Skills > SDK Setup > React SDK

Sentry React SDK

Opinionated wizard that scans your React project and guides you through complete Sentry setup.

Invoke This Skill When

• User asks to "add Sentry to React" or "set up Sentry" in a React app
• User wants error monitoring, tracing, session replay, profiling, or logging in React
• User mentions @sentry/react, React Sentry SDK, or Sentry error boundaries
• User wants to monitor React Router v5/v6/v7 non-framework navigation, Redux state, or component performance

If project is React Router Framework mode using @sentry/react-router, use sentry-react-router-framework-sdk instead of this skill.

Note: SDK versions and APIs below reflect current Sentry docs at time of writing (@sentry/react ≥8.0.0). Always verify against docs.sentry.io/platforms/javascript/guides/react/ before implementing.

---

Phase 1: Detect

Run these commands to understand the project before making any recommendations:

# Detect React version
cat package.json | grep -E '"react"|"react-dom"'

# Check for existing Sentry
cat package.json | grep '"@sentry/'

# Detect router and framework mode hints
cat package.json | grep -E '"react-router-dom"|"react-router"|"@react-router/"|"@tanstack/react-router"|"@sentry/react-router"'

# Detect state management
cat package.json | grep -E '"redux"|"@reduxjs/toolkit"'

# Detect build tool
ls vite.config.ts vite.config.js webpack.config.js craco.config.js 2>/dev/null
cat package.json | grep -E '"vite"|"react-scripts"|"webpack"'

# Detect logging libraries
cat package.json | grep -E '"pino"|"winston"|"loglevel"'

# Check for companion backend in adjacent directories
ls ../backend ../server ../api 2>/dev/null
cat ../go.mod ../requirements.txt ../Gemfile ../pom.xml 2>/dev/null | head -3

What to determine:

Question	Impact
React 19+?	Use reactErrorHandler() hook pattern
React <19?	Use Sentry.ErrorBoundary
@sentry/react already present?	Skip install, go straight to feature config
React Router Framework mode indicators (@sentry/react-router, @react-router/*)?	Use sentry-react-router-framework-sdk
react-router-dom v5 / v6 / v7?	Determines which router integration to use
@tanstack/react-router?	Use tanstackRouterBrowserTracingIntegration()
Redux in use?	Recommend createReduxEnhancer()
Vite detected?	Source maps via sentryVitePlugin
CRA (react-scripts)?	Source maps via @sentry/webpack-plugin in CRACO
Backend directory found?	Trigger Phase 4 cross-link suggestion