API error shape that frontend can rely on

import { ErrorRequestHandler, Request } from 'express';
import { ZodError } from 'zod';
import { ApiError, ApiErrorBody } from './errors';

function requestIdOf(req: Request): string {
  return (req.headers['x-request-id'] as string) || 'unknown';
}

export const errorMiddleware: ErrorRequestHandler = (err, req, res, _next) => {
  const requestId = requestIdOf(req);

  if (err instanceof ApiError) {
    const body: ApiErrorBody = {
      error: { code: err.code, message: err.message, details: err.details, requestId },
    };
    return res.status(err.status).json(body);
  }

  if (err instanceof ZodError) {
    const body: ApiErrorBody = {
      error: {
        code: 'VALIDATION',
        message: 'Request validation failed',
        details: err.flatten().fieldErrors as Record<string, string[]>,
        requestId,
      },
    };
    return res.status(422).json(body);
  }

  // Unexpected: log the real cause, expose nothing.
  console.error(`[${requestId}] unhandled error`, err);
  const body: ApiErrorBody = {
    error: { code: 'INTERNAL', message: 'Something went wrong', requestId },
  };
  return res.status(500).json(body);
};

import { ApiErrorBody, ErrorCode } from './errors';

export class ClientApiError extends Error {
  readonly code: ErrorCode;
  readonly status: number;
  readonly details?: Record<string, string[]>;
  readonly requestId: string;

  constructor(status: number, body: ApiErrorBody['error']) {
    super(body.message);
    this.name = 'ClientApiError';
    this.code = body.code;
    this.status = status;
    this.details = body.details;
    this.requestId = body.requestId;
  }
}

export async function request<T>(path: string, init?: RequestInit): Promise<T> {
  let res: Response;
  try {
    res = await fetch(path, {
      ...init,
      headers: { 'Content-Type': 'application/json', ...(init?.headers || {}) },
    });
  } catch {
    throw new ClientApiError(0, { code: 'INTERNAL', message: 'Network error', requestId: 'client' });
  }

  if (res.ok) {
    return (await res.json()) as T;
  }

  let body: ApiErrorBody['error'];
  try {
    body = ((await res.json()) as ApiErrorBody).error;
  } catch {
    body = { code: 'INTERNAL', message: 'Unexpected response', requestId: 'client' };
  }
  throw new ClientApiError(res.status, body);
}

import { useState, useCallback } from 'react';
import { request, ClientApiError } from './apiClient';

interface LoginResult {
  token: string;
}

export function useLogin() {
  const [banner, setBanner] = useState<string | null>(null);
  const [fieldErrors, setFieldErrors] = useState<Record<string, string[]>>({});
  const [loading, setLoading] = useState(false);

  const login = useCallback(async (email: string, password: string) => {
    setLoading(true);
    setBanner(null);
    setFieldErrors({});
    try {
      const { token } = await request<LoginResult>('/api/login', {
        method: 'POST',
        body: JSON.stringify({ email, password }),
      });
      return token;
    } catch (err) {
      if (err instanceof ClientApiError && err.code === 'VALIDATION') {
        setFieldErrors(err.details ?? {});
      } else if (err instanceof ClientApiError && err.code === 'UNAUTHENTICATED') {
        setBanner('Invalid email or password');
      } else {
        const id = err instanceof ClientApiError ? err.requestId : 'unknown';
        setBanner(`Something went wrong (ref: ${id})`);
      }
      return null;
    } finally {
      setLoading(false);
    }
  }, []);

  return { login, banner, fieldErrors, loading };
}