How to organize error tracking (error monitoring) in a React application?

Question

Accepted Answer

Error monitoring in React requires **catching errors at all levels** (render, async, event handlers) and sending them to an analytics service. **System design context:** Error monitoring must cover three categories: 1. **Synchronous errors** — thrown during render (caught by Error Boundaries). 2. **Asynchronous errors** — unhandled promise rejections (not caught by Error Boundaries). 3. **Event handler errors** — errors in onClick, onChange, etc. (not caught by Error Boundaries). Each category requires a different catching mechanism. **Sentry integration:** ```tsx // sentry.client.config.ts import * as Sentry from "@sentry/react"; Sentry.init({ dsn: process.env.NEXT_PUBLIC_SENTRY_DSN, integrations: [ Sentry.browserTracingIntegration(), Sentry.replayIntegration({ maskAllText: true }) ], tracesSampleRate: 0.1, // 10% of transactions replaysSessionSampleRate: 0.01, replaysOnErrorSampleRate: 1.0 // 100% of error replays }); ``` **Global Error Boundary:** ```tsx import { ErrorBoundary } from "@sentry/react"; function ErrorPage() { return (

Something went wrong

We have been notified and are working on a fix.

); } function App() { return ( } onError={(error, componentStack) => { Sentry.withScope((scope) => { scope.setExtras({ componentStack }); Sentry.captureException(error); }); }} > ); } ``` **Catching unhandled errors (all three categories):** ```tsx // 1. Unhandled promise rejections useEffect(() => { const errorHandler = (event: PromiseRejectionEvent) => { Sentry.captureException(event.reason); }; window.addEventListener("unhandledrejection", errorHandler); return () => window.removeEventListener("unhandledrejection", errorHandler); }, []); // 2. Event handler errors function RiskyButton() { const handleClick = () => { try { doSomethingRisky(); } catch (error) { Sentry.captureException(error); showErrorToast("Something went wrong. Please try again."); } }; return ; } // 3. Async operation errors function DataFetcher() { useEffect(() => { fetch("/api/data") .then(res => res.json()) .catch(error => { Sentry.captureException(error); showErrorToast("Failed to load data"); }); }, []); return null; } ``` **Adding user context for debugging:** ```tsx Sentry.setUser({ id: user.id, email: user.email, role: user.role }); Sentry.setTags({ environment: process.env.NODE_ENV, feature_flag: "new_checkout" }); ``` **What to track:** - **React render errors** — via Error Boundary (catches render lifecycle errors). - **Unhandled promise rejections** — via `unhandledrejection` event listener. - **Network errors** — intercept `fetch` or `axios` error responses. - **Performance metrics** — Core Web Vitals (LCP, FID, CLS) via Sentry Performance. - **User context** — user ID, role, plan for filtering errors by user segment. - **Feature flags** — tag errors with feature flags to correlate new feature rollouts with error spikes. **Production pitfalls:** - **Not wrapping the entire app in ErrorBoundary** — render errors in any component will crash the app without a fallback UI. - **Capturing too many errors** — filter out known/expected errors (network timeouts, abort errors) to avoid noise. - **Missing source maps** — Sentry cannot show original source code without uploaded source maps. - **Not sampling** — at high traffic, capturing 100% of transactions will overwhelm your Sentry quota. Use `tracesSampleRate`. **Monitoring:** Set up Sentry alerts for error rate spikes, new error types, and performance regressions. Use dashboards to track error trends over time.

React: How to organize error tracking (error monitoring) in a React application?