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

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