How to monitor Next.js and Vercel sites
Monitor a Next.js site with HTTP checks on important routes plus a keyword or browser check, because a page can return 200 while rendering an error. Add real-user monitoring for Web Vitals and JavaScript errors, an error tracker for server and client exceptions, API checks on route handlers, and a dependency monitor on Vercel's status page.
What can go wrong with Next.js and Vercel sites
- 200 with a broken page. A client-side exception or a failed data fetch renders an error boundary or an empty shell, while the server still answers 200.
- Stale or failed revalidation. With ISR, a failing revalidation keeps serving the last good page; content silently stops updating.
- Function timeouts. Server-side rendering or a route handler exceeds the platform's function duration limit and returns 504.
- Missing environment variables. A variable set in Preview but not Production breaks one feature after deploy.
- Hydration errors and slow vitals. A mismatch between server and client output or a heavy bundle hurts LCP and INP without any server error.
- Platform incidents. A Vercel or upstream API outage affects you without anything in your code changing.
The signals that matter, with alert thresholds
| Signal | Alert when | Why it matters |
|---|---|---|
| Key routes | non-2xx, or a keyword missing | Broken pages despite 200. |
| Critical flow (sign-up, checkout) | browser check fails | What users actually do. |
| LCP / INP / CLS at p75 | > 2.5 s / > 200 ms / > 0.1 | Google's "good" thresholds. |
| JavaScript errors | new error, or a spike after a deploy | Client breakage. |
| API route latency and status | p95 > 1 s or non-2xx | Server-side problems. |
| Vercel status | degraded or outage | Not your bug. |
Thresholds are starting points. Tune them after a week of data: an alert nobody acts on should be raised or removed.
How to check Next.js and Vercel sites by hand
curl -s -o /dev/null -w '%{http_code} ttfb=%{time_starttransfer}s\n' https://example.com/
curl -sI https://example.com/ | grep -iE 'x-vercel-cache|x-nextjs-cache|age'
vercel logs https://my-app-abc123.vercel.app
next build
How to watch Next.js and Vercel sites with Vigil
- In New monitor create an Uptime monitor per key route and a Keyword monitor for text that only appears when data has loaded (e.g. a product name), so a 200 error page still alerts.
- For sign-up, login or checkout, add a Browser check: a real headless Chromium follows a short script and asserts what users see, with a screenshot as evidence.
- Add the real-user monitoring snippet (
/vigil-rum.js) to your root layout: p75 LCP, CLS, INP, TTFB and FCP per page, page views and JavaScript errors with fingerprints. - Create a project under Errors and use its DSN with
@sentry/nextjsfor server, edge and client exceptions. For traces, Next.js'sinstrumentation.tswith OpenTelemetry can export to the OTLP endpoint (quick start). - Add a Dependency monitor for Vercel (one of the built-in providers) so incident alerts tell you when the platform, not your code, is the cause.
Every alert goes to the channels you pick: email, Slack, Telegram, Discord, Microsoft Teams, Pushover, webhooks or on-call paging. Failures are confirmed by a second check before anyone is woken up.
Next.js and Vercel sites monitoring FAQ
Why isn't a status-code check enough for Next.js?
Because many failures render inside a 200 response: error boundaries, empty client-rendered shells, missing data. A keyword or browser check asserts on content, which is what users judge.
Should I monitor preview deployments?
Usually not continuously. Monitor production routes and run a browser check after each production deploy; preview URLs change on every push.
Does this work for self-hosted Next.js?
Yes. Everything above works on any host. With next start on your own server, also install the server agent and watch the Node process; see how to monitor Node.js.