Detect, understand, and fix errors and performance bottlenecks with clear, actionable debugging context for your React application—across components, state changes, and API requests.
React monitoring for developers
By correlating Sentry issues to our dev cycle, we can spot where problems begin and how to fix the source.
Jim Redmond
Sr. Systems Engineer,
Bitbucket
Getting started is simple
Grab the Sentry React SDK:
Click to Copy
npm install @sentry/react
We recommend putting the Sentry initialization code into its own file and including that file as the first import in your application entry point as shown in the example below:
Click to Copy
import { useEffect } from "react"; import * as Sentry from "@sentry/react"; Sentry.init({ dsn: "https://[email protected]/0", integrations: [ ], // Set `tracePropagationTargets` to control for which URLs trace propagation should be enabled tracePropagationTargets: [/^\//, /^https:\/\/yourserver\.io\/api/], });
Include the Sentry initialization file as the first import statement:
Click to Copy
// Sentry initialization should be imported first! import "./instrument"; import App from "./App"; import { createRoot } from "react-dom/client"; const container = document.getElementById(“app”); const root = createRoot(container); root.render(<App />);
That's it. Check out our documentation to ensure you have the latest instructions.
Common React Issues Solved
Hydration Errors
Whether it's a flickering UI or missing elements, Sentry's hydration error diff tools make it easy to instantly detect and debug mismatches between server-rendered and client-rendered HTML.
Component Performance Issues
Monitor React component render times and identify slow updates that impact user experience.
State Management Debugging
Track Redux actions and state transitions to understand what changed before an issue occurred.
Prevent Silent Failures in Scheduled Tasks
Missed background syncs or failed API updates can go unnoticed, leading to broken functionality. Ensure your scheduled tasks are running on time and without errors with Sentry’s monitoring tools
Detect Downtime
Get real-time alerts when your application is unavailable, so you can respond quickly before it impacts your users.
FAQs
Of course we have more content
Fix It
Get started with the only application monitoring platform that empowers developers to fix application problems without compromising on velocity.