メッセージ管理機能方針の策定

[rnakagawa16]

この Pull request で実施したこと

メッセージ管理機能としてフロントエンド側とバックエンド側のメッセージを管理するための機能を実装しました。

実装の追加点

メッセージ管理機能の追加

バックエンド

• メッセージコードをMaris側となるべく一致するよう修正
• ProblemDetails に従ったエラーレスポンスの作成
• 開発環境と本番環境での ProblemDetails の details プロパティの追加方法の修正

フロントエンド

• 多言語対応するメッセージファイルの作成
• ProblemDetails に従ったエラーレスポンスを画面に出力するためのトースト通知の修正

ドキュメントの追加点

• メッセージ管理方針の説明
  • ファイルの作成から、管理方法の説明
  • エラーメッセージコードの取り扱い
  • 多言語対応する場合の対応
• メッセージ管理機能の実装方法の説明
  • バックエンド・フロントエンド両方のメッセージファイルの作成方法
  • ファイルの読込からメッセージの取得方法までの手順
• 入力値検証機能の説明
  • vue-i18n を利用したメッセージ管理機能を適用した場合の実装方法の説明を追加
• 例外発生時のエラーレスポンスの説明
  • ProblemDetails の説明を追加

この Pull request では実施していないこと

なし。

Issues や Discussions 、関連する Web サイトなどへのリンク

後続タスク：

• フロントエンドのエラーレスポンス表示方法を修正する #1704
• ProblemDetails の detail プロパティに格納するデータの方針を定める #1711

[KentaHizume]

@rnakagawa16 @1nu1taichi
ただいま念のためMaris側に移植して動作するかどうかを確認しておりまして、
500エラーをcatchした際に下記のエラーによりトーストがうまく表示されない現象が発生しております。

SyntaxError: Invalid arguments (at vue-i18n.js?v=4947bbe0:244:17)
    at createCompileError (vue-i18n.js?v=4947bbe0:244:17)
    at createCoreError (vue-i18n.js?v=4947bbe0:1877:10)
    at parseTranslateArgs (vue-i18n.js?v=4947bbe0:3216:11)
    at translate (vue-i18n.js?v=4947bbe0:2994:26)
    at vue-i18n.js?v=4947bbe0:3690:46
    at wrapWithDeps (vue-i18n.js?v=4947bbe0:3651:13)
    at t (vue-i18n.js?v=4947bbe0:3690:12)
    at errorMessageFormat (error-message-format.ts:8:20)
    at Object.handle (custom-error-handler.ts:101:31)
    at Proxy.checkout (CheckoutView.vue?t=1734675398388:40:28) Proxy(Object) {_pStores: {…}, …} 'native event handler'

原因ですが、MarisのhttpError.responseがnullなわけではないので、
下記の箇所でelse以下の分岐に入ってerrorMessageFormatを呼び出すのですが、
exceptionIdはundefinedなのでエラーになってしまうようです。

      (httpError: HttpError) => {
        if (!httpError.response) {
          showToast(t('failedToOrderItems'));
        } else {
          // こちらの分岐に入る
          const message = errorMessageFormat(
            httpError.response.exceptionId, // これがundefined
            httpError.response.exceptionValues,
          );
          showToast(
            message,
            httpError.response.exceptionId,
            httpError.response.title,
            httpError.response.detail,
            httpError.response.status,
            100000,
          );
        }
      },

Marisの500のレスポンス例

{
    "type": "https://tools.ietf.org/html/rfc9110#section-15.6.1",
    "title": "Sequence contains no matching element",
    "status": 500,
    "detail": "at System.Linq.ThrowHelper.ThrowNoMatchException()… 略"
    "traceId": "00-3832ecb97c56cb46c4765989ce4d635c-84def15c005482d1-00"
}

[rnakagawa16]

@KentaHizume

以下の観点から、exceptionId が含まれているかというチェックに if 文を変更して対応しました。

• v1.1.0 で Maris 側も ProblemDetails に変更されること
• 暫定的な対応としてなるべく修正作業を少なくできること

[KentaHizume]

@KentaHizume

以下の観点から、exceptionId が含まれているかというチェックに if 文を変更して対応しました。

• v1.1.0 で Maris 側も ProblemDetails に変更されること
• 暫定的な対応としてなるべく修正作業を少なくできること

@rnakagawa16
ご対応いただきありがとうございます。
再度 Maris 側に移植して動作確認をし、
エラーをキャッチした際に想定通りトーストが表示されることを確認いたしました。