Monitor React application

Introduction

Monitoring a React application in production is about continuously tracking the application’s health, performance, and user experience to identify issues before they significantly impact users. Unlike development, where errors can be reproduced locally, production applications are used by thousands of users across different browsers, devices, and network conditions. Therefore, it’s important to collect real-time telemetry, analyze it, and configure alerts so the development team can respond quickly.

To effectively monitor a React application, we focus on four key areas:

1. Errors – Monitor JavaScript exceptions, React Error Boundary errors, unhandled promise rejections, and API failures to detect application crashes and bugs.
2. Performance – Track page load time, Core Web Vitals (LCP, INP, CLS), component render time, bundle size, and memory usage to ensure the application remains fast and responsive.
3. Network Activity – Monitor API response times, failed requests, HTTP status codes, and timeout rates to identify backend or connectivity issues affecting the frontend.
4. User Experience (UX) – Analyze user interactions, navigation flow, session duration, and real user performance metrics to understand how users experience the application.

Based on these metrics, we can configure dashboards and alerting using tools such as Splunk, Grafana, Sentry, or Datadog, so that when predefined thresholds are exceeded (for example, a spike in JavaScript errors, high API latency, or degraded Core Web Vitals), notifications are automatically sent through slack , email or any other communication tool enabling the team to investigate and resolve issues quickly.

Monitoring Architecture

                           Users
                             │
                             ▼
                     React Application
                             │
     ┌───────────────┬───────────────┬────────────────┐
     │               │               │                │
     ▼               ▼               ▼                ▼
   Errors      Performance      Network         User Experience
 (JS Errors)   (LCP, INP, CLS) (API Calls)    (Navigation, Clicks)
     │               │               │                │
     └───────────────┴───────────────┴────────────────┘
                             │
                             ▼
                    Telemetry Collection
        (OpenTelemetry / Browser SDK / Custom Logs)
                             │
                             ▼
                 Monitoring & Analytics Platform
      (Splunk / Grafana / Datadog / New Relic / Sentry)
                             │
          ┌──────────────────┼──────────────────┐
          │                  │                  │
          ▼                  ▼                  ▼
     Dashboards          Log Analysis      Performance Reports
                             │
                             ▼
                        Alert Engine
                             │
         ┌───────────────────┼───────────────────┐
         ▼                   ▼                   ▼
       Slack              Email            PagerDuty

What should be monitored?

1. Error Monitoring

Capture:

• Runtime errors
• React Error Boundaries
• Promise rejections
• API failures

Example –

try {
   await api.getUsers();
}
catch(error){
   Sentry.captureException(error);
}

2. Measure Web Vitals

What are Web Vitals?

Web Vitals are a set of user-centric performance metrics that measure how fast, responsive, and visually stable a web application is. They help evaluate the real user experience and identify performance issues that can impact usability.

The three Core Web Vitals are:

Why are Core Web Vitals important?

React App:

import { onLCP, onCLS, onINP } from 'web-vitals';

onLCP(console.log);
onCLS(console.log);
onINP(console.log);

These metrics are sent to:

• Google Analytics
• Datadog
• New Relic

3. API Monitoring

Track:

• API latency
• HTTP errors
• Timeout
• Retry count

Example Axios Interceptor:

axios.interceptors.response.use(
  response => response,
  error => {
      Sentry.captureException(error);
      return Promise.reject(error);
  }
);

Dashboard

Average API latency
95th percentile latency
500 errors
404 errors
Timeout rate

4. React Rendering Performance

React DevTools Profiler helps during development.

In production monitor:

• Slow renders
• Frequent re-renders
• Component mount time

Example:

ProductList rendered 120 times
Should only render 10 times
Performance issue detected

5. Memory Monitoring

Monitor:

• JS Heap Size
• Detached DOM nodes
• Event listener leaks

Symptoms:

Memory 100 MB -> 250 MB -> 500 MB -> Browser crash

Possible causes:

• Missing cleanup in useEffect
• Timers not cleared
• WebSocket not disconnected

6. Network Monitoring

Track:

• Failed requests
• Slow requests
• Offline users
• Retry attempts

Useful metrics:

Average latency
P95 latency
P99 latency
Failure %
Bandwidth

7. Session Replay

Sometimes logs aren’t enough.

Use:

• LogRocket
• FullStory
• Microsoft Clarity

They record:

• Clicks
• Scrolls
• Mouse movement
• Console errors
• Network requests

You can replay exactly what the user experienced.

8. Bundle Monitoring

Monitor:

• Bundle size
• Lazy loaded chunks
• Download time

Example:

Previous Bundle420 KB -> Current Bundle900 KB -> Alert!

Tools:

• Webpack Bundle Analyzer
• Source Map Explorer

9. Real User Monitoring (RUM)

Instead of lab testing, monitor actual users.

Popular tools:

• Datadog RUM
• New Relic Browser
• Dynatrace
• Elastic APM

Metrics collected:

• Device
• Browser
• Country
• Network speed
• Load time
• API latency
• Errors

10. Alerting Strategy

Alerts should be actionable.

Best Practices