Implementing Error Handling and Retries with Higher-Order Functions in TypeScript

Hello, and welcome back! Last time, we successfully made our first Whisper API request to transcribe audio using OpenAI's service. Armed with that knowledge, we'll now build resilience into your transcription system by implementing error handling and adding retries. This lesson expands on your current skills to ensure that even when errors occur, your application remains robust and continues running smoothly.

In this lesson, you'll learn how to use TypeScript higher-order functions to wrap function calls for error handling, implement retries for more reliable API requests, and deepen your understanding of adding functionality to functions. These concepts are critical when interacting with APIs, since network issues or server timeouts shouldn't derail your entire application.

In real-world applications, errors can arise for various reasons — such as network interruptions, server downtimes, or temporary glitches. Instead of terminating the process, implementing retries allows the system to recover gracefully.

In TypeScript, we can achieve this using higher-order functions. A higher-order function is a function that takes one or more functions as arguments and/or returns a function. This pattern allows us to wrap existing functions with additional behavior — such as logging, retries, or authentication checks — without modifying the original function itself.

Let's define a higher-order function called withRetry that handles retries for any asynchronous function:

function withRetry<T>(
  fn: (...args: any[]) => Promise<T>,
  maxRetries: number = 3,
  delay: number = 5000
): (...args: any[]) => Promise<T> {
  return async (...args: any[]): Promise<T> => {
    let retries = 0;

    while (true) {
      try {
        return await fn(...args);
      } catch (error) {
        retries++;

        if (retries >= maxRetries) {
          console.error(`All ${maxRetries} retries failed.`);
          throw error;
        }

        console.log(
          `Error: ${error instanceof Error ? error.message : error}. Retrying in ${delay / 1000} seconds...`
        );
        await new Promise((resolve) => setTimeout(resolve, delay));
      }
    }
  };
}

Here's how it works step by step:

1. Parameters: fn is the function to wrap. You can customize how many times to retry (maxRetries) and how long to wait between attempts (delay in ms).

2. Execution and Retry. The returned wrapper attempts to execute fn in a try/catch loop. On error, it logs the failure, waits, and retries.

3. Failure Exit. If the maximum retries are exhausted, the error is re-thrown so the calling code can handle it.

Included the following explanation at the end of the paragraph:

The line fn: (...args: any[]) => Promise<T> means we're accepting a function (fn) that can take any number of arguments (thanks to the ...args rest parameter) and returns a Promise. We use Promise<T> because the function we're wrapping is asynchronous and we want to preserve that async behavior.

Similarly, return async (...args: any[]): Promise<T> => { ... } defines the function we return from withRetry. It also takes any number of arguments and returns a Promise, allowing us to await the original function (fn) inside it. This pattern gives us flexibility to retry any async function, regardless of how many parameters it needs.