sentry-react-setup

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://[email protected]/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 version