React: How to organize logging and error monitoring in React?

Logging — recording events for debugging. Monitoring — tracking errors in production.

Why it matters: In development, you see every error in the console. In production, users encounter bugs silently — and you have no idea unless you have error monitoring in place. A proper logging strategy gives you visibility into what users actually experience, including errors, slow operations, and user behavior patterns.

How monitoring works:

1. Errors are caught by error boundaries and global error handlers.
2. The monitoring service (e.g., Sentry) captures the error with context (stack trace, user info, breadcrumbs).
3. You receive alerts in your dashboard with reproduction steps.
4. You fix the bug and deploy — the monitoring tracks if it recurs.

1. Sentry — popular monitoring service:

1npm install @sentry/react

1// src/index.tsx
2import * as Sentry from "@sentry/react";
3
4Sentry.init({
5  dsn: "https://...@sentry.io/12345",
6  integrations: [
7    Sentry.browserTracingIntegration(),
8    Sentry.replayIntegration(),
9  ],
10  tracesSampleRate: 0.1,  // 10% of transactions
11  replaysSessionSampleRate: 0.1,
12});
13
14// Error in code will be sent to Sentry automatically

2. Error Boundary + Sentry:

1import { ErrorBoundary } from "@sentry/react";
2
3<ErrorBoundary fallback={<ErrorPage />}>
4  <App />
5</ErrorBoundary>

3. Custom logger:

1const logger = {
2  info: (message, data) => {
3    if (process.env.NODE_ENV === "development") {
4      console.log(`[INFO] ${message}`, data);
5    }
6    // In production — to analytics
7    analytics.track("info", { message, ...data });
8  },
9  error: (error, context) => {
10    console.error(`[ERROR]`, error);
11    Sentry.captureException(error, { extra: context });
12  },
13};
14
15// Usage
16logger.info("User clicked button", { buttonId: "submit" });
17logger.error(new Error("API failed"), { url: "/api/users" });

Production configuration:

• Set tracesSampleRate low (0.01-0.1) in production to control costs.
• Use environment-based filtering — don't send dev errors to production Sentry.
• Add user context (user ID, email) to errors for easier debugging.
• Use release tracking to associate errors with specific deployments.

Sentry alternatives: LogRocket, Datadog, New Relic, Bugsnag.