Monitoring & Observability

🔍 What Is It?

Production monitoring for Next.js has three layers:

1. Core Web Vitals — LCP, CLS, INP, FID measured on real user devices

- Vercel Analytics (built-in), Google Search Console, Lighthouse CI

1. Error tracking — catch and alert on exceptions in real-time

- Sentry (most popular), Datadog, Bugsnag

1. Server observability — logs, traces, metrics for Route Handlers and SSR

- Vercel Logs, Datadog APM, OpenTelemetry

🎯 Why Do We Need It?

Without monitoring:

• →You learn about errors from users, not dashboards
• →Performance regressions go unnoticed until users complain
• →Debugging production issues is guesswork

With monitoring:

• →Errors are caught and alerted within seconds
• →Performance regressions are detected before users notice
• →Production debugging uses real data, not assumptions

🏗️ What Happens in Real Projects?

Monitoring stack for a production SaaS:

• →Vercel Analytics — Core Web Vitals, page views, geography
• →Sentry — JavaScript errors, server errors, performance traces
• →Datadog — infrastructure metrics, custom business metrics
• →Axiom — structured log search and dashboards
• →Checkly — synthetic monitoring (run Playwright tests every 5 minutes)

⚙️ How It Works

Core Web Vitals measurement:

Next.js exposes a reportWebVitals function in the root layout or via the useReportWebVitals hook. It receives real user measurements and you send them to your analytics platform.

Error tracking with Sentry:

• →Sentry SDK wraps Server Components, Route Handlers, and Client Components
• →Unhandled errors are captured with full stack trace and context
• →Errors are grouped by similarity and assigned to team members

💻 Example

Sentry and Web Vitals Setup — Production monitoring setup for a Next.js application.

// sentry.client.config.ts
import * as Sentry from '@sentry/nextjs';

Sentry.init({
  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
  environment: process.env.NODE_ENV,
  // Only capture errors in production
  enabled: process.env.NODE_ENV === 'production',
  // Sample rate: capture 10% of transactions for performance
  tracesSampleRate: 0.1,
  // Capture 100% of errors
  sampleRate: 1.0,
  // Ignore common noise
  ignoreErrors: [
    'ResizeObserver loop limit exceeded',
    'Network request failed',
  ],
});

// sentry.server.config.ts
import * as Sentry from '@sentry/nextjs';

Sentry.init({
  dsn: process.env.SENTRY_DSN,
  environment: process.env.NODE_ENV,
  enabled: process.env.NODE_ENV === 'production',
  tracesSampleRate: 0.1,
});

🤔 Common Confusions

🚨 Common Production Issues

✅ Best Practices

🏛️ Architect's Note

💬 Frequently Asked Questions

🎯 Key Takeaways

🔗 Related Topics

🎯 Practice this topic in interviews

↗ Where this topic fits