Error Handling in JavaScript for Better Code Quality

Error handling in JavaScript makes it possible for your JavaScript apps to handle problems smoothly avoiding crashes and guaranteeing a seamless user experience.

So, where do these errors come from?

• Typos: A simple misspelling in a variable name or a missing semicolon can bring your program to a halt.
• Incorrect Data: Maybe a user enters the wrong information in a form, or you try to process data that's not in the format you expect. These mismatches can lead to errors.
• Network Issues: Sometimes, the internet connection might be unstable, causing errors when your program tries to fetch data from online sources.
• Unexpected Events: Who knows what a user might do! They could click a button in an unintended way, or try to perform an action that your program isn't designed for.

You can begin developing more reliable and user-friendly JavaScript applications by being aware of these common error sources. In this article, we will cover error handling in JavaScript and equip you with tools to catch and fix errors without your program crashing. We'll use special tools to spot these errors and give clear messages so you can address them easily.

Types of Errors in JavaScript

Errors are statements that prevent the programme from operating correctly. Syntax errors, runtime errors, and logical errors are the three primary categories of errors that can occur during the compilation of a JavaScript programme. There are three types of errors in programming which are discussed below:

• Syntax error
• Logical error
• Runtime error

1. Syntax Errors

These are the typos and grammatical mistakes of the JavaScript world. They prevent your code from even running, like a missing semicolon or a misspelled keyword. Similarly, a missing parenthesis in JavaScript disrupts the code's intended flow.

// Syntax error: Missing closing parenthesis
console.log("Hello, world!";

Here, you're missing the closing parenthesis ) after the message "Hello, world!". This missing parenthesis is a syntax error. The computer doesn't understand what you're trying to tell it because the statement isn't properly formatted.

2. Runtime Errors

These errors pop up while your program is running, like trying to access a variable that doesn't exist or dividing by zero. These are like unexpected roadblocks that halt your program's smooth execution.

 // Runtime error: Cannot read property 'length' of undefined
let array;
console.log(array.length);

The code declares a variable array but doesn't assign any value to it. In JavaScript, leaving a variable undeclared means it has an implicit value of undefined. The line console.log(array.length); tries to access the length property of array. However, since array is undefined, it doesn't hold any object or data to access properties from.

This attempt to use a property on an undefined variable triggers a runtime error. The code runs without issues until this specific line, where it encounters a problem during execution.

3. Logical Errors

These might be the trickiest ones. Your code might run without complaints, but it produces the wrong results due to flaws in the logic itself.

// Logical error: Incorrect calculation
let price = 100;
let discount = 0.2;
let finalPrice = price - discount; // Should be price * discount
console.log(finalPrice); // Outputs 99.8 instead of 20

The code calculates a discount but produces an incorrect final price due to a logical error. You define variables for price (100), discount (0.2), and finalPrice. The line let finalPrice = price - discount; subtracts the discount value (0.2) from the original price (100). This is the logical error.

The intention is likely to calculate a discounted price by multiplying the price with the discount percentage. However, the subtraction results in an incorrect final price (99.8). The console.log statement displays 99.8, which is not the expected discounted price of 20 (100 * 0.2).

Basic Error Handling Techniques

When writing JavaScript code, errors can happen. But don’t worry! You can handle them effectively using some basic techniques. Let’s explore a few common approaches.

try...catch...finally

Wrap the code that might cause an error inside a try block. If an error occurs, the code inside the catch block will execute, allowing you to handle the error gracefully.

• try Block: This block contains the code that might potentially throw an error.
• catch Block: This block executes if an error occurs within the try block. It receives the error object as an argument, allowing you to inspect its details and take corrective actions.
• finally Block (Optional): This block executes unconditionally, regardless of whether an error occurs or not. It's often used for cleanup tasks like closing files or database connections.

Example

function readFile(filename) {
  try {
    // Code that might throw an error (e.g., file not found)
    const content = fs.readFileSync(filename, 'utf-8');
    return content;
  } catch (error) {
    console.error("Error reading file:", error.message);
    // Handle the error gracefully (e.g., display a user-friendly message)
    return "An error occurred while reading the file.";
  } finally {
    // Optional cleanup tasks (e.g., not applicable here)
  }
}

The try block attempts to read a file using fs.readFileSync.
If an error occurs (e.g., file not found), the catch block catches it, logs the error message, and returns a user-friendly message instead of crashing the program.
The finally block is omitted here as there's no cleanup needed.

Examples of Handling Different Type of Errors

• TypeError: This error occurs when an operation is attempted on an incompatible data type (e.g., adding a string and a number). You can use a catch block to identify and handle these type mismatches.

try {
  const sum = "5" + 10; // Attempting to add a string and a number
} catch (error) {
  if (error instanceof TypeError) {
    console.error("Type error: Incompatible data types for operation.");
  } else {
    // Handle other types of errors
  }
}

• ReferenceError: This error occurs when you try to access a variable that hasn't been declared or is out of scope. You can use a try...catch block to prevent program crashes due to missing variables.

try {
  console.log(undeclaredVariable); // Trying to access an undeclared variable
} catch (error) {
  if (error instanceof ReferenceError) {
    console.error("Reference error: Variable is not defined.");
  } else {
    // Handle other types of errors
  }
}

Custom Error Handling

JavaScript provides built-in error objects like Error, but sometimes you need more specific error messages tailored to your application. This is where custom error handling comes in.

Creating and Throwing Custom Errors

• Error Inheritance: You can create custom errors by extending the built-in Error class. This allows you to inherit properties like name and message while adding your own custom details.

  class ApiError extends Error {
  constructor(message) {
    super(message); // Call super constructor with the message
    this.name = 'ApiError'; // Set a custom name for your error
  }
}

// Throwing the error
throw new ApiError('Failed to fetch data from the API');

• Throwing with Objects: You can also throw objects with custom properties for more detailed error information.

throw {
  name: 'ValidationError',
  message: 'Invalid email format',
  field: 'email',
};

Use Cases for Custom Errors

• Clarity and Specificity: Custom errors provide more informative messages that pinpoint the exact issue within your application. This is especially helpful for debugging and pinpointing the source of problems.
• Error Classification: By creating custom error classes with specific names, you can categorize errors based on their type (e.g., ApiError, NetworkError, ValidationError). This allows for more targeted handling of different error scenarios.
• Improved User Experience: You can use custom errors to provide user-friendly messages that explain the issue in a clear and actionable way, leading to a better user experience.

Examples of Custom Error Classes

• AuthenticationError: Thrown when a user fails to authenticate (wrong username/password).
• ValidationError: Thrown when user input fails to meet validation requirements.
• NetworkError: Thrown when there's a problem communicating with a server.

Example

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

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

This code snippet demonstrates creating custom error classes for error handling in JavaScript.

Here's a breakdown of what each part does:

• ValidationError: This class represents errors related to validation issues.
• DatabaseError: This class represents errors related to database operations.

• Both ValidationError and DatabaseError extend the built-in Error class. This allows them to inherit properties and methods from the base Error class, such as the ability to store an error message.

• Each class has a constructor function that takes a single argument, message.

• The constructor calls the super(message) statement, which passes the received message to the parent Error class constructor.

• Inside the constructor, this.name is set to either "ValidationError" or "DatabaseError" depending on the class. This customizes the error name for better identification.

Error Handling Best Practices

Error handling isn't just about catching errors; it's about creating a well-oiled system that anticipates, addresses, and recovers from them gracefully. Here are some key best practices to elevate your error handling game:

1. Error Logging

Logging errors provides a persistent record for debugging and future reference. It allows you to track down the root cause of issues that might not be immediately apparent.

function logError(error) {
  console.error(`[${new Date().toISOString()}] ${error.message}`);
}

try {
  riskyOperation();
} catch (error) {
  logError(error);
}

2. Graceful Degradation

Graceful degradation means your application strives to maintain some level of functionality even when errors occur. This prevents complete crashes and allows users to continue interacting with the system (albeit with potentially reduced features). Imagine a news website. If fetching breaking news articles fails, you could display cached content or a generic message while attempting to recover the data in the background.

try {
  let data = fetchData();
} catch (error) {
  console.warn("Failed to fetch data, using fallback data.");
  let data = getFallbackData();
}

3. User-Friendly Error Messages

Technical jargon might fly over your users' heads. Strive for clear, concise messages that explain the error in a way the user can understand. Offer potential solutions or guidance on how to proceed. Instead of a generic "Internal Server Error," display a message like "We're having trouble loading the data right now. Please try again later."

try {
  processUserInput(input);
} catch (error) {
  alert("We're having trouble loading the data right now. Please try again later.");
}

4. Avoiding Silent Failures

Uncaught errors can lead to unexpected behavior or issues that go unnoticed. Ensure all errors are caught using try...catch blocks or promise rejections. Log or display appropriate messages for each error. Wrap potentially error-prone code in try...catch blocks, providing user feedback when errors occur.

try {
  criticalOperation();
} catch (error) {
  console.error("Critical operation failed:", error.message);
  notifyAdmin(error);
}

Asynchronous Error Handling

JavaScript offers powerful features for asynchronous operations, but errors can lurk in these non-sequential flows too. Here's how to handle errors gracefully in asynchronous code:

1. Handling Errors in Callbacks

Callbacks are a common way to handle asynchronous operations. However, managing errors within nested callbacks can become cumbersome.

function getUserData(callback) {
  setTimeout(() => {
    const user = { name: 'John Doe' };
    callback(null, user); // Success with user data
  }, 1000);
}

function getRepos(userId, callback) {
  setTimeout(() => {
    if (userId === 1) {
      callback('User not found', null); // Error with message
    } else {
      callback(null, ['repo1', 'repo2']); // Success with repos
    }
  }, 500);
}

getUserData((err, user) => {
  if (err) {
    console.error('Error fetching user:', err);
  } else {
    getRepos(user.id, (err, repos) => {
      if (err) {
        console.error('Error fetching repos:', err);
      } else {
        console.log('User Repos:', repos);
      }
    });
  }
});

This code demonstrates nested callbacks, but error handling becomes messy and prone to "callback hell."

2. Using Promises and the .catch() Method

Promises offer a cleaner way to handle asynchronous operations and their errors. You can chain .then() and .catch() methods to handle successful results and errors, respectively.

function getUserData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const user = { name: 'John Doe' };
      resolve(user); // Success with user data
    }, 1000);
  });
}

function getRepos(userId) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (userId === 1) {
        reject('User not found'); // Error with message
      } else {
        resolve(['repo1', 'repo2']); // Success with repos
      }
    }, 500);
  });
}

getUserData()
  .then(user => getRepos(user.id))
  .then(repos => console.log('User Repos:', repos))
  .catch(err => console.error('Error:', err));

This approach with Promises provides cleaner error handling through a single .catch() block.

3. Error Handling with async and await

async/await syntax provides a more synchronous-like way to write asynchronous code. Errors are handled using try...catch blocks within the async function.

async function fetchData() {
  try {
    const user = await getUserData();
    const repos = await getRepos(user.id);
    console.log('User Repos:', repos);
  } catch (err) {
    console.error('Error:', err);
  }
}

fetchData();

This example uses async/await syntax with a try...catch block for cleaner error handling within the asynchronous flow.

Tools and Libraries for Error Handling

While core error handling techniques are essential, JavaScript offers powerful libraries and tools to take your debugging game to the next level, especially in production environments where catching errors after deployment is crucial. Here's a look at some popular options:

• Sentry (https://sentry.io/): A comprehensive error monitoring platform that captures errors across your JavaScript applications. It provides detailed error reports with stack traces, user information, and environment details, making it easier to pinpoint the root cause of issues.
• TrackJS (https://trackjs.com/): Another popular error monitoring tool offering real-time error tracking, detailed error reports, and user behavior insights. It helps you identify and fix errors before they impact your users.

Sentry and TrackJS provide real-time error tracking, detailed error reports, and integration with various platforms to streamline the debugging process.

// Example using Sentry
Sentry.init({ dsn: 'https://[e-mail]/12345' });

try {
  riskyOperation();
} catch (error) {
  Sentry.captureException(error);
  console.error("An error occurred:", error.message);
}

Benefits of Error Monitoring Tools

• Proactive Error Detection: These tools can catch errors that might go unnoticed in development, especially in complex applications.
• Detailed Error Reports: They provide comprehensive information about errors, including stack traces, user data, and environment details, accelerating debugging.
• Grouping and Prioritization: They help categorize and prioritize errors based on their frequency and severity, allowing you to focus on the most critical issues first.
• Real-time Monitoring: Tools like Sentry offer real-time error dashboards to keep track of issues as they occur.

Example: Using Sentry to Track Errors

1. Create a Sentry Account: Sign up for a free or paid Sentry account and set up a project for your application.
2. Install the Sentry SDK: Integrate the Sentry SDK into your JavaScript code using a library like @sentry/browser.
3. Capture Errors: Wrap critical parts of your code with Sentry's error capture functions (e.g., Sentry.captureException(error)).
4. Monitor Your Dashboard: Sentry will capture errors and send them to your dashboard where you can analyze them for debugging.

By leveraging error monitoring tools, you can gain valuable insights into your application's health in production environments, allowing you to identify and resolve issues before they affect your users.

Conclusion

Throughout this article, We've explored the different types of errors that can lurk within your code, from syntax errors to runtime roadblocks and logical missteps. By understanding these error categories, you're well-equipped to tackle them effectively.

We also looked at both basic and custom error handling techniques. We saw how try...catch blocks can gracefully catch errors and prevent crashes, while custom errors allow you to craft informative messages specific to your application's needs. These techniques empower you to not only identify errors but also provide clear explanations to users or pinpoint issues for debugging.

The discussion extended to best practices, including asynchronous error handling and leveraging powerful tools like Sentry for comprehensive error monitoring in production environments. By incorporating these practices, you can proactively prevent errors, identify them swiftly, and ensure your JavaScript applications run smoothly and flawlessly.

Comments

[Samuel Rouse]

Another significant source of errors in my experience is copy/paste mistakes. Any time you have a series of similar actions, the temptation to copy and paste the code is there, and the risk of leaving code from the original is always high.

// Source
if ( color === 'red' && background === 'blue' ) {
  mixColor = '#FF00FF';
}

// Copy-paste
if ( color === 'red' && background === 'blue' ) {
  mixColor = '#FF00FF';
}
if ( color === 'red' && background === 'green' ) {
  mixColor = '#FFFF00';
}
if ( color === 'blue' && background === 'green' ) {
  mixColor = '#00FFFF';
}
if ( color === 'blue' && background === 'red' ) {
  mixColor = '#FF00FF';
}
if ( color === 'green' && background === 'blue' ) {
  mixColor = '#FF00FF';
}
if ( color === 'green' && background === 'red' ) {
  mixColor = '#FFFF00';
}

In this case I failed to change the second-to-last condition. Because they are all complete statements when you paste them in, it's harder to look quickly and understand that one of them is wrong.

Copy/paste errors are even harder when you copy code from another file. You might lose the context to see the mistake in those cases, and duplicate code means you have the possibility of them getting out of sync if you update only one of the locations.

The theory of writing everything just once is great, but in practice there is always some duplication, and the effort to implement everything perfectly is often much higher than making a copy. Basically the Avoid Hasty Abstractions idea.

[Goran Markovic]

You can use cause to get specific status code for better handling Errors like: throw new Error("New error message", { cause: err });

developer.mozilla.org/en-US/docs/W...

[Jeroen van Meerendonk]

Hi! Just a small typo in the discount example: 100 * 0,2 is 20, not 80.

[lino]

Thank you for pointing that out! I have made the correction.