Production Observability

Observability is the practice of making a system's internal state inferable from its external outputs. For frontend applications, this means knowing whether the app is working for real users — not just whether the server responds. A well-observed application surfaces problems before users report them.

What to Observe

Observability covers four pillars. Each answers a different question about production health.

Minimum viable frontend observability

Frontend Observability

Error tracking with Sentry

Sentry provides structured error capture with context, breadcrumbs, and source maps. Set it up in the root layout or provider.

import * as Sentry from '@sentry/nextjs';

Sentry.init({
  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
  tracesSampleRate: 0.1, // 10% of transactions for performance monitoring
  environment: process.env.NODE_ENV,
  integrations: [Sentry.replayIntegration()],
});

What to capture in every error

The error tracking service is only useful if errors contain enough context to reproduce the issue.

Performance monitoring with Web Vitals

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

function reportWebVitals() {
  onLCP((metric) => {
    // Send to analytics: metric.value is in milliseconds
    console.log('LCP:', metric.value);
  });
  onINP((metric) => {
    console.log('INP:', metric.value);
  });
  onCLS((metric) => {
    console.log('CLS:', metric.value);
  });
}

On Vercel, Speed Insights and Analytics handle this automatically. For other platforms, send these values to your analytics provider or custom endpoint.

Alerting Strategy

Not every problem needs a notification. Alert on symptoms that require human intervention.

Alert rules for frontend

Incident Response

When an alert fires, the team should follow a predictable process. Define it before the first incident.

Frontend incident severity levels

Runbook approach for common scenarios

Post-incident checklist

After resolving an incident, document:

1. What was the trigger (alert or user report)?
2. What was the root cause?
3. How long did it take to detect, diagnose, and resolve?
4. What change would prevent this from recurring?
5. What change would make detection or diagnosis faster next time?

Analytics Integration

Observability and analytics serve different purposes but share infrastructure.

Common analytics setup

// Page view tracking in layout
function AnalyticsProvider({ children }: { children: React.ReactNode }) {
  const pathname = usePathname();
  
  useEffect(() => {
    if (process.env.NODE_ENV === 'production') {
      trackPageView({ path: pathname, referrer: document.referrer });
    }
  }, [pathname]);

  return <>{children}</>;
}

// Custom event tracking
function trackEvent(name: string, properties?: Record<string, unknown>) {
  if (process.env.NODE_ENV !== 'production') return;
  // Send to analytics provider
}

On Vercel, you can use the built-in @vercel/analytics package which handles page views automatically. See Deployment for the CI/CD setup that deploys alongside monitoring.