1.4 Reading Error Messages

Time: ~30 minutes

What You'll Learn

• The anatomy of an error message
• How to read a stack trace
• Five real error scenarios and how to debug them
• How to give errors to AI so it can actually help

Why Error Messages Matter

Most vibe coders see an error and do one of two things:

1. Copy the entire red wall of text and paste it to AI
2. Panic and start over

Neither is great. Error messages are actually your best friend. They're telling you exactly what went wrong and often exactly where. You just need to learn how to read them.

Anatomy of an Error

Every error message has three parts:

1. The Error Type

This tells you the category of the problem:

• SyntaxError -- Your code has a typo or structural mistake
• TypeError -- You're trying to do something with the wrong type of data
• ReferenceError -- You're using a variable that doesn't exist
• NetworkError / FetchError -- Something went wrong talking to a server
• ModuleNotFoundError -- A file or package can't be found

2. The Error Message

The human-readable explanation:

TypeError: Cannot read properties of undefined (reading 'map')

This is saying: "You tried to use .map() on something, but that something is undefined."

3. The Stack Trace

The trail of breadcrumbs showing where the error happened:

TypeError: Cannot read properties of undefined (reading 'map')
    at UserList (src/components/UserList.tsx:12:23)
    at renderWithHooks (node_modules/react-dom/...)
    at mountIndeterminateComponent (node_modules/react-dom/...)

The first line after the error is usually the most important -- it tells you the file and line number where things broke.

Five Real Error Scenarios

Scenario 1: "Cannot read properties of undefined"

TypeError: Cannot read properties of undefined (reading 'name')
    at Profile (src/components/Profile.tsx:8:22)

What happened: You're trying to access .name on something that doesn't exist yet. Common when data hasn't loaded from an API.

The fix: Add a check before accessing the property: user?.name or check if the data has loaded before rendering.

Scenario 2: "Module not found"

Module not found: Can't resolve './components/Header'
    at ./src/pages/index.tsx

What happened: You're importing a file that doesn't exist at that path. Either the file was moved, renamed, or the path is wrong.

The fix: Check the actual file name and path. Watch for case sensitivity (Header.tsx vs header.tsx).

Scenario 3: "Unexpected token"

SyntaxError: Unexpected token '<'
    at src/utils/helpers.js:1:1

What happened: The code has a structural mistake. Often means a missing bracket, an extra comma, or JSX in a file that doesn't support it.

The fix: Look at the file and line number. Check for missing closing brackets or tags.

Scenario 4: "CORS error"

Access to fetch at 'https://api.example.com/data' from origin
'http://localhost:3000' has been blocked by CORS policy

What happened: Your browser is blocking a request to a different domain for security reasons.

The fix: This is a server-side issue. The API needs to allow requests from your domain. In development, you often need a proxy or to configure CORS headers.

Scenario 5: "Hydration mismatch"

Warning: Text content did not match. Server: "Hello" Client: "World"

What happened: The server rendered one thing, but the browser rendered something different. Common in Next.js and similar frameworks.

The fix: Make sure your component renders the same content on the server and client. Avoid using window, localStorage, or random values during the initial render.

How to Give Errors to AI

When you paste an error to your AI, include three things:

1. The full error message (not just the first line)
2. The file where it happened (copy the relevant code)
3. What you were trying to do (context matters)

Good prompt:

I'm getting this error when I load the user profile page: TypeError: Cannot read properties of undefined (reading 'name') at Profile.tsx line 8. Here's my Profile component: [paste code] The user data comes from an API call in the parent component.

Bad prompt:

My app is broken, here's the error: [paste 50 lines of stack trace]

Practice

Open a project you're working on and deliberately cause an error:

1. Misspell an import path and read the error
2. Try to access a property on undefined and read the error
3. Remove a closing bracket and read the error

For each one, identify the error type, message, and the file/line from the stack trace.

Key Takeaways

• Error messages have three parts: type, message, and stack trace
• The first line of the error and first line of the stack trace are the most useful
• Most errors fall into predictable categories once you know the patterns
• Give AI the error, the code, and the context for the best fix

Next Up

Your code works, your files are organized, and you can read errors. But your app needs to talk to the internet. Time to learn about APIs.

Continue to 1.5 APIs & Data Flow