Read JavaScript Console Errors and Fix Them Fast

Error messages are not scary. They are the program telling you exactly where to look. Here is how to read one.

code

TEXT

1
2
3

Uncaught TypeError: Cannot read properties of undefined (reading 'name')
    at showUser (app.js:12:20)
    at HTMLButtonElement.<anonymous> (app.js:25:5)

The parts

Uncaught: nothing handled this error.
TypeError: the kind of error (error types).
The message: what went wrong. Here: you tried to read .name of something that is undefined.
The stack trace: the chain of function calls that led to it, most recent first. app.js:12:20 means file app.js, line 12, column 20.

Start with the first line of the stack that is in your own file, and click it. The console jumps to the code.

Try it

script.js

1
2

const user = undefined;
console.log(user.name);   // error on purpose

Run it. The Try it console shows the message and the line. In a real browser console you also get the stack trace and a link to the exact line.

Common messages and what they mean

Message	Usual cause and fix
`x is not defined`	typo, or the variable is out of scope. Check the spelling and where it is declared.
`Cannot read properties of undefined (reading 'y')`	the thing before `.y` is `undefined`. Print it to see why, or use `?.`.
`Cannot read properties of null`	`querySelector` found nothing. Check the selector and when the script runs.
`x is not a function`	wrong name, wrong object, or something overwrote it. Check what `x` really is.
`Assignment to constant variable`	you reassigned a `const`. Use `let`, or do not reassign.
`Unexpected token`	a typo in syntax, or JSON that is really HTML.
`Cannot access 'x' before initialization`	using a `let` or `const` before its line.
`Maximum call stack size exceeded`	a function keeps calling itself (missing base case).
`Failed to fetch`	network failure, wrong URL or blocked by CORS.
`Uncaught (in promise) ...`	a rejected promise nobody handled. Add `catch` or `try...catch`.

A debugging routine

Read the message and the error type.
Go to the line in the stack.
Print what is there: console.log(value, typeof value).
Work backwards: where did that value come from?
Fix one thing, reload, and read the new message.

Warnings and other messages

Yellow warnings are not errors but are worth reading.
Network errors (red lines in the Network tab or the console) mean a request failed. Check the URL and the response.
Source maps: bundled code may show unreadable names. Developer tools can map them back to your original files.

The golden rule

Fix the first error. Many later errors are caused by it, and disappear once it is fixed.

lightbulb

Search smartly

If a message is new to you, search for the exact message text without your own variable names, plus “JavaScript”. Someone has almost certainly seen it before.