Bug tracking for Next.js — session replay, console + HAR (2026)
4 min read · JavaScript
What Next.js teams ship with BugMojo
Next.js 15 ships with the App Router, React Server Components, Turbopack, and PPR (Partial Pre-Rendering) as defaults. Each unlocks performance — and each introduces a class of bug your old Pages Router playbook does not cover. Hydration boundaries are now everywhere, edge runtime errors look different from Node errors, and the "use client" / "use server" boundary is a frequent source of mystery payloads.
A bug report from a Next.js app needs the route segment (was it server-rendered, streamed, edge-cached?), the request waterfall (which RSCs ran, what they fetched), and the hydration state. BugMojo captures the DOM + console + network HAR end-to-end, so you can see exactly where the server response ended and client interactivity began.
This guide covers the most common Next.js 15 bug classes, how to capture them cleanly, and how to wire BugMojo into a Next.js team's Jira/Linear workflow.
Next.js gotchas
Framework-specific failure modes our team has shipped through. Each one is hard to spot in a screenshot — easy to spot in a session replay.
`use client` placement determines bundle size
High impactA `"use client"` at the top of a file marks every export as client. Importing one client component into a server component does NOT pull the whole subtree client-side — but importing a server component into a client component DOES inline it. Bug: bundles balloon, page TTFB regresses, no error.
Edge runtime is not Node
High impactEdge runtime supports a subset of Node APIs. Code that works locally (Node) breaks in production (Edge): `fs`, `crypto.randomBytes`, certain `Buffer` methods. Capture the exact runtime — BugMojo logs the `x-vercel-execution-region` header automatically.
fetch() inside Server Components is cached aggressively
Medium impactNext 15 dedupes and caches fetches inside Server Components. A "stale data" bug is usually a forgotten `{ cache: "no-store" }` or missing `revalidate`. Replay + network HAR shows the request was issued — but the response came from cache.
Middleware runs on every request including assets
Medium impactIf middleware does work without a matcher, you pay for it on every static asset request. Bug class: random latency spikes that don't correlate with any specific page.
PPR (Partial Pre-Rendering) makes "what was static" non-obvious
Medium impactWith PPR on, the same URL can be a mix of static shell + dynamic holes. Bug: a content change shows up only after a manual revalidate. Always capture `cache-control` headers in the report.
Common Next.js bugs
Real bug patterns from Next.js apps, with the symptom you’ll see in a bug report and the fix that actually works.
Hydration mismatch on dates rendered by server
- Symptom
- Date text flickers on first paint; console warning about hydration mismatch.
- Fix
- Render the date inside a client component with `suppressHydrationWarning`, or pass the timestamp as a number and format in `useEffect`. Never call `toLocaleString()` directly in a server component if it depends on user locale.
// app/page.tsx (server)
import { ClientDate } from './client-date';
export default async function Page() {
return <ClientDate iso={new Date().toISOString()} />;
}Server action throws but UI shows success
- Symptom
- Form submits, toast says "Saved", database has no row.
- Fix
- A throw inside a server action without explicit error handling silently resolves the action. Wrap in try/catch and return `{ ok: false, error }`. BugMojo's network HAR shows the 200 response with an error payload.
Cookies set in a server component never reach the browser
- Symptom
- User logs in, redirect happens, but next request is unauthenticated.
- Fix
- Cookies can only be set in Route Handlers, Server Actions, or middleware — not inside a Server Component render. Move the cookie-set to the action that triggered the login.
Setup
For source-mapped errors with App Router, upload your `.next/static/chunks/*.map` to BugMojo or wire it to your Vercel build hooks.
# Install BugMojo from the Chrome Web Store
# Works with Next.js dev, preview, and production — no package installBugMojo vs alternatives
The honest comparison — where BugMojo wins, and where another tool might serve you better.
| Capability | BugMojo | Vercel Logs / Sentry |
|---|---|---|
| See what the user actually saw | ✅ DOM replay | ❌ server logs only |
| Console + network from the user's session | ✅ | ⚠️ partial |
| Captures hydration mismatches visually | ✅ | ❌ |
| Always-on session recording | ❌ (on-demand) | ✅ Sentry Session Replay |
| No SDK / no bundle weight | ✅ | ❌ |
Frequently asked questions
Sources
- Next.js docs — Hydration — Vercel (2025)
- Next.js 15 release notes — Vercel (2024)