TypeScript Error Handling: Common Pitfalls and How to Avoid Them

This blog has provided a solid understanding of TypeScript's error-handling features. You've learned how to throw errors in TypeScript functions and how to handle them using the try...catch statement. You also know how to avoid common mistakes and handle errors effectively.

Struggling to make sense of cryptic try-catch errors in TypeScript? Many developers run into issues like unclear error messages, lost stack traces, or unexpected runtime behavior, especially in larger applications or API-heavy projects. This guide is for TypeScript developers who want cleaner, safer, and more reliable error handling. We’ll break down the most common pitfalls and show how to avoid them using real-world patterns and tools. By the end, you’ll write code that’s easier to debug, maintain, and trust in production.

---

The Most Common Pitfalls in TypeScript Error Handling

Let’s break down the most frequent mistakes developers make and how to avoid them with better try-catch patterns, safer error object handling, and smarter type checking.

Pitfall #1: Throwing Non-Error Values

Throwing a string or number feels quick, but it’s a trap.

throw "Something went wrong"; // ❌ Bad Practice

This throw statement doesn’t produce a proper stack trace or usable error object. The right way is to always throw an instance of the built-in Error class or your own custom error class.

throw new Error("Something went wrong"); // ✅ Good Practice

To avoid this:

• Enable useUnknownInCatchVariables in tsconfig.json.
• Use typescript-eslint's no-throw-literal rule.

Key Tip: Use a utility like ensureError() to safely normalize unknown catch block values.

---

Pitfall #2: Losing the Original Error Context

Consider the above example:

Copy
try {
  doSomething();
} catch (err) {
  throw new Error("Something failed"); // ❌ Lost context
}

We lost the original stack trace. Use the cause property to preserve it.

Copy
try {
  doSomething();
} catch (err) {
  throw new Error("Something failed", { cause: err }); // ✅
}

Supported in Node.js 16.9+ and major browsers, this retains the full call stack.

---

Pitfall #3: Inconsistent or Dynamic Error Messages

Changing error messages dynamically (with user or API data) makes monitoring harder.

throw new Error(`Customer ${customerId} failed to register`); // ❌

Instead, use constant messages and attach context separately:

throw new CustomError("CUSTOMER_REGISTRATION_FAILED", { customerId }); // ✅

This helps tools like Sentry group errors effectively.

---

Creating a Custom Error Class the Right Way

You’ll need your custom error class to handle specific business logic or provide structured context.

Copy
export class CustomError extends Error {
  constructor(public code: string, public context: Record<string, unknown>) {
    super(code);
    this.name = "CustomError";
  }
}

Usage Example

Copy
throw new CustomError("USER_NOT_FOUND", { userId: "1234" });

Then, in your catch block, you can check the error type:

Copy
try {
  getUser();
} catch (e) {
  if (e instanceof CustomError) {
    console.error(e.code, e.context);
  }
}

Use the instanceof operator to narrow the error type and provide specific recovery actions.

---

3. How to Write Clean Try-Catch Blocks

Here’s a proper try-catch structure that preserves context and logs effectively:

Important: Always perform type checking on the error parameter when using catch statement.

---

Diagram: Error Handling Flow

---

Handling Expected Failures with the Result Pattern

Sometimes, you expect failures—like a network request timeout or validation issue. Don’t throw an error. Return a result type instead.

Example with ts-results

This pattern avoids runtime exceptions, making your code predictable.

---

Catch Block Patterns to Follow and Avoid

Here’s how to handle catch blocks properly.

Best Practice ✅

Anti-Pattern ❌

Use as an extra guard if needed, especially when error could be anything.

---

Advanced Patterns: Type Guards and Error Mapping

Use custom type guards to safely identify specific error shapes:

This helps in precise error handling:

---

Summary Tables

Common Error Handling Mistakes

---

Types of Try-Catch Blocks

---

Conclusion

Modern TypeScript error handling combines the power of static typing with well-structured try-catch patterns and functional tools like the Result type. By using proper catch blocks, defining robust custom error classes, preserving stack traces, and avoiding dynamic error messages, developers can write more predictable, maintainable, and debuggable code. TypeScript 5.8 may not introduce new error features, but its compiler optimizations improve the overall developer experience. Avoid these common pitfalls and follow the patterns shared here to build resilient applications with confidence.

function validatePassword(password: string): void {
  try {
    if (password.length < 8) {
      throw new Error("Password too short");
    }
  } catch (error: unknown) {
    if (error instanceof Error) {
      console.error("Validation failed:", error.message); // `error.message` is safe here
    } else {
      console.error("Unexpected error:", error);
    }
  }
}

import { ok, err, Result } from 'ts-results';

function fetchData(): Result<string, Error> {
  if (Math.random() < 0.5) {
    return ok("Data loaded");
  }
  return err(new Error("Network error"));
}

try {
  riskyOperation();
} catch (error: unknown) {
  if (error instanceof Error) {
    console.error(error.message); // Safe to access
  }
}

try {
  riskyOperation();
} catch (error) {
  console.error(error.nonExistentProperty); // TypeScript allows it, but risky!
}

function isCustomError(error: unknown): error is CustomError {
  return error instanceof CustomError && typeof error.code === 'string';
}

catch (error: unknown) {
  if (isCustomError(error)) {
    log(error.code, error.context);
  }
}