sentry-react-setup

SKILL.md

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