Error Handling & Debugging

Errors are not the end of the world — they are information. JavaScript gives you structured error types, try/catch for recovery, throw for enforcing rules, and browser dev tools powerful enough to find any bug. This chapter teaches both halves: surviving errors and hunting them.

What an error looks like

try {
  null.name;
} catch (err) {
  console.log(err.name);     // → TypeError
  console.log(err.message);  // → Cannot read properties of null
  console.log(err.stack);    // → call stack leading to the failing line
}

Uncaught errors stop the rest of that script's execution (later scripts still run) and appear in the console in red.

The common error types

try / catch / finally

function divide(a, b) {
  if (b === 0) throw new RangeError('Division by zero');
  return a / b;
}

try {
  console.log(divide(10, 2));    // → 5
  console.log(divide(10, 0));    // throws → jumps to catch
} catch (err) {
  console.error(`Failed: ${err.message}`);   // → Failed: Division by zero
} finally {
  console.log('always runs — cleanup here');  // even after catch/return
}

finally is where you close spinners, release locks or hide loading states — it runs whether things succeeded or not.

throw: your own errors

class ValidationError extends Error {
  constructor(field, message) {
    super(message);
    this.name = 'ValidationError';
    this.field = field;
  }
}

function setAge(n) {
  if (n < 0 || n > 150) throw new ValidationError('age', 'Age out of range');
  return n;
}

try { setAge(300); }
catch (e) {
  if (e instanceof ValidationError) showFieldError(e.field, e.message);
  else throw e;                        // unexpected errors: never swallow them
}

Custom errors carry context (field) so callers can react precisely. Rule: catch what you can handle; rethrow what you cannot.

Error handling in async code (preview)

// Promises: .catch or rejected promise in try/catch with await
fetch('/api/users')
  .then((r) => r.json())
  .catch((err) => console.error('network:', err));

async function load() {
  try {
    const res = await fetch('/api/users');
    const data = await res.json();
  } catch (err) {
    // handles both fetch failures AND json() failures
  }
}

Full coverage in Promises and Async/Await.

Debugging toolkit

console — more than log

console.log('plain');
console.warn('suspicious');
console.error('broken');
console.table(users);                        // grid view of arrays/objects
console.group('Checkout');
  console.log('step 1');
console.groupEnd();
console.time('loop');
// …work…
console.timeEnd('loop');                     // → loop: 3.2ms
console.assert(items.length > 0, 'cart empty');

Breakpoints (dev tools → Sources)

1. Click a line number in your script to set a breakpoint; run the code — execution pauses there.
2. Step over (F10), step into (F11), step out (Shift+F11).
3. Inspect the Scope panel: every local, closure and global variable at that instant.
4. Add a Conditional breakpoint (right-click) to stop only on the 47th iteration.
5. “Pause on uncaught exceptions” finds where a red error originates.

Other essential panels

• Network — did the request go? What status/body came back?
• Elements — is the DOM what you think it is? What CSS wins?
• Console utilities — $_ (last result), $0…$4 (selected node), $$('#id .x') (querySelectorAll shorthand).

A debugging method that works

1. Read the error line number — 80% of bugs end right there.
2. Reproduce reliably — if you cannot trigger it, you cannot fix it.
3. Bisect — comment out halves of the flow to isolate the failing stage.
4. Inspect actual vs expected — log the value one step earlier than you suspect.
5. Fix, then add a guard or test so it stays fixed.

Defensive habits

const city = order?.address?.city ?? 'Unknown';   // optional chaining + fallback
const items = Array.isArray(data.items) ? data.items : [];
const num = Number.isFinite(value) ? value : 0;

Common mistakes

• Empty catch {} — bugs vanish silently; at minimum console.error(err).
• Swallowing unexpected errors — catch specific ones; rethrow the rest.
• Debugging with alert() — blocking and destructive (changes focus); use console or breakpoints.
• Ignoring the first error — cascading failures follow the original; fix top-down.
• No error state in UI — if fetch fails and nothing tells the user, the app looks broken; always render failure states.

Practice checklist

1. Wrap risky JSON parsing in try/catch with a friendly fallback message.
2. Create a custom ApiError class with a status field and throw it on bad responses.
3. Set a breakpoint in a loop, inspect the scope at iteration 5, and find an off-by-one bug you plant on purpose.
4. Use console.table on an array of objects and compare it to plain log.

You can now read errors — next, understand the machinery that makes timing tricky: Asynchronous JavaScript & the Event Loop.