Error Handling and Debugging in JavaScript in 15 Min

When developing JavaScript applications, encountering errors is inevitable. Understanding how to handle these errors effectively can significantly improve code reliability and performance. In this module, we will explore common JavaScript errors, how to use try, catch, and finally for error handling, and how to debug code using browser developer tools.

Understanding Common JavaScript Errors

JavaScript errors typically fall into three main categories:

1. Syntax Errors – These occur when the JavaScript engine encounters invalid code syntax.
   • Example:console.log("Hello World") `` // Missing closing parenthesis or quote will cause a syntax error.
2. Reference Errors – These occur when a variable or function is used before it has been declared.
   • Example:console.log(myVariable); // ReferenceError: myVariable is not defined
3. Type Errors – These occur when an operation is performed on a value of the wrong type.
   • Example:let num = 10; num.toUpperCase(); // TypeError: num.toUpperCase is not a function

Try, Catch, and Finally

The try...catch statement is a powerful mechanism in JavaScript to handle runtime errors and prevent program crashes.

Syntax:

try {
    // Code that may cause an error
} catch (error) {
    // Handle the error
} finally {
    // Code that runs regardless of error occurrence
}

Example:

try {
    let user = JSON.parse('{"name":"John"'); // Missing closing brace
} catch (error) {
    console.error("An error occurred: ", error.message);
} finally {
    console.log("Execution completed");
}

Throwing Custom Errors

JavaScript allows us to create and throw custom errors using the throw statement.

function checkAge(age) {
    if (age < 18) {
        throw new Error("You must be at least 18 years old.");
    }
    return "Access granted";
}

try {
    console.log(checkAge(16));
} catch (error) {
    console.error(error.message);
}

Debugging Using Browser Developer Tools

Modern web browsers provide developer tools that help in debugging JavaScript code.

1. Using the Console

The console (console.log, console.error, console.warn) helps debug values and errors in the browser.

console.log("Debugging message");
console.warn("Warning message");
console.error("Error message");

2. Setting Breakpoints

• Open Chrome Developer Tools (F12 or Ctrl+Shift+I on Windows/Linux, Cmd+Option+I on Mac).
• Go to the “Sources” tab.
• Click on the line number in the script to set a breakpoint.
• Reload the page and watch execution stop at the breakpoint.

3. Using the Debugger Statement

The debugger statement pauses script execution like a breakpoint.

let x = 10;
debugger;
x += 5;
console.log(x);

4. Monitoring Network Requests

The “Network” tab in Developer Tools helps track API requests and responses for debugging AJAX calls.

• Mastering JavaScript Arrays and Objects: A Complete Guide
• ES6+ Features: A Comprehensive Guide to Modern JavaScript

Conclusion

Understanding and handling JavaScript errors effectively ensures a smoother development experience. By using try...catch, custom error handling, and browser debugging tools, developers can efficiently debug and enhance the reliability of their applications. Keep practicing debugging techniques to master JavaScript error handling!