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 version