Bug tracking for Next.js — session replay, console + HAR (2026)
Next.js bug-reporting guide for QA + dev teams: framework-specific gotchas, common bugs, and how to capture them with BugMojo session replay.
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 engineers actually ship through. Each is hard to spot in a screenshot and obvious in a session replay.
Common Next.js bugs
Real Next.js bug patterns — the symptom you will see in a 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.
| Feature | 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 | ✅ | ❌ |
| rrweb DOM session replay | Scrubbable, on-demand | Varies / always-on only |
| MCP integration for AI coding agents | ✓ | — |
| Zero-setup Quick Capture | No project, no SDK | Account / SDK required |
BugMojo records the DOM, console, and network — then ships a one-click ticket with the full replay attached. No SDK, no setup.
Try BugMojo freeFrequently asked questions
Frequently asked questions
Sources
- Next.js docs — Hydration — Vercel (2025)
- Next.js 15 release notes — Vercel (2024)

