JavaScript Error Handling

Why Error Handling Matters

Errors happen! Maybe the user enters invalid data, a server is down, or a function receives the wrong input.

JavaScript provides try...catch blocks to handle errors gracefully instead of crashing the program.

Syntax: try...catch

try {
  // Code that might throw an error
} catch (error) {
  // Code to handle the error
}

Example:

try {
  let result = someUndefinedVariable + 10;
} catch (err) {
  console.log("Something went wrong:", err.message);
}

Output:

Something went wrong: someUndefinedVariable is not defined

Without try...catch, this error would stop the rest of your JavaScript from running!

The finally Block

finally always runs — whether there was an error or not.

try {
  console.log("Trying something risky");
} catch (err) {
  console.log("Error happened!");
} finally {
  console.log("Always runs!");
}

Use finally to clean up resources, close files/connections, or reset states.

The throw Keyword

You can throw custom errors manually using throw.

function divide(a, b) {
  if (b === 0) {
    throw new Error("Cannot divide by zero");
  }
  return a / b;
}

try {
  console.log(divide(10, 0));
} catch (err) {
  console.log("Caught:", err.message);
}

Built-in Error Types

Error Type	Description
`ReferenceError`	Variable not defined
`TypeError`	Wrong type or invalid operation
`SyntaxError`	Invalid JavaScript syntax
`RangeError`	Number out of allowable range
`EvalError`	Error in `eval()` function
`URIError`	Invalid URI functions like `decodeURI()`

Real-Life Use Case: Form Validation

function validateAge(age) {
  if (isNaN(age)) throw new Error("Age must be a number");
  if (age < 18) throw new Error("You must be at least 18");
  return true;
}
                              
try {
  validateAge("hello");
} catch (err) {
  console.log("Validation error:", err.message);
}

Nesting and Re-throwing Errors

You can catch an error, handle it partly, and re-throw it.

try {
  try {
    throw new Error("Original error");
  } catch (err) {
    console.log("Logging:", err.message);
    throw err; // Re-throwing
  }
} catch (e) {
  console.log("Final catch:", e.message);
}

Optional: Using try...catch with async/await

async function fetchData() {
  try {
    let res = await fetch("https://invalid-url.com");
    let data = await res.json();
  } catch (error) {
    console.log("Network or JSON error:", error.message);
  }
}

🧪 Practice Exercise:

Task:

Write a function that throws an error if the argument is not a string.
Use try...catch...finally to divide two numbers.
Validate a name field in a form — throw if it's empty.
Write a nested try...catch block and re-throw the error.
Handle a fetch() request error using try/catch.