Sentry React Setup
Wire Sentry into a React app so production crashes, traces, session replay, and logs reach a dashboard without guessing at init order.
Overview
Sentry React Setup is an agent skill for the Operate phase that installs and configures @sentry/react with tracing, replay, and error boundaries for client-side monitoring.
Install
npx skills add https://github.com/getsentry/sentry-agent-skills --skill sentry-react-setupWhat is this skill?
- Installs @sentry/react and documents npm install flow
- instrument.js pattern with import-first requirement in index/main entry
- browserTracingIntegration plus replayIntegration with sample-rate knobs
- Error boundaries and sendDefaultPii / enableLogs configuration examples
- Points to docs.sentry.io for verifying APIs before shipping config
- Requires instrument import before the app entry module
- Documents browser tracing and replay integrations with separate sample rates
Adoption & trust: 1k installs on skills.sh; 19 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
Your React app is in production but you only hear about bugs from tweets and have no traces, replays, or structured client errors.
Who is it for?
Solo builders shipping React SPAs or hybrids who need error monitoring and replay before scaling support load.
Skip if: Teams that only need server-side logging, non-React frameworks, or apps where monitoring is already standardized in a shared platform package.
When should I use this skill?
User asks to add Sentry to React, install @sentry/react, or configure error monitoring, error boundaries, session replay, or browser tracing.
What do I get? / Deliverables
You get a first-import instrument file, initialized Sentry client, and documented sampling settings so crashes and slow interactions show up in Sentry immediately.
- instrument.js (or equivalent) with Sentry.init configuration
- Updated entry point importing instrumentation first
- Optional error boundary usage aligned with @sentry/react
Recommended Skills
Journey fit
Canonical shelf is Operate because the skill’s payoff is live error visibility and tracing after the app exists—not greenfield UI work. Monitoring fits Sentry’s core outputs: error boundaries, browser tracing, replay, and log capture in the client.
How it compares
Use for procedural React+Sentry wiring instead of ad-hoc copy-paste from blog posts that omit import-order requirements.
Common Questions / FAQ
Who is sentry-react-setup for?
Indie and solo developers building React applications who want Sentry error monitoring, tracing, and session replay without manually reconciling docs.
When should I use sentry-react-setup?
Use it in Operate when hardening production visibility, and often right after Ship when you first deploy—whenever you need @sentry/react, error boundaries, or browser tracing configured.
Is sentry-react-setup safe to install?
Review the Security Audits panel on this Prism page and your DSN handling; the skill enables sendDefaultPii in examples, so adjust privacy settings to match your policy.
SKILL.md
READMESKILL.md - 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](https://docs.sentry.io) before implementing, as APIs and defaults may have changed. ## Install ```bash npm install @sentry/react --save ``` ## Configure Create `instrument.js` in your project root (must be imported first in your app): ```javascript 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 ```javascript // 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`: ```javascript 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: ```javascript 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](https://docs.sentry.io/platforms/javascript/guides/react/features/tanstack-router/) | ## Redux Integration (Optional) ```javascript 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: ```bash npx @sentry/wizard@latest -i sourcemaps ``` ## Environment Variables ```bash 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: ```javascript <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