HTTP client timeout with AbortController (fetch)

import { withTimeout, TimeoutError } from "./withTimeout";

export class HttpError extends Error {
  constructor(public readonly status: number, message: string) {
    super(message);
    this.name = "HttpError";
  }
}

interface RequestOptions {
  method?: string;
  body?: unknown;
  timeoutMs?: number;
  retries?: number;
  signal?: AbortSignal;
}

const sleep = (ms: number) => new Promise<void>((r) => setTimeout(r, ms));

export class ApiClient {
  constructor(private readonly baseUrl: string) {}

  async request<T>(path: string, opts: RequestOptions = {}): Promise<T> {
    const { method = "GET", body, timeoutMs = 5000, retries = 2, signal } = opts;

    return this.retryWithBackoff(retries, async () => {
      if (signal?.aborted) throw new DOMException("Aborted", "AbortError");

      const res = await withTimeout(`${this.baseUrl}${path}`, {
        method,
        signal,
        timeoutMs,
        headers: body ? { "Content-Type": "application/json" } : undefined,
        body: body ? JSON.stringify(body) : undefined,
      });

      if (res.status >= 500) throw new HttpError(res.status, `Server error ${res.status}`);
      if (!res.ok) {
        const text = await res.text();
        throw new HttpError(res.status, text || res.statusText);
      }
      return (await res.json()) as T;
    });
  }

  private async retryWithBackoff<T>(retries: number, fn: () => Promise<T>): Promise<T> {
    let attempt = 0;
    for (;;) {
      try {
        return await fn();
      } catch (err) {
        const retriable = err instanceof TimeoutError || (err instanceof HttpError && err.status >= 500);
        if (!retriable || attempt >= retries) throw err;
        await sleep(2 ** attempt * 100 + Math.random() * 50);
        attempt++;
      }
    }
  }
}

import { useEffect, useState } from "react";
import { ApiClient } from "./ApiClient";

const client = new ApiClient("/api");

interface State<T> {
  data: T | null;
  error: string | null;
  loading: boolean;
}

export function useApiResource<T>(path: string, timeoutMs = 5000): State<T> {
  const [state, setState] = useState<State<T>>({ data: null, error: null, loading: true });

  useEffect(() => {
    const controller = new AbortController();
    setState((s) => ({ ...s, loading: true, error: null }));

    client
      .request<T>(path, { timeoutMs, signal: controller.signal })
      .then((data) => setState({ data, error: null, loading: false }))
      .catch((err: unknown) => {
        if (err instanceof DOMException && err.name === "AbortError") return;
        const message = err instanceof Error ? err.message : "Unknown error";
        setState({ data: null, error: message, loading: false });
      });

    return () => controller.abort();
  }, [path, timeoutMs]);

  return state;
}