Clean • Professional
In production, monitoring and logging are critical for keeping your React application reliable, fast, and user-friendly.
They help you detect bugs before users report them, analyze performance bottlenecks, and recover gracefully from unexpected crashes.
This topic covers the three major pillars of React monitoring:
Error logging is the process of capturing and recording runtime errors that occur in your React app — whether they’re caused by network issues, API failures, or component crashes. Without proper logging, you won’t know when or why your app failed in production.
Sentry is one of the most popular tools for real-time error monitoring in frontend and backend apps.
Install Sentry SDK
npm install @sentry/react @sentry/tracing
Initialize in your app (e.g., index.js)
import * as Sentry from "@sentry/react";
import { BrowserTracing } from "@sentry/tracing";
Sentry.init({
dsn: "<https://your-dsn-link.sentry.io/>",
integrations: [new BrowserTracing()],
tracesSampleRate: 1.0, // capture 100% of transactions
});
Capture errors manually (optional)
try {
throw new Error("Manual error");
} catch (error) {
Sentry.captureException(error);
}
Wrap components in Sentry’s ErrorBoundary
<Sentry.ErrorBoundary fallback={<p>Something went wrong!</p>}>
<App />
</Sentry.ErrorBoundary>
LogRocket lets you replay user sessions, so you can see exactly what led to an error.
npm install logrocket
import LogRocket from "logrocket";
LogRocket.init("your-org/your-project");
// Optional: identify users
LogRocket.identify("USER_ID", {
name: "John Doe",
email: "[email protected]",
});
Use both Sentry (for error logs) and LogRocket (for user behavior) to get a complete debugging view.
React Profiler (DevTools)
React DevTools has a Profiler tab to analyze:
You can access it in Chrome → DevTools → Profiler Tab
Example:
import { Profiler } from "react";
function onRenderCallback(
id, // Profiler id
phase, // "mount" or "update"
actualDuration, // Time spent rendering
baseDuration
) {
console.log(`${id} took ${actualDuration}ms`);
}
<Profiler id="App" onRender={onRenderCallback}>
<App />
</Profiler>;
Track Core Web Vitals (LCP, FID, CLS) using Google’s web-vitals package:
npm install web-vitals
import { getCLS, getFID, getLCP } from "web-vitals";
getCLS(console.log);
getFID(console.log);
getLCP(console.log);
Even with monitoring, errors will still occur in production — due to APIs, user data, or browser limitations.
That’s why React provides Error Boundaries and Fallback UI techniques.
Error boundaries are React components that catch JavaScript errors in child components and display a fallback UI instead of crashing the app.
Example:
class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}
static getDerivedStateFromError() {
return { hasError: true };
}
componentDidCatch(error, info) {
console.error("Error caught:", error, info);
}
render() {
if (this.state.hasError) {
return <h2>Something went wrong. Please try again later.</h2>;
}
return this.props.children;
}
}
Usage:
<ErrorBoundary>
<Dashboard />
</ErrorBoundary>
For async or data-fetching components, you can use React.Suspense to show fallback UI while loading or retrying.
Example:
const Profile = React.lazy(() => import("./Profile"));
function App() {
return (
<Suspense fallback={<div>Loading profile...</div>}>
<Profile />
</Suspense>
);
}
Use retry logic for transient network errors (e.g., failed API calls):
async function fetchWithRetry(url, retries = 3) {
try {
const res = await fetch(url);
if (!res.ok) throw new Error("Failed request");
return res.json();
} catch (error) {
if (retries > 0) return fetchWithRetry(url, retries - 1);
throw error;
}
}
Combine retries with Toast notifications or Fallback messages to enhance UX.
| Concept | Description | Tools |
|---|---|---|
| Error Logging | Capture runtime errors and stack traces | Sentry, LogRocket |
| Performance Monitoring | Track render and network performance | React Profiler, Lighthouse, Sentry Performance |
| Runtime Error Handling | Prevent app crashes and show fallback UI | Error Boundaries, Suspense, Retry Logic |