Step-by-Step Guide to Custom Error Classes in TypeScript with AppError

In modern web development, effective error handling is crucial for building robust and user-friendly applications. TypeScript, with its static typing and object-oriented features, allows developers to create custom error classes that enhance error management. One such example is the AppError class, which extends the built-in Error class in JavaScript.

In this blog post, we'll explore the AppError class, understand its components, and discuss how it can be integrated into your TypeScript projects for improved error handling.

Why Custom Error Classes?

JavaScript's built-in error handling mechanism provides a basic structure for throwing and catching errors using the Error class. However, in complex applications, you often need more information about the error, such as HTTP status codes or custom messages, which the base Error class does not provide.

Custom error classes allow you to:

• Encapsulate additional information: Include more context about the error, like HTTP status codes.

• Improve code readability: Make it clear what kind of error has occurred by using descriptive class names.

• Enhance debugging: Provide more detailed stack traces and error messages.

The AppError Class

Let's break down the AppError class provided above:

class AppError extends Error {
  public statusCode: number;

  constructor(statusCode: number, message: string, stack = '') {
    super(message);
    this.statusCode = statusCode;
    if (stack) {
      this.stack = stack;
    } else {
      Error.captureStackTrace(this, this.constructor);
    }
  }
}

Components of AppError

1. Extending the Error Class:

    class AppError extends Error
   

   By extending the Error class, AppError inherits its properties and methods, allowing it to function like a standard error while adding extra features.

2. Custom Properties:

    public statusCode: number;
   

   This property holds the HTTP status code associated with the error, making it useful for API responses.

3. Constructor:

    constructor(statusCode: number, message: string, stack = '') {
      super(message);
      this.statusCode = statusCode;
      if (stack) {
        this.stack = stack;
      } else {
        Error.captureStackTrace(this, this.constructor);
      }
    }
   

   • statusCode: A numeric HTTP status code.

   • message: A descriptive error message.

   • stack (optional): An optional stack trace. If not provided, Error.captureStackTrace generates one.

How It Works

When an instance of AppError is created, the constructor initializes the statusCode and message. The super(message) call ensures that the base Error class's constructor is called, initializing the message property. The stack property is either set to a provided value or generated using Error.captureStackTrace, which helps in debugging by providing a detailed call stack.

Using AppError in Your Project

Here's a simple example of how you can use AppError in a TypeScript application:

function handleRequest(req: any, res: any) {
  try {
    // Simulate an error
    throw new AppError(404, 'Resource not found');
  } catch (error) {
    if (error instanceof AppError) {
      res.status(error.statusCode).send({ error: error.message });
    } else {
      res.status(500).send({ error: 'Internal Server Error' });
    }
  }
}

In this example:

• An AppError is thrown if a resource is not found.

• The error is caught in the catch block, where we check if the error is an instance of AppError.

• Based on the error type, an appropriate HTTP response is sent to the client.

Benefits of Using AppError

1. Consistency: Having a standard way to handle errors across your application.

2. Clarity: Clear and descriptive errors make debugging easier.

3. Flexibility: Easily extendable to include more properties or methods as needed.

Conclusion

The AppError class is a powerful tool for managing errors in TypeScript applications. By extending the native Error class, it allows you to add meaningful context to your errors, making them easier to handle and debug. Implementing custom error classes like AppError can significantly enhance the robustness and maintainability of your codebase.

Incorporating AppError into your project can streamline error handling, improve user feedback, and ultimately lead to a better development experience. So next time you're building a TypeScript application, consider leveraging custom error classes to take your error management to the next level.