Reading error messages

Errors are clues, not insults

Every developer sees red error text. Beginners often read it as “you failed.” Professionals read it as evidence: what kind of problem happened, the best guess at where it happened, and the chain of function calls that led there.

An error report usually has three useful parts:

• The name, like TypeError or ReferenceError. This is the category of mistake.
• The message, like Cannot read properties of undefined. This describes the operation that failed. Messages vary between browsers and runtimes.
• The stack trace, a breadcrumb trail of function calls, newest first. It helps you jump to the line that actually threw, then trace back to the caller that passed bad data.

This lesson builds on strict mode’s idea that mistakes should be loud, and on the console tools you met earlier. The next lesson, Debugging in the browser, will show breakpoints, stepping, and watches. Here we learn the skill that comes first: understanding what the error already says.

The three errors you will meet constantly are about grammar, names, and values.

Think of these as different questions: “Can JavaScript read this?”, “Does this name exist?”, and “Can this value do that?” Run the lab below. It catches each thrown error only so the page can show you error.name and error.message. The lesson on try, catch, and finally comes later; for now, treat catch as a safe display case around a thrown error.

1const demos = {2  reference() {3    console.log(total);4  },5  type() {6    const user = undefined;7    return user.name;8  },9  range() {10    return new Array(-1);11  },12  uri() {13    return decodeURIComponent("%");14  },15  syntaxAtRuntime() {16    return JSON.parse("{bad json}");17  },18  evalCompatibility() {19    throw new EvalError("EvalError still exists");20  },21};22 23function inspectError(runDemo) {24  try {25    runDemo();26  } catch (error) {27    return {28      name: error.name,29      message: error.message,30    };31  }32}

Notice that the name is stable and useful. The message is also useful, but not universal. Chrome and Node often say Cannot read properties of undefined (reading 'name'). Firefox phrases some messages differently. When a test or article relies on an exact message, it should say which engine it describes.

The next three are less common, but they explain many scary-looking messages.

• RangeError means a number is outside the allowed range. new Array(-1) cannot create an array with a negative length. In Chrome and Node, (1).toFixed(101) says toFixed() digits argument must be between 0 and 100.
• URIError comes from URI encoding and decoding. A percent sign starts an encoded byte, so decodeURIComponent("%") throws URI malformed.
• EvalError is mostly historical. Modern JavaScript no longer throws it for ordinary code. It exists for compatibility, and you can still create one with new EvalError("message").

Sort these real messages by error family. A few messages come from JSON or built-in methods rather than source-code parsing, which is why reading the surrounding line matters.

A stack trace is a receipt for function calls. It lists what was running when the error happened, with the newest call first. The top frame usually answers “where did it throw?” Lower frames answer “who called this?”

Step through this tiny checkout bug. The order has a total, but no discount object. Watch the “Running in” context grow as each function calls the next.

1function placeOrder(order) {2  return calculateTotal(order);3}4 5function calculateTotal(order) {6  return applyDiscount(order.total, order.discount);7}8 9function applyDiscount(total, discount) {10  return total * (1 - discount.rate);11}12 13placeOrder({ total: 40 });Run

Now compare that guided replay to a real error.stack string from your browser. The exact text can differ, but the strategy stays the same: read the message, find the top frame in your code, and then inspect the value the line assumed.

1function placeOrder(order) {2  return calculateTotal(order);3}4 5function calculateTotal(order) {6  return applyDiscount(order.total, order.discount);7}8 9function applyDiscount(total, discount) {10  return total * (1 - discount.rate);11}12 13placeOrder({ total: 40 });

TypeError: Cannot read properties of undefined (reading 'rate')
    at applyDiscount (cart.js:10:32)
    at calculateTotal (cart.js:6:10)
    at placeOrder (cart.js:2:10)
    at cart.js:13:1

Here is the same idea in a clearly labeled V8-style example. Chrome and Node use this shape. Firefox often writes frames like applyDiscount@cart.js:10:32 instead.

1TypeError: Cannot read properties of undefined (reading 'rate')2    at applyDiscount (cart.js:10:32)3    at calculateTotal (cart.js:6:10)4    at placeOrder (cart.js:2:10)5    at cart.js:13:1

Search engines are useful only when your query is clean. Error messages often include your variable names, file names, and data. Keep the reusable phrase; remove your app’s private names.

1const account = undefined;2console.log(account.profile.name);

A good first query is "Cannot read properties of undefined". After you understand the category, come back to your code and ask the real debugging question: “Why is this value undefined here?”

Where you’ll use this

Error reading is a daily skill. When a page refuses to load, a button does nothing, or a test fails, the fastest path is usually:

1. Open the console and find the first error after the action you just took.
2. Read the name and message before changing code.
3. Jump to the first stack frame in your file, not a browser extension or library bundle.
4. Inspect the values on that line. Is a name misspelled? Is a property missing? Is a number out of range?
5. If you still do not know, search the reusable phrase and create a smaller reproduction.

Common misconceptions

These questions mix concepts with tiny programs. Every wrong answer explains the trap, so use the feedback as part of the lesson.

Key takeaways

• Read the error name, then the message, then the stack trace.
• SyntaxError is grammar, ReferenceError is a missing name, and TypeError is a real value used the wrong way.
• RangeError means an argument is outside an allowed range; URIError means malformed URI text; EvalError mostly exists for compatibility.
• Stack traces are newest first. Find the first frame in your code and inspect the value on that line.
• Search exact reusable phrases in quotes, then check MDN or the docs for the function in the top frame.

Up next: Debugging in the browser.

1console.log(total);2const user = undefined;3user.name;