learn2kode.in

Menu

JavaScript Tutorial

Menu

JavaScript Error Handling

What Is Error Handling in JavaScript?

JavaScript error handling is the process of detecting, managing, and responding to runtime errors so your application doesn’t crash or behave unexpectedly.
Instead of breaking the entire program, error handling allows you to gracefully handle mistakes and show meaningful messages to users or developers.

Types of Errors in JavaScript

1. Syntax Errors
Errors caused by incorrect JavaScript syntax.
Copy Text 
console.log("Hello"
2. Runtime Errors
Errors that occur while the program is running.
Copy Text 
let x = y; // y is not defined
3. Logical Errors
Code runs but produces incorrect results.
The try...catch Statement
The try…catch block allows you to test code for errors and handle them safely.
Basic Syntax
Copy Text 
try {
  // code that may throw an error
} catch (error) {
  // code to handle the error
}
Example
Copy Text 
try {
  let result = JSON.parse("{name: 'John'}");
} catch (error) {
  console.log("Invalid JSON format");
}
This prevents the app from crashing when an error occurs.

Using finally Block

The finally block always executes, whether an error occurs or not.
Copy Text 
try {
  console.log("Trying...");
} catch (error) {
  console.log("Error occurred");
} finally {
  console.log("This always runs");
}
Useful for cleanup tasks, such as closing files or stopping loaders.
Throwing Custom Errors in JavaScript
You can manually create errors using the throw keyword.
Copy Text 
let age = 15;

if (age < 18) {
  throw new Error("Access denied: Age must be 18+");
}
Custom errors improve debugging and user experience.

Error Object Properties

JavaScript provides useful error details:
Copy Text 
try {
  undefinedFunction();
} catch (error) {
  console.log(error.name);
  console.log(error.message);
}
Common properties:
  • name → Error type
  • message → Error description
  • stack → Error location

Handling Errors in Asynchronous JavaScript

Using try...catch with async/await
Copy Text 
async function fetchData() {
  try {
    const response = await fetch("https://api.example.com/data");
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.log("Failed to fetch data");
  }
}

Best Practices for JavaScript Error Handling

  • Always validate user input
  • Use meaningful error messages
  • Avoid empty catch blocks
  • Log errors for debugging
  • Handle API failures gracefully

Common Mistakes to Avoid

  • Ignoring errors
  • Catching errors without handling
  • Using try...catch everywhere unnecessarily
  • Showing raw error messages to users

Why Error Handling Is Important

  • Prevents application crashes
  • Improves user experience
  • Makes debugging easier
  • Essential for production-ready code
Javascript Canvas API
JavaScript try…catch