フロントエンドのエラーレスポンス表示方法を修正する

[rnakagawa16]

概要

現在、 Maia と Maris でバックエンド側のエラーレスポンスに ProblemDetails を含める実装になっているか否かが異なっているため、
フロントエンド側のエラーレスポンス表示部分の実装がどちらも対応できるような形で修正されている。
Maris 側で ProblemDetails を含めたエラーレスポンス出力機能が実装された場合、上記の対応を ProblemDetails が含まれる場合のケースに統一して実装する必要がある。

詳細 / 機能詳細（オプション）

現在のフロントエンド側の実装は以下のとおりである。

const update = async (catalogItemId: number, newQuantity: number) => {
  try {
    await updateItemInBasket(catalogItemId, newQuantity);
  } catch (error) {
    customErrorHandler.handle(
      error,
      () => {},
      (httpError: HttpError) => {
        if (!httpError.response) {
          showToast(t('failedToChangeQuantities'));
        } else {
          const message = errorMessageFormat(
            httpError.response.exceptionId,
            httpError.response.exceptionValues,
          );
          showToast(
            message,
            httpError.response.exceptionId,
            httpError.response.title,
            httpError.response.detail,
            httpError.response.status,
            100000,
          );
        }
      },
    );
  }
};

この部分をshowToastの引数をhttpError.responseとして以下のように実装する。

const update = async (catalogItemId: number, newQuantity: number) => {
  try {
    await updateItemInBasket(catalogItemId, newQuantity);
  } catch (error) {
    customErrorHandler.handle(
      error,
      () => {},
      (httpError: HttpError) => {
          showToast(httpError.response);
        }
      },
    );
  }
};

export function showToast(
  response: ProblemDetails = null,
  timeout: number = 5000,
) {
  const notificationStore = useNotificationStore();
  const message = errorMessageFormat(
  response.exceptionId,
  response.exceptionValues,
  );
  notificationStore.setMessage(message, response.title, response.status, ...);
}

完了条件

• トースト通知に ProblemDetails の情報が正しく出力されること
• 必要のないメッセージがjsonファイルに残っていないこと

[rnakagawa16]

カスタムエラーのレスポンスのインターフェイス

現在はインターフェイスを自作しているが、これは ProblemDetailsの自動生成クラスがMarisのバックエンド側で定義されていないためである。
Maris側のエラーレスポンスが整形されたのちに修正する。

export class HttpError extends CustomErrorBase {
  response?: ProblemDetails | null;

  constructor(
    message: string,
    cause?: Error & { response?: { data?: ProblemDetails } },
  ) {
    super(message, cause);
    this.response = cause?.response?.data ?? null;
    this.name = 'HttpError';
  }
}

// 削除予定 -> 自動生成されたproblem-detail.ts のインターフェイスを利用することになる
interface ProblemDetails {
  detail: string;
  exceptionId: string;
  exceptionValues: string[];
  instance: string;
  status: number;
  title: string;
  type: string;
}