Loading...
Loading...
Setup Sentry in React apps. Use when asked to add Sentry to React, install @sentry/react, or configure error monitoring for React applications.
npx skill4agent add getsentry/agent-skills sentry-react-setupnpm install @sentry/react --savesrc/instrument.jsimport * 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,
});// 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 />);createRootimport { 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(),
});import * as Sentry from "@sentry/react";
<Sentry.ErrorBoundary fallback={<p>An error occurred</p>}>
<MyComponent />
</Sentry.ErrorBoundary>| Router Version | Integration |
|---|---|
| v7 (non-framework) | |
| v6 | |
| v4/v5 | |
import * as Sentry from "@sentry/react";
import { configureStore } from "@reduxjs/toolkit";
const store = configureStore({
reducer,
enhancers: (getDefaultEnhancers) =>
getDefaultEnhancers().concat(Sentry.createReduxEnhancer()),
});npx @sentry/wizard@latest -i sourcemapsREACT_APP_SENTRY_DSN=https://xxx@o123.ingest.sentry.io/456
SENTRY_AUTH_TOKEN=sntrys_xxx
SENTRY_ORG=my-org
SENTRY_PROJECT=my-project<button onClick={() => { throw new Error("Sentry Test Error"); }}>
Test Sentry
</button>| Issue | Solution |
|---|---|
| Errors not captured | Ensure |
| Source maps not working | Run sourcemaps wizard, verify auth token |
| React Router spans missing | Add correct router integration for your version |