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 navigation, Redux state, or component performance
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:
cat package.json | grep -E '"react"|"react-dom"'
cat package.json | grep '"@sentry/'
cat package.json | grep -E '"react-router-dom"|"@tanstack/react-router"'
cat package.json | grep -E '"redux"|"@reduxjs/toolkit"'
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"'
cat package.json | grep -E '"pino"|"winston"|"loglevel"'
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-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 |
Phase 2: Recommend
Present a concrete recommendation based on what you found. Don't ask open-ended questions — lead with a proposal:
Recommended (core coverage):
- ✅ Error Monitoring — always; captures unhandled errors, React error boundaries, React 19 hooks
- ✅ Tracing — React SPAs benefit from page load, navigation, and API call tracing
- ✅ Session Replay — recommended for user-facing apps; records sessions around errors
Optional (enhanced observability):
- ⚡ Logging — structured logs via
Sentry.logger.*; recommend when structured log search is needed
- ⚡ Profiling — JS Self-Profiling API (⚠️ experimental; requires cross-origin isolation headers)
Recommendation logic:
| Feature |
Recommend when... |
| Error Monitoring |
Always — non-negotiable baseline |
| Tracing |
Always for React SPAs — page load + navigation spans are high-value |
| Session Replay |
User-facing app, login flows, or checkout pages |
| Logging |
App needs structured log search or log-to-trace correlation |
| Profiling |
Performance-critical app; server sends Document-Policy: js-profiling header |
React-specific extras:
- React 19 detected → set up
reactErrorHandler() on createRoot
- React Router detected → configure matching router integration (see Phase 3)
- Redux detected → add
createReduxEnhancer() to Redux store
- Vite detected → configure
sentryVitePlugin for source maps (essential for readable stack traces)
Propose: "I recommend setting up Error Monitoring + Tracing + Session Replay. Want me to also add Logging or Profiling?"
Phase 3: Guide
Install
npm install @sentry/react --save
Create src/instrument.ts
Sentry must initialize before any other code runs. Put Sentry.init() in a dedicated sidecar file:
import * as Sentry from "@sentry/react";
Sentry.init({
dsn: import.meta.env.VITE_SENTRY_DSN,
environment: import.meta.env.MODE,
release: import.meta.env.VITE_APP_VERSION,
sendDefaultPii: true,
integrations: [
Sentry.browserTracingIntegration(),
Sentry.replayIntegration({
maskAllText: true,
blockAllMedia: true,
}),
],
tracesSampleRate: 1.0,
tracePropagationTargets: ["localhost", /^https:\/\/yourapi\.io/],
replaysSessionSampleRate: 0.1,
replaysOnErrorSampleRate: 1.0,
enableLogs: true,
});
DSN environment variable by build tool:
| Build Tool |
Variable Name |
Access in code |
| Vite |
VITE_SENTRY_DSN |
import.meta.env.VITE_SENTRY_DSN |
| Create React App |
REACT_APP_SENTRY_DSN |
process.env.REACT_APP_SENTRY_DSN |
| Custom webpack |
SENTRY_DSN |
process.env.SENTRY_DSN |
Entry Point Setup
Import instrument.ts as the very first import in your entry file:
import "./instrument";
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App";
createRoot(document.getElementById("root")!).render(
<StrictMode>
<App />
</StrictMode>
);
React Version-Specific Error Handling
React 19+ — use reactErrorHandler() on createRoot:
import { reactErrorHandler } from "@sentry/react";
createRoot(document.getElementById("root")!, {
onUncaughtError: reactErrorHandler(),
onCaughtError: reactErrorHandler(),
onRecoverableError: reactErrorHandler(),
}).render(<App />);
React <19 — wrap your app in Sentry.ErrorBoundary:
import * as Sentry from "@sentry/react";
createRoot(document.getElementById("root")!).render(
<Sentry.ErrorBoundary fallback={<p>Something went wrong</p>} showDialog>
<App />
</Sentry.ErrorBoundary>
);
Use <Sentry.ErrorBoundary> for any sub-tree that should catch errors independently (route sections, widgets, etc.).
Router Integration
Configure the matching integration for your router:
| Router |
Integration |
Notes |
| React Router v7 |
reactRouterV7BrowserTracingIntegration |
useEffect, useLocation, useNavigationType, createRoutesFromChildren, matchRoutes from react-router |
| React Router v6 |
reactRouterV6BrowserTracingIntegration |
useEffect, useLocation, useNavigationType, createRoutesFromChildren, matchRoutes from react-router-dom |
| React Router v5 |
reactRouterV5BrowserTracingIntegration |
Wrap routes in withSentryRouting(Route) |
| TanStack Router |
tanstackRouterBrowserTracingIntegration(router) |
Pass router instance — no hooks required |
| No router / custom |
browserTracingIntegration() |
Names transactions by URL path |
React Router v6/v7 setup:
import React from
