Errors and Debugging

7 pages · ~5 min✓ Reviewed

Builds on Event Loop and Async. Next up: Modules and Tooling.

JavaScriptPage 1

Errors and Debugging Mental Model

1. Error objects and types

An Error carries name, message and stack
Any value can be thrown, but throw Error objects to get a stack trace

Type	Cause	Example
`SyntaxError`	Parse time, nothing runs	`let = ;`
`ReferenceError`	Undeclared variable	`foo`
`TypeError`	Wrong type, calling undefined	`undefined.x`
`RangeError`	Value out of range	`new Array(-1)`, infinite recursion
`URIError`	Bad URI function input	`decodeURI('%')`

2. Where errors go

throwruntime error
Call stackbubbles up
catchhandled
No catchscript or task dies, console

try/catch sees only synchronous throws and awaited rejections
A throw in setTimeout or an un-awaited promise skips it

javascript

try {
  setTimeout(() => { throw new Error('late'); }, 0);
} catch (e) {
  // never runs: the callback fires after try exits
}

the error escapes to the console

3. Debugging loop

1Reproduce
2Readmessage, stack top-down
3Isolatebreakpoint or log
4Fix
5Re-test

JavaScriptPage 2

try/catch/finally and Throwing Errors

1. try / catch / finally

try { risky() } catch (err) { handle(err) } finally { cleanup() }
finally runs on success, on throw, and even after return
catch { ... } is the optional binding: no error object needed
return in finally overrides the try/catch return and swallows a pending throw

javascript

function f() {
  try { return 'try'; }
  finally { console.log('cleanup'); }
}
console.log(f());

finally runs before the function returns

output

cleanup
try

2. Throwing and Rethrowing

	throw new Error('msg')

JavaScriptPage 3

Custom Errors and error.cause

1. Define a Custom Error

extends Error, then call super(msg, opts) first
Set this.name, or it prints as plain Error
Passing opts to super lets cause flow through

javascript

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

extra fields: this.field, this.status = 404

Check type: err instanceof ValidationError
Never match err.message strings
Handlers branch on fields like err.status, no parsing

2. Wrap with error.cause

JavaScriptPage 4

Unhandled Promise Rejections

1. When a Rejection Is Unhandled

Rejected promise with no .catch and no await in try/catch = unhandled
Browser: window.addEventListener('unhandledrejection', fn)
Node: process.on('unhandledRejection', fn)
Node 15+ kills the process by default; browsers only log it

2. How Errors Escape

async function always returns a promise: a throw becomes a rejection, never a sync throw
Missing await or return detaches the chain; outer try/catch misses it

javascript

async function save() {
  try { fetch('/api'); }   // no await: escapes
  catch (e) { /* never runs */ }
  try { await fetch('/api'); }
  catch (e) { report(e); }  // caught
}

await keeps the rejection inside try

JavaScriptPage 5

Console Methods, Breakpoints and DevTools

1. Console Methods

Method	Use
`log` / `info`	normal output
`warn`	warning, stack trace, own filter
`error`	error, stack trace, own filter
`table(arr)`	grid from array of objects
`dir(obj)`	object tree
`group` / `groupEnd`	indent related logs
`time('t')` / `timeEnd('t')`

JavaScriptPage 6

Source Maps and Debugging Cheat Sheet

1. What a Source Map Does

A .map file links minified output back to original source
Stack traces and breakpoints show your real files and lines
Enabled by a comment at the end of the bundle
Build tools emit it: sourcemap: true or webpack devtool

javascript

//# sourceMappingURL=app.js.map
// build: { sourcemap: true }
// webpack: devtool: 'source-map'

2. Production and Node

Topic	Rule
Production	Ship maps privately: upload to Sentry or use hidden source maps
Version

JavaScriptPage 7

Check yourself

What does this print, and in what order?

cleanup, then try
finally runs before the function actually returns

function f() {
  try { return 'try'; }
  finally { console.log('cleanup'); }
}
console.log(f());

Why is 'caught' never printed?

The callback runs after the try block has already exited
Put the try/catch inside the callback

try {
  setTimeout(() => { throw new Error('boom'); }, 0);
} catch (e) { console.log('caught'); }

What goes wrong here?

load() returns a rejected promise, so nothing throws synchronously
Result: unhandled rejection. Fix: await load() inside try

async function load() { throw new Error('x'); }
try { load(); } catch (e) { console.log('caught'); }

Stack	set at throw site	none
instanceof	works	breaks

	Promise.all	Promise.allSettled
On failure	rejects on first, ignores rest	never rejects
Result	array of values	`{status, value\|reason}` each

Action	Key
Resume	F8
Step over	F10
Step into	F11
Step out	Shift+F11

Topic	Remember
Error types	TypeError, ReferenceError, RangeError, SyntaxError
`finally`	Always runs
Chain	`new Error(msg, {cause})`
Custom errors	`instanceof`, not message text
Async	`await` inside `try`
Rejections	`unhandledrejection` listener
Console	`console.table/time/trace`
Pause	`debugger`; F8 resume, F10 over, F11 into

Errors and Debugging

Errors and Debugging Mental Model

1. Error objects and types

2. Where errors go

3. Debugging loop

try/catch/finally and Throwing Errors

1. try / catch / finally

2. Throwing and Rethrowing

Custom Errors and error.cause

1. Define a Custom Error

2. Wrap with error.cause

Unhandled Promise Rejections

1. When a Rejection Is Unhandled

2. How Errors Escape

Console Methods, Breakpoints and DevTools

1. Console Methods

Source Maps and Debugging Cheat Sheet

1. What a Source Map Does

2. Production and Node

Check yourself

3. What catch Can See

3. Global Handler

2. Breakpoints

3. While Paused

3. Cheat Sheet