Vue.jsとRailsでユーザ作成時の422 Unprocessable Entityエラー

エラー内容

RailsとVue.jsプロジェクトで、ユーザ登録機能を実装した際
「422 Unprocessable Entity」　というエラーが発生し登録できなかった。

エラーメッセージを検索してみたけれど、原因詳細はなかなか探せず。。。
と思っていたところ、下記参考記事を見つけて解決できた。感謝！！

渡したパラメータ

Started POST "/auth" for ::1 at 2022-02-06 21:41:56 +0900
Processing by Auth::RegistrationsController#create as HTML
  Parameters: {"name"=>"yyyyyy", "email"=>"[e-mail]", "password"=>"[FILTERED]", "password_confirmation"=>"[FILTERED]", "registration"=>{"name"=>"yyyyyy", "email"=>"[e-mail]", "password"=>"[FILTERED]", "password_confirmation"=>"[FILTERED]"}}
   (0.1ms)  begin transaction
  User Exists? (0.2ms)  SELECT 1 AS one FROM "users" WHERE LOWER("users"."email") = LOWER(?) AND "users"."provider" = ? LIMIT ?  [["email", "[e-mail]"], ["provider", "email"], ["LIMIT", 1]]
   (0.0ms)  rollback transaction

エラー

Completed 422 Unprocessable Entity in 262ms (Views: 0.2ms | ActiveRecord: 0.3ms | Allocations: 5646)

原因

• パスワードの入力規則を満たさない値を入力していた

解決方法

• ブラウザ検証ツールから、コンソールに出力したエラー詳細を読み取る

• 入力規則を満たす６文字以上のパスワードを入力

解決方法詳細

• ブラウザ検証ツールから、コンソールに出力したエラー詳細を読み取る

エラー発生当初、コンソールに表示された下記内容だけを見ていたが原因詳細は発見できず。

ブラウザ検証ツール [ネットワーク]タブ->[XHR]->[ぷれ]からエラー詳細を読み取る。

今回、Vue.jsにてasync/awaitを用いた非同期通信を行なっていたため、[XHR]を確認した。
パスワードが短かすぎる、という些細なエラーだった。。。。。

入力規則を満たす６文字以上のパスワードを入力して、無事解決！

最後に

コンソールに出力されたエラーメッセージだけをググっても原因がわからない時には、ブラウザの検証ツールを活用していくことの大切さが身にしみた経験だった。。。