Reading an Error Message

Error messages look intimidating at first, with their red text and strange words. But once you know how to read them, they're incredibly helpful. They tell you what went wrong and where.

Here's a typical error you might see in the browser console:

Uncaught TypeError: Cannot read properties of undefined (reading 'toUpperCase')
    at formatName (script.js:3:22)
    at greetUser (script.js:8:15)
    at script.js:12:1

Let's decode it, line by line:

1. TypeError is the type of error. We know it's a "wrong type of value" problem.
2. Cannot read properties of undefined (reading 'toUpperCase') is the message. Something was undefined, and we tried to read toUpperCase from it.
3. at formatName (script.js:3:22) is where it happened: inside the function formatName, in the file script.js, on line 3, at character 22.
4. The lines below are the stack trace: the trail of function calls that led to the error. Read it from the bottom up: the main script (line 12) called greetUser, which (on line 8) called formatName, which crashed on line 3.

So now we know exactly where to look: line 3 of script.js. Something there was undefined. And the stack trace tells us it was called from greetUser on line 8, so maybe greetUser passed in the wrong thing.

The error-reading routine

Whenever you see an error, follow these steps:

1. Don't panic. Take a breath. It's just a clue.
2. Read the error type. Syntax? Reference? Type? That narrows things down a lot.
3. Read the message carefully. Every word matters. "is not defined" and "is not a function" mean very different things.
4. Go to the line number. Look at that line, and the lines just before it.
5. Ask "why?" Why is that value undefined? Where did it come from? Follow the trail backwards.
6. Still stuck? Search for it. Copy the error message (minus your own variable names) into a search engine. You are almost certainly not the first person to see it.