v0 "Application error: a client-side exception has occurred": the fix
This message is Next.js telling you that a React component crashed in the visitor’s browser and nothing caught it. On v0 projects the crash is most often caused by an environment variable that exists in the v0 preview but not in the Vercel Production environment, by code that touches window or localStorage during render, or by auth code that assumes a user or session is always there. The browser console on the live page names the real error; fix that, then add an error boundary so a future crash shows a friendly message instead of a white screen.
What you'll see
The page loads for a moment, then goes white with one line of black text: "Application error: a client-side exception has occurred (see the browser console for more information)". It often happens right after signing in, on a dashboard page, or only on the deployed site while the v0 preview keeps working.
Why it happens
1. A variable is missing in Production
Supabase, Firebase, Stripe and similar clients need a URL and key. If they are set in v0 but not in Vercel under Settings > Environment Variables for the Production environment, the client is created with undefined values and the first call throws.
2. Browser-only code runs during rendering
Reading window, document or localStorage at the top of a component works in a client-only preview but breaks when Next.js renders on the server and then hydrates. Hydration mismatches can also surface as this error.
3. Auth or data code assumes a value exists
A line like user.profile.name crashes when the session has not loaded yet, or when a real visitor has no profile row. In the preview you are usually signed in with complete test data, so the crash never shows.
How to fix it
- Open the failing page on the live URL, press Ctrl+Shift+I (Cmd+Option+I on a Mac), choose Console and reload. Copy the first red error in full, including the file and line it mentions.
- If the error mentions undefined, a URL, a key or a client such as supabaseUrl is required, open Vercel > your project > Settings > Environment Variables and confirm every variable the app uses is ticked for Production. Variables read in the browser must start with NEXT_PUBLIC_.
- After adding or changing a variable, redeploy. Existing deployments keep the values they were built with, so the fix does not apply until a new build runs.
- If the error mentions window, document, localStorage or hydration, move that code into a useEffect or behind a typeof window check so it only runs in the browser.
- For crashes after login, open Vercel > Logs (runtime logs) while reproducing the problem to see whether a server request failed first and left the page with empty data.
- Paste the exact console error into v0 with the prompt below, and ask for an app/error.tsx boundary so any future crash shows a message and a retry button.
Prompt to paste into v0
On the deployed site I get 'Application error: a client-side exception has occurred'. Here is the browser console error: [paste it]. Fix the cause. Guard any window, document or localStorage access so it only runs in the browser, handle the case where the user or their data is not loaded yet, add an app/error.tsx error boundary with a friendly message and a retry button, and list any environment variables that must be set for Production in Vercel.
How to check it's fixed
- Load the page signed out and signed in, in a private window, with the Console open. There should be no uncaught errors.
- Throw a test error temporarily or disconnect your network mid-load to confirm the error boundary shows a readable message instead of a blank page.
What a QAlaunch scan shows for this
- The full-page "Application error" screen captured in the desktop and phone screenshots.
- Uncaught JavaScript exceptions from the console, with the message text that points to the cause.
- Failed requests to your API or database host that leave components with nothing to render.
- It loads pages as a signed-out visitor only, so a crash that happens after login has to be checked by hand.
See exactly what a full report contains in the sample report.
Frequently asked questions
Why does it work in the v0 preview but not on my domain?
The preview has the variables you added in v0 and runs in a forgiving development mode. The deployed site uses the variables stored in Vercel for Production and a strict production build, so missing values and hydration problems only appear there.
Where do I find the real error message?
In the browser console of the live page, not in v0. Production builds shorten messages, so if you see a minified React error with a link, open the link: it expands the code into a readable sentence.
Is an error boundary a fix?
No, it is a safety net. It stops a crash from blanking the whole page, but you still need to fix the code or setting that throws the error in the first place.
Rather have a QA engineer test it by hand?
If this is a site you're launching or handing to a client, I'll go through it by hand, including the v0-specific issues a scan can't reach, like logged-in flows.
- Up to 10 key pages tested by hand, not a scan
- Every flow a customer uses: forms, sign-up, checkout, booking
- Real mobile and desktop browsers
- A written report in plain language, with screenshots
- A 15-minute call to walk you through it
- 10 years of professional QA experience
Tell me about your site and I'll reply personally, usually the same day.
No payment now. I'll confirm scope and price first.
Related fixes
More for v0: all v0 fixes · v0 testing
Written by Waqas Ahmad, QA engineer with 10 years of professional testing experience. Last checked October 26, 2026.
Sources: Vercel Community: client-side exceptions in v0 projects after deployment · Vercel Community: application error, a client-side exception has occurred · Vercel Community: missing environment variables in v0