Errors & Debugging

Collected from the modules so far and from a decade of Stack Overflow. Each card is the real message, the reason, and the fix. Read them once now; you will recognise them for the rest of your career. The first four account for most of the total.

const res = { data: null }
console.log(res.data.items.length)

Uncaught TypeError: Cannot read properties of null (reading 'items')
    at your code:2

const user = { name: "Ada" }
user.getName()
const items = "a,b"
items.map(x => x)

Uncaught TypeError: user.getName is not a function
    at your code:2

function total(items) { return items.reduce((s, i) => s + i.price, 0) }
console.log(totl(cart))

Uncaught ReferenceError: totl is not defined
    at your code:2

const config = {
  port: 3000
  host: "localhost",
}

SyntaxError: Unexpected token ':'   (or: missing ) after argument list / Unexpected end of input)

const count = 0
count++

Uncaught TypeError: Assignment to constant variable.
    at your code:2

console.log(api)
const api = createApi()

Uncaught ReferenceError: Cannot access 'api' before initialization
    at your code:1

function getParent(node) { return getParent(node.parent) }
getParent(leaf)

Uncaught RangeError: Maximum call stack size exceeded
    at getParent (your code:1)
    at getParent (your code:1)

fetchUser(id).then(user => render(user))
// fetchUser rejects; no .catch, no await in a try

Uncaught (in promise) Error: HTTP 500
    at fetchUser (api.js:12)

async function load() { return await api.get("/x") }
const data = load()
console.log(data.items)

undefined     // and console.log(data) shows Promise { <pending> }

import fs from "node:fs"

SyntaxError: Cannot use import statement outside a module

import { slug } from "./utils"

Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/app/src/utils' imported from /app/src/index.js

fetch("https://api.other.com/data")   // from https://myapp.com

Access to fetch at 'https://api.other.com/data' from origin 'https://myapp.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

console.log([1, 2, 10].sort())
console.log(0.1 + 0.2 === 0.3, (0.1 + 0.2).toFixed(2))

[ 1, 10, 2 ]
false 0.30

const a = { name: "a" }
a.self = a
JSON.stringify(a)

Uncaught TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'Object'
    --- property 'self' closes the circle

// React
items.map(item => <li>{item.name}</li>)
if (open) { const [x, setX] = useState() }

Warning: Each child in a list should have a unique "key" prop.
Error: Rendered more hooks than during the previous render.

A breakpoint pauses the program at a line so you can inspect every variable in scope, step line by line, and watch values change — the thing console.log approximates badly. Browser: DevTools → Sources → click a line number, or write debugger in the code. Node: node --inspect-brk app.js and open chrome://inspect, or use VS Code's Run and Debug (F5) with a launch.json.

function reconcile(orders, payments) {
  const byId = new Map(payments.map(p => [p.orderId, p]))
  const unpaid = []
  for (const order of orders) {
    const payment = byId.get(order.id)
    debugger                                   // pauses here when DevTools is open
    if (!payment || payment.amount < order.total) unpaid.push(order)
  }
  return unpaid
}

// While paused, in the console you can run any expression in the current scope:
//   byId.size          → how many payments matched
//   order              → the current order
//   payment?.amount    → is it undefined? that is your bug
// Step over (F10) runs the line; step into (F11) enters a call; resume (F8) continues.
// A CONDITIONAL breakpoint (right-click the line) pauses only when e.g. `order.id === 42`.
// A LOGPOINT prints without pausing — console.log you do not have to remove.

1. 1
   Reproduce

   Find the smallest input that fails. If you cannot reproduce it, you cannot know you fixed it.

2. 2
   Locate

   Read the stack trace to the first frame in your code. Put a breakpoint there or one frame above.

3. 3
   Inspect

   When paused: Scope panel for every variable, Watch for expressions, Call Stack to jump to callers. Hover a variable in the source to see its value.

4. 4
   Hypothesise and test

   "payment is undefined because orderId is a string but order.id is a number." Test it in the console: typeof payments[0].orderId. Then fix it. Then write the test that would have caught it.

Most errors you meet after week one come from code you did not write: the top of the stack is inside node_modules. The skill is to find your frame and the contract you broke. Libraries increasingly include the fix in the message — read the whole thing, including the link.

The code is the same; the environment is not. JavaScript has more environments than most languages — Node versions, browsers, bundlers, OS file systems, time zones — so this happens often. Work down the list; it is almost always one of these.

1. Node version. node --version here and there. Pin it in package.json engines and .nvmrc; use the same major in CI and Docker.
2. Dependencies. Did they run npm ci (lockfile) or npm install (drift)? Is package-lock.json committed? Same package manager?
3. Environment variables. .env is not committed (good) — so it is missing on the server. process.env.X is undefined, and undefined becomes the string "undefined" in a URL.
4. Case-sensitive paths. import "./Utils" works on macOS and Windows, fails on Linux (CI, Docker, servers).
5. Time zone and locale. new Date("2026-09-20").getDate(), toLocaleString(), sort order of strings — all depend on the machine. Servers run in UTC.
6. Browser. Which browser, which version, extensions (ad blockers break fetch), private mode (localStorage throws), mobile Safari (many differences).
7. Build vs dev. Vite/Next dev mode is not the production bundle: tree-shaking, minification, NODE_ENV, and hydration differ. Run the production build locally before saying it works.
8. Data. Your local database has three rows; production has three million and one with a null in a column you assumed was set.