Frontend Errors

How to find and fix browser console errors, React errors, and white screens.

What Are Frontend Errors?

Frontend errors happen in the browser. You might see:

  • A completely white or blank page
  • A React error boundary message ("Something went wrong")
  • Things silently breaking (buttons not working, forms not submitting)

The key tool for finding frontend errors is the browser Developer Console.

How to Open the Browser Console

Keyboard shortcutstext
Chrome / Edge:
  Windows: F12 or Ctrl + Shift + J
  Mac: Cmd + Option + J

Safari:
  1. Safari > Settings > Advanced > Check 'Show Develop menu'
  2. Cmd + Option + C

When you open the console, look for red text — these are errors.

Reading Console Errors

A console error has three key pieces of information:

Anatomy of a console errortext
Uncaught TypeError: Cannot read properties of undefined (reading 'map')
    at DashboardPage (app/dashboard/page.tsx:24:18)
    ^^^^^^^^^^^^^^   ^^^^^^^^^^^^^^^^^^^^^^^^  ^^^^^
    Error type       File location              Line number

You do not need to understand what the error means. Just copy the entire red text and give it to Claude.

Common Frontend Error Types

ErrorWhat It MeansCommon Cause
TypeError: Cannot read properties of undefinedAccessing data that does not exist yetData has not loaded, or API returned null
Unhandled Runtime ErrorReact component crashedA bug in a component's render logic
Hydration errorServer HTML does not match client HTMLUsing browser-only APIs or random values during render
404 on API routeAPI endpoint not foundWrong URL path or missing API file

White Screen of Death

If your app shows a completely blank white page:

  1. Open the browser console (see shortcuts above)
  2. Look for red error messages
  3. Copy the entire error text
  4. Give it to Claude
Report a white screen error
Claude prompt
my-app-name: The app shows a white screen. Here is the error from the browser console: [Paste the full error message from the console] Please fix this error.

React Hydration Errors

Hydration errors happen when the server-rendered HTML does not match what React expects in the browser. The page might flicker or show a warning in the console.

Report a hydration error
Claude prompt
my-app-name: The console shows this warning: "Hydration failed because the initial UI does not match what was rendered on the server." The page flickers when it first loads. Can you find and fix the hydration mismatch?

Giving Errors to Claude

When reporting a frontend error, always include:

  1. The full error message — copy all red text from the console
  2. What you were doing — which page, what action triggered it
  3. What you expected — what should have happened instead
Report a frontend error
Claude prompt
my-app-name: I see this error in the browser console when I visit the dashboard page: [Paste the full error message] The page should show a list of items but instead I see a white screen. Please fix this error.

Quiz

Quiz

Your app shows a completely white/blank page. What should you do first?