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…
Sentry React Setup
Install and configure Sentry in React projects.
Invoke This Skill When
User asks to "add Sentry to React" or "install Sentry" in a React app
User wants error monitoring, logging, or tracing in React
User mentions "@sentry/react" or React error boundaries
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.
Install
npm install @sentry/react --save
Configure
Create instrument.js in your project root (must be imported first in your app):
import * as Sentry from "@sentry/react";
Sentry.init({
dsn: "YOUR_SENTRY_DSN",
sendDefaultPii: true,
// Tracing + Session Replay
integrations: [
Sentry.browserTracingIntegration(),
Sentry.replayIntegration(),
],
tracesSampleRate: 1.0,
tracePropagationTargets: [/^\//, /^https:\/\/yourserver\.io\/api/],
replaysSessionSampleRate: 0.1,
replaysOnErrorSampleRate: 1.0,
// Logs
enableLogs: true,
});
Import First in Entry Point
// src/index.js or src/main.jsx
import "./instrument"; // Must be first!
import App from "./App";
import { createRoot } from "react-dom/client";
const root = createRoot(document.getElementById("app"));
root.render(<App />);
Error Handling
React 19+
Use error hooks with createRoot:
import { createRoot } from "react-dom/client";
import * as Sentry from "@sentry/react";
const root = createRoot(document.getElementById("app"), {
onUncaughtError: Sentry.reactErrorHandler(),
onCaughtError: Sentry.reactErrorHandler(),
onRecoverableError: Sentry.reactErrorHandler(),
});
React <19
Use ErrorBoundary component:
import * as Sentry from "@sentry/react";
<Sentry.ErrorBoundary fallback={<p>An error occurred</p>}>
<MyComponent />
</Sentry.ErrorBoundary>
Router Integration
Router
Integration
React Router v7
Sentry.reactRouterV7BrowserTracingIntegration
React Router v6
Sentry.reactRouterV6BrowserTracingIntegration
React Router v4/v5
Sentry.reactRouterV5BrowserTracingIntegration (shared for both)
TanStack Router
See TanStack Router docs
Redux Integration (Optional)
import * as Sentry from "@sentry/react";
import { configureStore } from "@reduxjs/toolkit";
const store = configureStore({
reducer,
enhancers: (getDefaultEnhancers) =>
getDefaultEnhancers().concat(Sentry.createReduxEnhancer()),
});
Source Maps
Upload source maps for readable stack traces:
npx @sentry/wizard@latest -i sourcemaps
Environment Variables
SENTRY_DSN=https://xxx@o123.ingest.sentry.io/456
SENTRY_AUTH_TOKEN=sntrys_xxx # Used by sentry-cli / source maps, not the SDK
SENTRY_ORG=my-org # Used by sentry-cli, not the SDK
SENTRY_PROJECT=my-project # Used by sentry-cli, not the SDK
Note: The SDK reads SENTRY_DSN automatically. If using Create React App, prefix with REACT_APP_; for Vite, use VITE_. SENTRY_AUTH_TOKEN/ORG/PROJECT are used by sentry-cli for source map uploads, not by the browser SDK.
Verification
Add test button to trigger error:
<button onClick={() => { throw new Error("Sentry Test Error"); }}>
Test Sentry
</button>
Troubleshooting
Issue
Solution
Errors not captured
Ensure instrument.js is imported first
Source maps not working
Run sourcemaps wizard, verify auth token
React Router spans missing
Add correct router integration for your versiondon't have the plugin yet? install it then click "run inline in claude" again.