Next.js Analytics and Monitoring

Add Google Analytics to every page by rendering one component in the root layout.

import {
  GoogleAnalytics,
} from '@next/third-parties/google';

// inside the root layout
<GoogleAnalytics gaId="G-XXXXXXX" />

Record a custom event, such as a purchase, from a Client Component.

'use client';
import {
  sendGAEvent,
} from '@next/third-parties/google';

<button
  onClick={() => sendGAEvent('event', 'purchase')}
>
  Buy
</button>

Track page views on Vercel by adding its analytics component to the layout.

import { Analytics } from '@vercel/analytics/next';

// inside the body of the root layout
<Analytics />

Receive each Core Web Vitals metric as real visitors load your pages.

'use client';
import { useReportWebVitals } from 'next/web-vitals';

export function WebVitals() {
  useReportWebVitals((metric) => {
    console.log(metric.name, metric.value);
  });
  return null;
}

Send a metric to your server reliably, even as the page is closing.

useReportWebVitals((metric) => {
  const body = JSON.stringify(metric);
  navigator.sendBeacon('/api/vitals', body);
});

Receive the metrics in a route handler and store or log them.

// app/api/vitals/route.ts
export async function POST(request: Request) {
  const metric = await request.json();
  console.log(metric.name, metric.value);
  return new Response(null, { status: 204 });
}

Run setup code once when the server starts by exporting this function.

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

Report every uncaught server error from a single function.

export async function onRequestError(
  err: unknown,
  request: { path: string }
) {
  const body = JSON.stringify({
    message: String(err),
    path: request.path,
  });
  await fetch(LOG_URL, { method: 'POST', body });
}

Send traces to any OpenTelemetry backend with one call.

import { registerOTel } from '@vercel/otel';

export function register() {
  registerOTel('my-app');
}

Run monitoring code in the browser before the app becomes interactive.

// instrumentation-client.ts
window.addEventListener('error', (event) => {
  sendError(event.error);
});

Observe the start of every client-side navigation to time route changes.

export function onRouterTransitionStart(
  url: string
) {
  performance.mark(`nav-start-${url}`);
}

Set up Sentry for client, server, and build with one command.

npx @sentry/wizard@latest -i nextjs

Report a handled error to Sentry and still let the caller see it.

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

try {
  await chargeCard(order);
} catch (err) {
  Sentry.captureException(err);
  throw err;
}