ASP.NET CoreとReactでAPIエラーの形式と処理を統一する

{ "message": "データが見つかりません" }

{
  "error": true,
  "errorCode": "NOT_FOUND"
}

{
  "type": "https://api.example.com/problems/article-not-found",
  "title": "Resource Not Found",
  "status": 404,
  "detail": null,
  "instance": "/api/articles/42",
  "code": "ARTICLE_NOT_FOUND",
  "traceId": "0HNB7M8T2A1F3:00000001"
}

public abstract class ApiException(string code, string message)
    : Exception(message)
{
    public string Code { get; } = code;
}

public sealed class ArticleNotFoundException(Guid articleId)
    : ApiException(
        "ARTICLE_NOT_FOUND",
        $"Article '{articleId}' was not found."
    );

public sealed class PreconditionFailedException()
    : ApiException(
        "PRECONDITION_FAILED",
        "The resource has already been updated."
    );

using Microsoft.AspNetCore.Mvc;

public static class ApiProblemFactory
{
    public static ProblemDetails Create(
        HttpContext context,
        Exception exception
    )
    {
        return exception switch
        {
            ArticleNotFoundException error => CreateProblem(
                context,
                StatusCodes.Status404NotFound,
                "Resource Not Found",
                error.Code
            ),
            PreconditionFailedException error => CreateProblem(
                context,
                StatusCodes.Status412PreconditionFailed,
                "Precondition Failed",
                error.Code
            ),
            UnauthorizedAccessException => CreateProblem(
                context,
                StatusCodes.Status401Unauthorized,
                "Unauthorized",
                "UNAUTHORIZED"
            ),
            _ => CreateProblem(
                context,
                StatusCodes.Status500InternalServerError,
                "System Error",
                "SYSTEM_ERROR"
            ),
        };
    }

    private static ProblemDetails CreateProblem(
        HttpContext context,
        int status,
        string title,
        string code
    )
    {
        var problem = new ProblemDetails
        {
            Type = $"https://api.example.com/problems/{code.ToLowerInvariant()}",
            Title = title,
            Status = status,
            Instance = context.Request.Path,
        };

        problem.Extensions["code"] = code;
        problem.Extensions["traceId"] = context.TraceIdentifier;

        return problem;
    }
}

using Microsoft.AspNetCore.Diagnostics;

public sealed class GlobalExceptionHandler(
    ILogger<GlobalExceptionHandler> logger
) : IExceptionHandler
{
    public async ValueTask<bool> TryHandleAsync(
        HttpContext context,
        Exception exception,
        CancellationToken cancellationToken
    )
    {
        var problem = ApiProblemFactory.Create(context, exception);

        if (problem.Status >= StatusCodes.Status500InternalServerError)
        {
            logger.LogError(
                exception,
                "Unhandled exception. TraceId: {TraceId}",
                context.TraceIdentifier
            );
        }

        context.Response.StatusCode =
            problem.Status ?? StatusCodes.Status500InternalServerError;
        context.Response.ContentType = "application/problem+json";

        await context.Response.WriteAsJsonAsync(
            problem,
            cancellationToken
        );

        return true;
    }
}

builder.Services.AddExceptionHandler<GlobalExceptionHandler>();
builder.Services.AddProblemDetails();

var app = builder.Build();

app.UseExceptionHandler();

{
  "type": "https://api.example.com/problems/validation-failed",
  "title": "Validation Failed",
  "status": 400,
  "instance": "/api/articles",
  "code": "VALIDATION_FAILED",
  "traceId": "0HNB7M8T2A1F3:00000002",
  "errors": [
    {
      "field": "title",
      "code": "MAX_LENGTH",
      "message": "タイトルは100文字以内で入力してください"
    }
  ]
}

export type ValidationError = {
  field: string;
  code: string;
  message: string;
};

export type ApiProblem = {
  type?: string;
  title?: string;
  status?: number;
  detail?: string;
  instance?: string;
  code: string;
  traceId?: string;
  errors?: ValidationError[];
};

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

  get status() {
    return this.problem.status;
  }

  get code() {
    return this.problem.code;
  }

  get traceId() {
    return this.problem.traceId?.trim() || undefined;
  }

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

export const request = async <T>(
  input: RequestInfo | URL,
  init?: RequestInit,
): Promise<T> => {
  const response = await fetch(input, init);

  if (!response.ok) {
    const contentType = response.headers.get('content-type');

    if (contentType?.includes('application/problem+json')) {
      const problem = (await response.json()) as ApiProblem;
      throw new ApiError(problem);
    }

    throw new Error(`API request failed: ${response.status}`);
  }

  return response.json() as Promise<T>;
};

import { QueryClient } from '@tanstack/react-query';
import { ApiError } from './apiError';

export const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      retry: (failureCount, error) => {
        if (
          error instanceof ApiError &&
          error.status !== undefined &&
          error.status < 500
        ) {
          return false;
        }

        return failureCount < 3;
      },
    },
  },
});