Error Handling and Debugging

Error Handling and Debugging in JavaScript

Building flawless applications is nearly impossible. Bugs, exceptions, and unexpected behavior are common in software development. That’s why error handling and debugging are essential skills for every JavaScript developer.

Why Error Handling Matters

• Prevents apps from crashing unexpectedly
• Helps identify the cause of bugs faster
• Enhances user experience by gracefully managing issues

Types of Errors in JavaScript

1. Syntax Errors: Mistakes in the code structure (e.g., missing brackets or typos).
2. Runtime Errors: Occur when the code is running (e.g., accessing an undefined variable).
3. Logical Errors: Code runs without crashing but gives incorrect results.

Handling Errors with try...catch

JavaScript provides try...catch blocks to handle exceptions:

try {
  let result = riskyFunction();
  console.log(result);
} catch (error) {
  console.error("Something went wrong:", error.message);
}

• try: Contains the code that may throw an error.
• catch: Executes if an error occurs.
• Optional: Use finally to run code regardless of the outcome.

try {
  // risky code
} catch (err) {
  // handle error
} finally {
  // always runs
}

Throwing Custom Errors

You can create and throw your own errors using throw:

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

Debugging Tools and Techniques

1. Console Logging

Use console.log(), console.warn(), and console.error() to output variable values and messages.

2. Browser Developer Tools

• Inspect Element: Examine HTML/CSS.
• Console: View errors and logs.
• Sources Tab: Set breakpoints, step through code line by line.

3. Breakpoints

Set breakpoints in browser dev tools to pause execution and inspect the state of your application.

4. Debugger Keyword

Use the debugger statement to halt code execution:

function test() {
  let x = 10;
  debugger;
  let y = x + 5;
  return y;
}

Best Practices

• Always use try...catch around risky operations (e.g., JSON parsing, network requests).
• Use meaningful error messages to make debugging easier.
• Don’t silently ignore errors.
• Use logging libraries for advanced error tracking (e.g., Sentry, LogRocket).

Real Example

async function fetchUserData() {
  try {
    const response = await fetch('https://api.example.com/user');
    if (!response.ok) throw new Error('Server error');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error("Fetch failed:", error.message);
  } finally {
    console.log("Operation finished");
  }
}

Summary

Error handling and debugging are essential for writing stable, user-friendly applications. With try...catch, custom errors, and developer tools, JavaScript gives you everything you need to write, track, and fix code effectively.