Why Does My App Show a Blank Error Page? How to Show Users a Friendly Message Instead.
You built an app with Claude, ChatGPT, Bolt, or Lovable and at some point something went wrong and your users saw a blank white page, a technical error message…
You built an app with Claude, ChatGPT, Bolt, or Lovable and at some point something went wrong and your users saw a blank white page, a technical error message full of stack trace text, or a generic “500 Internal Server Error” with no explanation. This is one of the worst user experiences in software. It is also one of the most fixable. Here is why it happens and exactly how to show users a helpful, friendly message when things go wrong instead.
Why Apps Show Blank Pages and Technical Errors
When your app encounters an unhandled error, it does not know what to show the user. Without instructions for what to do when something breaks, it either shows nothing, shows the raw error message from the code, or crashes the entire page.
These technical error messages were designed for developers to read during debugging, not for users to see in production. Showing a stack trace to a user tells them nothing useful and makes your app look broken and unprofessional.
The fix is error handling: code that catches errors before they reach the user and shows something human-readable instead.
Two Types of Errors to Handle
Frontend errors happen in the code running in the user’s browser. A JavaScript error can cause the entire page to go blank because the code stopped running. In React-based apps, this is particularly common because a single component error can take down the whole page.
Backend errors happen on your server. The backend code encounters a problem, the server returns an error response (like a 500 status code), and the frontend does not know what to show because it expected data and got an error instead.
Both need to be handled, and they are handled differently.
Fixing Frontend Errors: Error Boundaries
In React apps, the tool for catching frontend errors is called an Error Boundary. It is a component that wraps other components and catches errors before they crash the page. When an error occurs inside an Error Boundary, it shows a fallback UI instead of a blank page.
Ask your AI: “Can you add an Error Boundary to my React app so that when a component crashes, users see a friendly message instead of a blank page? The message should say [describe what you want to show, e.g. ‘Something went wrong. Please refresh the page.’]”
For non-React apps, similar concepts exist. Ask your AI: “How do I add global error handling to my [framework] app so unhandled errors show a friendly page instead of a blank screen?”
Fixing Backend Errors: Error Responses
When your backend code fails, it should return a structured error response rather than crashing. In Python Flask, FastAPI, and similar frameworks, this means adding try/except blocks around code that might fail and returning a helpful error message.
Ask your AI: “Can you add proper error handling to my backend API so that when something goes wrong, it returns a structured error response with a user-friendly message rather than crashing or returning a raw exception?”
Creating a Custom Error Page
For 404 errors (page not found) and 500 errors (server error), most frameworks and hosting platforms let you define custom error pages.
Vercel: add a custom 404 page by creating a 404.tsx or 404.js file in your pages directory. For other error pages, check Vercel’s documentation on custom error pages.
Netlify: add a custom 404 page by including a 404.html file in your published directory.
Ask your AI: “Can you create a custom 404 page for my app on [Vercel/Netlify] that shows a friendly message and a button to return to the homepage?”
What a Good Error Message Looks Like
A good user-facing error message:
- Acknowledges that something went wrong without technical detail
- Tells the user what they can do next (refresh, go back, contact support)
- Does not show stack traces, error codes, or technical information
- Matches the look and feel of the rest of your app
A bad error message: “TypeError: Cannot read property ‘user’ of undefined at Object.getServerSideProps”
A good error message: “Something went wrong. Please refresh the page. If the problem continues, contact us at support@yourapp.com.”
The One Thing to Remember
Blank pages and technical error messages appear when your app encounters an error it does not know how to handle. Add error boundaries to your frontend to catch crashes before they blank the page. Add try/except error handling to your backend to return helpful responses instead of crashing. Create custom error pages for 404 and 500 errors. Ask your AI to implement each of these and describe what message you want users to see.
Want your app handling errors gracefully in production? → Snapdock
New here? These might help: What are logs? How to read them when your app breaks. → “Build Failed.” What it means and how to fix it. →