Monitoring & Error Tracking

~20 min · Sentry, Web Vitals, instrumentation

Level 0Curious

0 XP0/68 lessons0/11 achievements

0/120 XP to next level120 XP to go0% complete

What you instrument

Errors — Sentry / Datadog / Bugsnag for thrown exceptions in Server Components, Server Actions, and Client Components alike.
Performance — Web Vitals (LCP, CLS, INP) per page; Vercel Speed Insights or your own reporter.
Logs — structured logs from console calls; pipe them into your log aggregator.

The instrumentation file

instrumentation.ts at the root runs once when the server starts. Use it to initialize Sentry / OpenTelemetry / any monitoring SDK once at boot. Stable since Next.js 15.

Code

Sentry setup wizard·bash

npx @sentry/wizard@latest -i nextjs
# Wizard creates instrumentation.ts, sentry.client.config.ts,
# sentry.server.config.ts, and updates next.config.ts.

Vercel Analytics + Speed Insights·tsx

// app/layout.tsx
import { Analytics } from '@vercel/analytics/react';
import { SpeedInsights } from '@vercel/speed-insights/next';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html><body>
      {children}
      <Analytics />
      <SpeedInsights />
    </body></html>
  );
}

instrumentation.ts boot hook·ts

// instrumentation.ts
export async function register() {
  if (process.env.NEXT_RUNTIME === 'nodejs') {
    await import('./lib/sentry.server');
  }
  if (process.env.NEXT_RUNTIME === 'edge') {
    await import('./lib/sentry.edge');
  }
}

External links

Exercise

Wire Sentry (or your preferred error tracker) into a project. Throw a deliberate error from a Server Action and verify it lands in your dashboard with the right user/route metadata.