Debug: Web application shows blank page with no errors

Web application loads but shows a blank white page with no visible errors in the console.

Debug blank page issues:

# 1. Check browser console (might be filtered)
# Open DevTools > Console
# Set level filter to "All" or "Verbose"
# Check for: errors, warnings, failed resource loads

# 2. Check Network tab
# Look for:
# - Failed requests (red)
# - Missing JavaScript bundles (404)
# - CORS errors on API calls
# - Slow-loading resources blocking render

# 3. Check Elements tab
# Is the root element empty?
# <div id="root"></div>  <- Empty = JS failed to mount
# <div id="root"><div>...</div></div>  <- Mounted but invisible?

Common causes:

// CAUSE 1: JavaScript error before render
// Error in top-level code prevents React.render()
// Check: Console errors, especially in main entry file

// CAUSE 2: Wrong publicPath / base URL
// Built assets reference wrong path
// Check: Are JS/CSS files loading? (Network tab)
// Fix: Set correct publicPath in webpack/vite config
// Fix: Check <base> tag in HTML

// CAUSE 3: Environment variable missing
// API_URL is undefined -> first API call fails -> blank page
// Check: console.log(process.env) in code

// CAUSE 4: Router configuration
// SPA deployed to subpath but router expects root
// Fix: Set basename in React Router
// <BrowserRouter basename="/myapp">

// CAUSE 5: CSS hiding everything
// display: none, visibility: hidden, opacity: 0
// height: 0, overflow: hidden on container
// Check: Elements tab -> Computed styles

// CAUSE 6: React error boundary catching errors silently
// If error boundary renders null on error
// Fix: Add visible error UI in error boundary

// CAUSE 7: Content Security Policy blocking scripts
// Check console for CSP violations
// Headers: Content-Security-Policy

// CAUSE 8: Server returns HTML for all routes (SPA)
// But server returns 404 page instead of index.html
// Fix: Configure server to serve index.html for all routes

Quick diagnostic:

// Add to index.html before app scripts:
<script>console.log('HTML loaded'); document.body.style.background='red';</script>
// If page turns red: JS bundle is the problem
// If page stays white: HTML isn't loading or CSP blocks inline scripts

Blank pages usually mean JavaScript failed before rendering anything. The error might be caught by an error boundary, filtered in console, or happen during import/initialization.

Web application debugging