nonobie — Real dev skills, explained like a friend would

Warming up the neural circuits...

Why Error Handling Matters

Errors are inevitable. Servers go down, networks timeout, users enter invalid data. Error handling is not about preventing errors — it's about recovering gracefully when they happen.

Without error handling:

plaintext

❌ App crashes, blank page, user confused
❌ Data lost, user frustrated
❌ Hard to debug ("it worked on my machine")

With error handling:

plaintext

✅ User sees a friendly message
✅ App continues working
✅ Developer gets useful debug info

JavaScript Error Types

javascript

// SyntaxError — You wrote invalid JS
// const x = ;        // SyntaxError: Unexpected token
 
// ReferenceError — Variable doesn't exist
console.log(nonExistentVar); // ReferenceError: nonExistentVar is not defined
 
// TypeError — Wrong type used
const num = 5;
num.toUpperCase(); // TypeError: num.toUpperCase is not a function
 
// RangeError — Value out of range
const arr = new Array(-1); // RangeError: Invalid array length
 
// URIError — Invalid URI
decodeURI("%"); // URIError: URI malformed
 
// EvalError — eval() issues (rare)
 
// Custom errors — You create these
throw new Error("Something went wrong");

Try/Catch/Finally

javascript

try {
  // Code that might throw an error
  const data = JSON.parse(userInput);
  processData(data);
} catch (error) {
  // Runs if an error was thrown in try block
  console.error("Error:

The Error Object

javascript

try {
  throw new Error("Custom error message");
} catch (error) {
  console.log(error.name);    // "Error"
  console.log(error.message

Throwing Errors

You can throw errors to signal that something is wrong:

javascript

function divide(a, b) {
  if (b === 0) {
    throw new Error("Division by zero is not allowed");
  }
  if (typeof a !== "number" || typeof b !== "number

Custom Error Classes

javascript

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

Async Error Handling

With Promises

javascript

fetch("/api/data")
  .then(response => {
    if (!response.ok) throw new Error(`HTTP ${response.status}`);
    return response.json();

With Async/Await

javascript

async function loadData() {
  try {
    const response = await fetch("/api/data");
    
    if (!response.ok) {
      throw new Error(`Server error: ${response.status}`

Debugging with DevTools

console Methods

javascript

console.log("Basic log");           // Regular message
console.info("Info message");        // Info (blue icon)
console.warn("Warning!");            // Warning (yellow)
console.

Breakpoints (Sources Tab)

Open DevTools (F12) → Sources tab
Click line number to add a breakpoint (blue arrow)
Refresh the page — execution pauses at that line
Use controls:
- ▶️ Resume (F8) — continue execution
- ⏭️ Step over (F10) — go to next line
- ⏬ Step into (F11) — go into a function call
- ⏫ Step out (Shift+F11) — exit current function
Hover over variables to see their values
Use Watch panel to track expressions
Use Call to see how you got there

Error Handling Patterns

Pattern 1: Guard Clauses

javascript

function getUser(id) {
  if (!id) {
    throw new Error("User ID is required");
  }
  if (typeof id !== "number") {
    throw new TypeError("User ID must be a number"

Pattern 2: Try/Catch Wrapper

javascript

async function safeAsync(asyncFn) {
  try {
    const result = await asyncFn();
    return { data: result, error: null };
  } catch (error) {
    return { data: null, error:

Pattern 3: Global Error Handler

javascript

// Catch unhandled errors
window.addEventListener("error", (event) => {
  console.error("Global error:", event.error);
  // Send to error tracking service (Sentry, etc.)
});
 
//

Common Mistakes

Mistake 1: Catching but not handling

javascript

// ❌ Wrong (swallows error — no visibility!)
try { riskyOperation(); } catch (e) {}
 
// ✅ Right (at least log it)
try { riskyOperation(); } catch (e) { console.error(e); }

Mistake 2: Not re-throwing when needed

javascript

// ❌ Wrong (caller doesn't know it failed)
async function load() {
  try { return await fetchData(); } catch (e) { console.error(e); }
}
 
// ✅ Right (caller can handle too)
async function load() {

Mistake 3: Catching too broadly

javascript

// ❌ Wrong (catches everything, including expected errors)
try { /* everything */ } catch (e) { showError(e); }
 
// ✅ Right (handle specific errors specifically)
try { /* operation */ } catch (e)

What You've Learned

✅ Error types: SyntaxError, ReferenceError, TypeError, RangeError
✅ try/catch/finally for error handling
✅ throw and custom error classes
✅ error handling with Promises and async/await
✅ Debugging with console methods and breakpoints
✅ Error handling patterns: guard clauses, wrappers, global handlers

What's Next?

Chapter 15: Modules & Tooling — ES modules, npm, bundlers, project setup
Chapter 16+: React — building component-based UIs

Error Handling & Debugging

Why Error Handling Matters

JavaScript Error Types

Try/Catch/Finally

The Error Object

Throwing Errors

Custom Error Classes

Async Error Handling

With Promises

With Async/Await

Debugging with DevTools

console Methods

Breakpoints (Sources Tab)

Error Handling Patterns

Pattern 1: Guard Clauses

Pattern 2: Try/Catch Wrapper

Pattern 3: Global Error Handler

Common Mistakes

What You've Learned

What's Next?