TypeScript Problem DetailsをZodで検証してAPIエラーを扱う

{
  "type": "https://example.com/problems/validation-failed",
  "title": "入力内容を確認してください。",
  "status": 400,
  "detail": "入力値に2件のエラーがあります。",
  "instance": "/api/users",
  "extensions": {
    "code": "VALIDATION_FAILED",
    "traceId": "00-4bf92f3577b34da6a3ce929d0e0e4736",
    "errors": [
      {
        "field": "email",
        "code": "INVALID_EMAIL",
        "message": "メールアドレスの形式が正しくありません。"
      }
    ]
  }
}

import { z } from 'zod';

const validationErrorSchema = z.object({
    field: z.string(),
    code: z.string(),
    message: z.string(),
});

export const problemDetailsSchema = z.object({
    type: z.string().optional(),
    title: z.string().optional(),
    status: z.number().int().optional(),
    detail: z.string().optional(),
    instance: z.string().optional(),
    extensions: z.object({
        code: z.string(),
        traceId: z.string().optional(),
        errors: z.array(validationErrorSchema).optional(),
    }).loose(),
});

export type ProblemDetails = z.infer<typeof problemDetailsSchema>;
export type ValidationError = z.infer<typeof validationErrorSchema>;

import type { ProblemDetails, ValidationError } from './problemDetails';

export class ApiError extends Error {
    constructor(private readonly problem: ProblemDetails) {
        super(problem.title ?? 'API Error');
        this.name = 'ApiError';
    }

    get status(): number | undefined {
        return this.problem.status;
    }

    get code(): string {
        return this.problem.extensions.code;
    }

    get traceId(): string | undefined {
        return this.problem.extensions.traceId;
    }

    get validationErrors(): ValidationError[] {
        return this.problem.extensions.errors ?? [];
    }

    get isValidationError(): boolean {
        return this.status === 400 && this.code === 'VALIDATION_FAILED';
    }

    get isUnauthorized(): boolean {
        return this.status === 401;
    }
}

import { ApiError } from './ApiError';
import { problemDetailsSchema } from './problemDetails';

const readJson = async (response: Response): Promise<unknown> => {
    const contentType = response.headers.get('content-type') ?? '';
    if (!contentType.includes('json')) return undefined;
    return response.json();
};

export const request = async <T>(
    url: string,
    init?: RequestInit,
): Promise<T> => {
    let response: Response;

    try {
        response = await fetch(url, init);
    } catch (error) {
        const timedOut = error instanceof Error && error.name === 'AbortError';

        throw new ApiError({
            title: timedOut ? 'Request Timeout' : 'Network Error',
            status: timedOut ? 504 : 503,
            instance: url,
            extensions: {
                code: timedOut ? 'TIMEOUT_ERROR' : 'NETWORK_ERROR',
            },
        });
    }

    const data = await readJson(response);
    if (response.ok) return data as T;

    const parsed = problemDetailsSchema.safeParse(data);
    if (parsed.success) throw new ApiError(parsed.data);

    throw new ApiError({
        title: 'Unexpected API Error',
        status: response.status,
        instance: url,
        extensions: { code: 'UNEXPECTED_RESPONSE' },
    });
};

try {
    await request('/api/users', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(formData),
    });
} catch (error) {
    if (!(error instanceof ApiError)) throw error;

    if (error.isValidationError) {
        for (const item of error.validationErrors) {
            setFieldError(item.field, item.message);
        }
        return;
    }

    if (error.isUnauthorized) {
        navigate('/login');
        return;
    }

    showError('処理に失敗しました。', error.traceId);
}