Building a React Application Monitoring Dashboard

Building a React Application Monitoring Dashboard

Monitoring a React application requires tracking both performance and reliability metrics. Here's how to build comprehensive visibility.

Track Core Web Vitals

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

function reportMetric(metric: { name: string; value: number; rating: string }) {
  fetch('/api/metrics', {
    method: 'POST',
    body: JSON.stringify({
      name: metric.name,
      value: metric.value,
      rating: metric.rating,
      url: window.location.pathname,
      timestamp: Date.now(),
    }),
    keepalive: true, // Survives page unload
  });
}

onCLS(reportMetric);
onFID(reportMetric);
onLCP(reportMetric);
onTTFB(reportMetric);
onINP(reportMetric);

API Performance Tracking

Wrap your fetch calls to measure performance:

function createMonitoredFetch() {
  return async function monitoredFetch(url: string, options?: RequestInit) {
    const start = performance.now();
    try {
      const response = await fetch(url, options);
      const duration = performance.now() - start;

      reportApiMetric({
        url: new URL(url, window.location.origin).pathname,
        method: options?.method || 'GET',
        status: response.status,
        duration,
      });

      return response;
    } catch (error) {
      reportApiMetric({
        url: new URL(url, window.location.origin).pathname,
        method: options?.method || 'GET',
        status: 0,
        duration: performance.now() - start,
        error: error.message,
      });
      throw error;
    }
  };
}

Error Rate Tracking

window.addEventListener('error', (event) => {
  reportError({
    type: 'runtime',
    message: event.message,
    source: event.filename,
    line: event.lineno,
  });
});

window.addEventListener('unhandledrejection', (event) => {
  reportError({
    type: 'promise',
    message: event.reason?.message || String(event.reason),
  });
});

Key Dashboard Panels

• Core Web Vitals — LCP, CLS, INP with pass/fail rates
• Error rate — errors per session, grouped by type
• API latency — p50, p95, p99 by endpoint
• Page load time — distribution by route
• Active sessions — real-time user count

Connect Bugsly to your React app for detailed error tracking with component stack traces. The metrics dashboard shows trends; Bugsly provides the specifics needed to debug individual issues.