Mastering TypeScript's Advanced Error Handling Patterns for Scalable Apps

Error handling is a crucial part of any application, especially as apps grow larger and more complex. TypeScript enhances JavaScript by adding types, allowing you to catch many issues early and write clearer error handling patterns. This article explores advanced error handling techniques in TypeScript that help you build scalable applications while keeping your code clean and maintainable.

### Why Advanced Error Handling Matters While basic try-catch blocks work fine for simple cases, large applications benefit from structured error handling that distinguishes between different error types and preserves error context. This makes debugging easier and improves user experience by giving meaningful error messages.

### Creating Custom Error Types In TypeScript, you can create custom error classes to represent different failure scenarios. This helps you catch and handle specific errors separately.

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

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

Using these error classes, you can write catch blocks that specifically handle network or validation errors differently from unexpected ones.

function fetchData(url: string): Promise<string> {
  return new Promise((resolve, reject) => {
    // Simulate network request
    if (!url.startsWith("http")) {
      reject(new ValidationError("Invalid URL format"));
    } else {
      // Simulate network failure
      reject(new NetworkError("Failed to connect"));
    }
  });
}

async function getData() {
  try {
    const data = await fetchData("invalid-url");
    console.log(data);
  } catch (error) {
    if (error instanceof ValidationError) {
      console.error("Validation issue:", error.message);
    } else if (error instanceof NetworkError) {
      console.error("Network issue:", error.message);
    } else {
      console.error("Unexpected error:", error);
    }
  }
}

getData();

### Using Result Types Instead of Exceptions An alternative to throwing errors is to use a "Result" type pattern, which clearly represents success or failure outcomes. This pattern avoids exceptions and makes error handling explicit.

type Result<T, E> =
  | { success: true; value: T }
  | { success: false; error: E };

function parseJson(input: string): Result<object, string> {
  try {
    const data = JSON.parse(input);
    return { success: true, value: data };
  } catch (e) {
    return { success: false, error: "Invalid JSON format" };
  }
}

const result = parseJson("{\"name\":\"John\"}");

if (result.success) {
  console.log("Parsed data:", result.value);
} else {
  console.error("Error:", result.error);
}

### Leveraging Type Guards for Safer Error Checks TypeScript's type guards help narrow down the type of error objects at runtime. This leads to safer and cleaner error handling logic.

function isNetworkError(error: unknown): error is NetworkError {
  return error instanceof NetworkError;
}

try {
  throw new NetworkError("Network is down");
} catch (error) {
  if (isNetworkError(error)) {
    console.log("Handled a network error:", error.message);
  } else {
    console.log("Generic error:", error);
  }
}

### Best Practices for Scalable Error Handling 1. Use custom error classes to differentiate error types. 2. Consider Result types for explicit error handling flows. 3. Use type guards for safe error narrowing in catch blocks. 4. Centralize error handling logic to improve maintainability. 5. Always add meaningful error messages to aid debugging.

By mastering these TypeScript patterns, you'll make your apps more robust and easier to maintain as they grow. Happy coding!