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 Install npm install @sentry/react --save

Configure

Create src/instrument.js (must be imported first in your app):

import * as Sentry from "@sentry/react";

Sentry.init({ dsn: "YOUR_SENTRY_DSN", sendDefaultPii: true,

// Tracing integrations: [Sentry.browserTracingIntegration()], tracesSampleRate: 1.0, tracePropagationTargets: [/^\//, /^https:\/\/yourserver.io\/api/],

// Session Replay integrations: [Sentry.replayIntegration()], 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();

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";

An error occurred\