#90

Reviewed-on: #350

backend/app/controllers/application_controller.rb

@@ -1,4 +1,7 @@
 class ApplicationController < ActionController::API
+  rescue_from ActiveRecord::RecordInvalid, with: :render_record_invalid
+  rescue_from ActiveRecord::RecordNotUnique, with: :render_record_not_unique
+
   before_action :reject_banned_ip_address!
   before_action :authenticate_user
   before_action :reject_banned_user!
@@ -25,6 +28,42 @@ class ApplicationController < ActionController::API
     end
   end
 
+  def render_bad_request message = 'リクエストが不正です．', field: nil, code: :bad_request
+    render_error(:bad_request, message, field:, code:)
+  end
+
+  def render_unprocessable_entity message = '入力を確認してください．', field: nil, code: :invalid
+    render_error(:unprocessable_entity, message, field:, code:)
+  end
+
+  def render_error status, message, field: nil, code: status
+    error = { code: code.to_s, message: }
+    error[:field] = field.to_s if field.present?
+
+    render json: { errors: [error] }, status:
+  end
+
+  def render_model_errors record, status: :unprocessable_entity
+    errors =
+        record.errors.map do |error|
+          { code: error.type.to_s,
+            field: error.attribute.to_s,
+            message: error.full_message }
+        end
+
+    errors = [{ code: 'invalid', message: '入力を確認してください．' }] if errors.empty?
+
+    render json: { errors: }, status:
+  end
+
+  def render_record_invalid error
+    render_model_errors(error.record)
+  end
+
+  def render_record_not_unique _error = nil
+    render_unprocessable_entity('既に存在してゐます．', code: :taken)
+  end
+
   def reject_banned_ip_address!
     ip_address = IpAddress.find_by(ip_address: IPAddr.new(request.remote_ip).hton)
     return unless ip_address&.banned?
@@ -37,4 +76,28 @@ class ApplicationController < ActionController::API
 
     head :forbidden
   end
+
+  def render_validation_error record = nil, fields: { }, base: []
+    errors = { }
+
+    if record
+      record.errors.messages.each do |attr, messages|
+        errors[attr] ||= []
+        errors[attr].concat(messages)
+      end
+    end
+
+    fields.each do |attr, messages|
+      errors[attr] ||= []
+      errors[attr].concat(Array(messages))
+    end
+
+    base_errors = Array(base) - Array(errors.delete(:base))
+
+    render json: { type: 'validation_error',
+                   message: '入力内容を確認してください．',
+                   errors:,
+                   base_errors: },
+           status: :unprocessable_entity
+  end
 end

backend/app/controllers/deerjikists_controller.rb

@@ -2,7 +2,8 @@ class DeerjikistsController < ApplicationController
   def show
     platform = params[:platform].to_s.strip
     code = params[:code].to_s.strip
-    return head :bad_request if platform.blank? || code.blank?
+    return render_bad_request('platform は必須です．', field: :platform) if platform.blank?
+    return render_bad_request('code は必須です．', field: :code) if code.blank?
 
     deerjikist = Deerjikist
                  .joins(:tag)
@@ -22,7 +23,9 @@ class DeerjikistsController < ApplicationController
     platform = params[:platform].to_s.strip
     code = params[:code].to_s.strip
     tag_id = params[:tag_id].to_i
-    return head :bad_request if platform.blank? || code.blank? || tag_id <= 0
+    return render_bad_request('platform は必須です．', field: :platform) if platform.blank?
+    return render_bad_request('code は必須です．', field: :code) if code.blank?
+    return render_bad_request('tag_id が不正です．', field: :tag_id) if tag_id <= 0
 
     deerjikist = Deerjikist.find_or_initialize_by(platform:, code:).tap do |d|
       d.tag_id = tag_id
@@ -38,7 +41,8 @@ class DeerjikistsController < ApplicationController
 
     platform = params[:platform].to_s.strip
     code = params[:code].to_s.strip
-    return head :bad_request if platform.blank? || code.blank?
+    return render_bad_request('platform は必須です．', field: :platform) if platform.blank?
+    return render_bad_request('code は必須です．', field: :code) if code.blank?
 
     Deerjikist.find([platform, code]).destroy!
 

backend/app/controllers/materials_controller.rb

@@ -40,7 +40,8 @@ class MaterialsController < ApplicationController
     tag_name_raw = params[:tag].to_s.strip
     file = params[:file]
     url = params[:url].to_s.strip.presence
-    return head :bad_request if tag_name_raw.blank? || (file.blank? && url.blank?)
+    return render_bad_request('タグは必須です．', field: :tag) if tag_name_raw.blank?
+    return render_bad_request('ファイルまたは URL は必須です．') if file.blank? && url.blank?
 
     tag_name = TagName.find_undiscard_or_create_by!(name: tag_name_raw)
     tag = tag_name.tag
@@ -54,7 +55,7 @@ class MaterialsController < ApplicationController
     if material.save
       render json: MaterialRepr.base(material, host: request.base_url), status: :created
     else
-      render json: { errors: material.errors.full_messages }, status: :unprocessable_entity
+      render_model_errors(material)
     end
   end
 
@@ -68,7 +69,8 @@ class MaterialsController < ApplicationController
     tag_name_raw = params[:tag].to_s.strip
     file = params[:file]
     url = params[:url].to_s.strip.presence
-    return head :bad_request if tag_name_raw.blank? || (file.blank? && url.blank?)
+    return render_bad_request('タグは必須です．', field: :tag) if tag_name_raw.blank?
+    return render_bad_request('ファイルまたは URL は必須です．') if file.blank? && url.blank?
 
     tag_name = TagName.find_undiscard_or_create_by!(name: tag_name_raw)
     tag = tag_name.tag
@@ -84,7 +86,7 @@ class MaterialsController < ApplicationController
     if material.save
       render json: MaterialRepr.base(material, host: request.base_url)
     else
-      render json: { errors: material.errors.full_messages }, status: :unprocessable_entity
+      render_model_errors(material)
     end
   end
 

backend/app/controllers/nico_tags_controller.rb

@@ -30,12 +30,14 @@ class NicoTagsController < ApplicationController
     id = params[:id].to_i
 
     tag = Tag.find(id)
-    return head :bad_request unless tag.nico?
+    return render_bad_request('ニコニコ・タグを指定してください．', field: :id) unless tag.nico?
 
     linked_tag_names = params[:tags].to_s.split
     linked_tags = Tag.normalise_tags!(linked_tag_names, with_tagme: false,
                                                         with_no_deerjikist: false)
-    return head :bad_request if linked_tags.any? { |t| t.nico? }
+    if linked_tags.any? { |t| t.nico? }
+      return render_bad_request('ニコニコ・タグ同士は連携できません．', field: :tags)
+    end
 
     ApplicationRecord.transaction do
       TagVersioning.record_tag_snapshots!(linked_tags, created_by_user: current_user)

backend/app/controllers/posts_controller.rb

@@ -148,11 +148,11 @@ class PostsController < ApplicationController
     post.reload
     render json: PostRepr.base(post), status: :created
   rescue Tag::NicoTagNormalisationError
-    head :bad_request
+    render_bad_request('ニコニコ・タグは直接指定できません．', field: :tags)
   rescue ArgumentError => e
-    render json: { errors: [e.message] }, status: :unprocessable_entity
+    render_unprocessable_entity(e.message)
   rescue ActiveRecord::RecordInvalid => e
-    render json: { errors: e.record.errors.full_messages }, status: :unprocessable_entity
+    render_model_errors(e.record)
   end
 
   def viewed
@@ -175,10 +175,10 @@ class PostsController < ApplicationController
 
     force = bool?(:force)
     merge = bool?(:merge)
-    return head :bad_request if force && merge
+    return render_bad_request('force と merge は同時に指定できません．') if force && merge
 
     base_version_no = parse_base_version_no
-    return head :bad_request if !(force) && !(base_version_no)
+    return render_bad_request('base_version_no は必須です．', field: :base_version_no) if !(force) && !(base_version_no)
 
     title = params[:title].presence
     tag_names = params[:tags].to_s.split
@@ -238,11 +238,11 @@ class PostsController < ApplicationController
     json['tags'] = build_tag_tree_for(post.tags)
     render json:, status: :ok
   rescue Tag::NicoTagNormalisationError
-    head :bad_request
+    render_bad_request('ニコニコ・タグは直接指定できません．', field: :tags)
   rescue ArgumentError => e
-    render json: { errors: [e.message] }, status: :unprocessable_entity
+    render_validation_error(fields: { parent_post_ids: [e.message] })
   rescue ActiveRecord::RecordInvalid => e
-    render json: { errors: e.record.errors.full_messages }, status: :unprocessable_entity
+    render_validation_error(e.record)
   end
 
   def changes
@@ -416,7 +416,7 @@ class PostsController < ApplicationController
 
   def sync_parent_posts! post, parent_post_ids
     if parent_post_ids.include?(post.id)
-      post.errors.add(:base, '自分自身を親投稿にはできません．')
+      post.errors.add(:parent_post_ids, '自分自身を親投稿にはできません．')
       raise ActiveRecord::RecordInvalid, post
     end
 

backend/app/controllers/preview_controller.rb

@@ -4,7 +4,7 @@ class PreviewController < ApplicationController
     return head :unauthorized unless current_user
 
     url = params[:url]
-    return head :bad_request unless url.present?
+    return render_bad_request('URL は必須です．', field: :url) unless url.present?
 
     unless url.start_with?(/http(s)?:\/\//)
       url = 'http://' + url
@@ -16,7 +16,7 @@ class PreviewController < ApplicationController
 
     render json: { title: title }
   rescue => e
-    render json: { error: e.message }, status: :bad_request
+    render_bad_request(e.message, field: :url)
   end
 
   def thumbnail
@@ -25,7 +25,7 @@ class PreviewController < ApplicationController
     return head :unauthorized unless current_user
 
     url = params[:url]
-    return head :bad_request if url.blank?
+    return render_bad_request('URL は必須です．', field: :url) if url.blank?
 
     unless url.start_with?(/http(s)?:\/\//)
       url = 'http://' + url
@@ -40,7 +40,8 @@ class PreviewController < ApplicationController
       File.delete(path) rescue nil
       send_file image.path, type: 'image/png', disposition: 'inline'
     else
-      render json: { error: 'Failed to generate thumbnail' }, status: :internal_server_error
+      render_error(:internal_server_error, 'サムネールを生成できませんでした．',
+                   code: :thumbnail_generation_failed)
     end
   end
 end

backend/app/controllers/tag_children_controller.rb

@@ -5,11 +5,12 @@ class TagChildrenController < ApplicationController
 
     parent_id = params[:parent_id]
     child_id = params[:child_id]
-    return head :bad_request if parent_id.blank? || child_id.blank?
+    return render_bad_request('parent_id は必須です．', field: :parent_id) if parent_id.blank?
+    return render_bad_request('child_id は必須です．', field: :child_id) if child_id.blank?
 
     parent = Tag.find(parent_id)
     child = Tag.find(child_id)
-    return head :bad_request if parent.nico? || child.nico?
+    return render_bad_request('ニコニコ・タグの階層は変更できません．') if parent.nico? || child.nico?
 
     ApplicationRecord.transaction do
       TagVersioning.ensure_snapshot!(child, created_by_user: current_user)
@@ -27,11 +28,12 @@ class TagChildrenController < ApplicationController
 
     parent_id = params[:parent_id]
     child_id = params[:child_id]
-    return head :bad_request if parent_id.blank? || child_id.blank?
+    return render_bad_request('parent_id は必須です．', field: :parent_id) if parent_id.blank?
+    return render_bad_request('child_id は必須です．', field: :child_id) if child_id.blank?
 
     parent = Tag.find(parent_id)
     child = Tag.find(child_id)
-    return head :bad_request if parent.nico? || child.nico?
+    return render_bad_request('ニコニコ・タグの階層は変更できません．') if parent.nico? || child.nico?
 
     ApplicationRecord.transaction do
       TagVersioning.ensure_snapshot!(child, created_by_user: current_user)

backend/app/controllers/tags_controller.rb

@@ -168,7 +168,7 @@ class TagsController < ApplicationController
 
   def show_by_name
     name = params[:name].to_s.strip
-    return head :bad_request if name.blank?
+    return render_bad_request('name は必須です．', field: :name) if name.blank?
 
     tag = Tag.joins(:tag_name)
              .includes(:tag_name, :materials, tag_name: :wiki_page)
@@ -192,7 +192,7 @@ class TagsController < ApplicationController
 
   def deerjikists_by_name
     name = params[:name].to_s.strip
-    return head :bad_request if name.blank?
+    return render_bad_request('name は必須です．', field: :name) if name.blank?
 
     tag = Tag.joins(:tag_name)
              .includes(:tag_name, tag_name: :wiki_page)
@@ -228,7 +228,7 @@ class TagsController < ApplicationController
 
   def materials_by_name
     name = params[:name].to_s.strip
-    return head :bad_request if name.blank?
+    return render_bad_request('name は必須です．', field: :name) if name.blank?
 
     tag = Tag.joins(:tag_name)
              .includes(:tag_name, :materials, tag_name: :wiki_page)
@@ -247,17 +247,16 @@ class TagsController < ApplicationController
 
     name = params[:name].to_s.strip
     category = params[:category].to_s.strip
-    return head :unprocessable_entity if name.blank? || category.blank?
+    return render_unprocessable_entity('名前は必須です．', field: :name) if name.blank?
+    return render_unprocessable_entity('カテゴリは必須です．', field: :category) if category.blank?
 
     if name != tag.name &&
         tag.in?([Tag.tagme, Tag.bot, Tag.no_deerjikist, Tag.video, Tag.niconico])
-      return render json: { error: 'システム・タグの名称は変更できません．' },
+      return render_unprocessable_entity('システム・タグの名称は変更できません．', field: :name)
-                    status: :unprocessable_entity
     end
 
     if tag.nico? || category == 'nico'
-      return render json: { error: 'ニコタグは変更できません．' },
+      return render_unprocessable_entity('ニコタグは変更できません．', field: :category)
-                    status: :unprocessable_entity
     end
 
     alias_names = params[:aliases].to_s.split.uniq
@@ -302,8 +301,7 @@ class TagsController < ApplicationController
     tag = Tag.find(params[:id])
 
     if tag.nico? || (category.present? && category == 'nico')
-      return render json: { error: 'ニコタグは変更できません．' },
+      return render_unprocessable_entity('ニコタグは変更できません．', field: :category)
-                    status: :unprocessable_entity
     end
 
     ApplicationRecord.transaction do

backend/app/controllers/theatre_comments_controller.rb

@@ -15,7 +15,7 @@ class TheatreCommentsController < ApplicationController
     return head :unauthorized unless current_user
 
     content = params[:content]
-    return head :unprocessable_entity if content.blank?
+    return render_unprocessable_entity('本文は必須です．', field: :content) if content.blank?
 
     theatre = Theatre.find_by(id: params[:theatre_id])
     return head :not_found unless theatre

backend/app/controllers/users_controller.rb

@@ -42,12 +42,12 @@ class UsersController < ApplicationController
     return head :unauthorized if user&.id != params[:id].to_i
 
     name = params[:name]
-    return head :bad_request if name.blank?
+    return render_bad_request('名前は必須です．', field: :name) if name.blank?
 
     if user.update(name:)
       render json: user.slice(:id, :name, :inheritance_code, :role), status: :ok
     else
-      render json: user.errors, status: :unprocessable_entity
+      render_model_errors(user)
     end
   end
 

backend/app/controllers/wiki_pages_controller.rb

@@ -46,7 +46,7 @@ class WikiPagesController < ApplicationController
 
   def diff
     id = params[:id]
-    return head :bad_request if id.blank?
+    return render_bad_request('id は必須です．', field: :id) if id.blank?
 
     from = params[:from].presence
     to = params[:to].presence
@@ -56,7 +56,7 @@ class WikiPagesController < ApplicationController
     from_rev = from && page.wiki_revisions.find(from)
     to_rev = to ? page.wiki_revisions.find(to) : page.current_revision
     if ((from_rev && !(from_rev.content?)) || !(to_rev&.content?))
-      return head :unprocessable_entity
+      return render_unprocessable_entity('差分を表示できない版です．')
     end
 
     diffs = Diff::LCS.sdiff(from_rev&.body&.lines || [], to_rev.body.lines)
@@ -89,7 +89,8 @@ class WikiPagesController < ApplicationController
     body = params[:body].to_s
     message = params[:message].presence
 
-    return head :unprocessable_entity if title.blank? || body.blank?
+    return render_unprocessable_entity('タイトルは必須です．', field: :title) if title.blank?
+    return render_unprocessable_entity('本文は必須です．', field: :body) if body.blank?
 
     tag_name = TagName.find_undiscard_or_create_by!(name: title)
 
@@ -101,8 +102,10 @@ class WikiPagesController < ApplicationController
             message:)
 
     render json: WikiPageRepr.base(page), status: :created
-  rescue ActiveRecord::RecordInvalid, ActiveRecord::RecordNotUnique
+  rescue ActiveRecord::RecordInvalid => e
-    head :unprocessable_entity
+    render_model_errors(e.record)
+  rescue ActiveRecord::RecordNotUnique
+    render_record_not_unique
   end
 
   def update
@@ -112,7 +115,8 @@ class WikiPagesController < ApplicationController
     title = params[:title]&.strip
     body = params[:body].to_s
 
-    return head :unprocessable_entity if title.blank? || body.blank?
+    return render_unprocessable_entity('タイトルは必須です．', field: :title) if title.blank?
+    return render_unprocessable_entity('本文は必須です．', field: :body) if body.blank?
 
     page = WikiPage.find(params[:id])
     base_revision_id = params[:base_revision_id].presence

backend/spec/requests/error_responses_spec.rb

@@ -0,0 +1,47 @@
+require 'rails_helper'
+
+RSpec.describe 'error responses', type: :request do
+  describe 'manual input errors' do
+    it 'returns a stable errors array for bad requests' do
+      user = create(:user)
+      sign_in_as(user)
+
+      put "/users/#{ user.id }", params: { name: '   ' }
+
+      expect(response).to have_http_status(:bad_request)
+      expect(json.fetch('errors')).to contain_exactly(
+          include('code' => 'bad_request',
+                  'field' => 'name',
+                  'message' => be_present))
+    end
+
+    it 'returns a stable errors array for unprocessable requests' do
+      member = create(:user, :member)
+      tag = create(:tag, :general, name: 'error_response_tag')
+      sign_in_as(member)
+
+      patch "/tags/#{ tag.id }", params: { category: 'nico' }
+
+      expect(response).to have_http_status(:unprocessable_entity)
+      expect(json.fetch('errors')).to contain_exactly(
+          include('code' => 'invalid',
+                  'field' => 'category',
+                  'message' => be_present))
+    end
+  end
+
+  describe 'model validation errors' do
+    it 'returns field, code, and message for model errors' do
+      user = create(:user)
+      sign_in_as(user)
+
+      put "/users/#{ user.id }", params: { name: 'a' * 256 }
+
+      expect(response).to have_http_status(:unprocessable_entity)
+      expect(json.fetch('errors')).to include(
+          include('code' => 'too_long',
+                  'field' => 'name',
+                  'message' => be_present))
+    end
+  end
+end

frontend/src/components/PostEditForm.tsx

@@ -2,17 +2,23 @@ import { useEffect, useState } from 'react'
 
 import PostFormTagsArea from '@/components/PostFormTagsArea'
 import PostOriginalCreatedTimeField from '@/components/PostOriginalCreatedTimeField'
+import FieldError from '@/components/common/FieldError'
 import Label from '@/components/common/Label'
 import { useDialogue } from '@/components/dialogues/DialogueProvider'
 import { Button } from '@/components/ui/button'
 import { toast } from '@/components/ui/use-toast'
 import { isApiError } from '@/lib/api'
+import { extractValidationError } from '@/lib/apiErrors'
 import { updatePost } from '@/lib/posts'
 
 import type { FC, FormEvent } from 'react'
 
+import type { FieldErrors } from '@/lib/apiErrors'
 import type { Post, Tag } from '@/types'
 
+type PostFormField =
+    'parentPostId' | 'tags' | 'originalCreatedFrom' | 'originalCreatedBefore'
+
 
 const tagsToStr = (tags: Tag[]): string => {
   const result: Tag[] = []
@@ -34,7 +40,9 @@ type Props = { post:    Post
 
 
 const PostEditForm: FC<Props> = ({ post, onSave }) => {
+  const [baseErrors, setBaseErrors] = useState<string[]> ([])
   const [disabled, setDisabled] = useState (false)
+  const [fieldErrors, setFieldErrors] = useState<FieldErrors> ({ })
   const [originalCreatedBefore, setOriginalCreatedBefore] =
       useState<string | null> (post.originalCreatedBefore)
   const [originalCreatedFrom, setOriginalCreatedFrom] =
@@ -47,6 +55,9 @@ const PostEditForm: FC<Props> = ({ post, onSave }) => {
   const dialogue = useDialogue ()
 
   const update = async (...args: Parameters<typeof updatePost>) => {
+    setFieldErrors ({ })
+    setBaseErrors ([])
+
     try
     {
       const data = await updatePost (...args)
@@ -67,7 +78,18 @@ const PostEditForm: FC<Props> = ({ post, onSave }) => {
 
       if (response?.status !== 409)
 	{
-	  toast ({ description: '更新はできなかったよ……' })
+	  const validationError = extractValidationError (e)
+
+	  if (validationError)
+	    {
+	      setFieldErrors (validationError.fieldErrors)
+	      setBaseErrors (validationError.baseErrors)
+	      toast ({ description: '更新はできなかったよ……' })
+	      return
+	    }
+
+	  toast ({ title: '失敗……', description: '入力を確認してください．' })
+
 	  return
 	}
 
@@ -142,13 +164,15 @@ const PostEditForm: FC<Props> = ({ post, onSave }) => {
 	      value={parentPostIds}
 	      onChange={e => setParentPostIds (e.target.value)}
 	      className="w-full border p-2 rounded"/>
+	  <FieldError messages={fieldErrors.url}/>
 	</div>
 
 	{/* タグ */}
 	<PostFormTagsArea
 	    disabled={disabled}
 	    tags={tags}
-	    setTags={setTags}/>
+	    setTags={setTags}
+	    errors={fieldErrors.tags}/>
 
 	{/* オリジナルの作成日時 */}
 	<PostOriginalCreatedTimeField
@@ -156,7 +180,9 @@ const PostEditForm: FC<Props> = ({ post, onSave }) => {
 	    originalCreatedFrom={originalCreatedFrom}
 	    setOriginalCreatedFrom={setOriginalCreatedFrom}
 	    originalCreatedBefore={originalCreatedBefore}
-	    setOriginalCreatedBefore={setOriginalCreatedBefore}/>
+	    setOriginalCreatedBefore={setOriginalCreatedBefore}
+	    fromErrors={fieldErrors.originalCreatedFrom}
+	    beforeErrors={fieldErrors.originalCreatedBefore}/>
 
 	{/* 送信 */}
 	<Button

frontend/src/components/PostFormTagsArea.tsx

@@ -3,6 +3,7 @@
 import { useRef, useState } from 'react'
 
 import TagSearchBox from '@/components/TagSearchBox'
+import FieldError from '@/components/common/FieldError'
 import Label from '@/components/common/Label'
 import TextArea from '@/components/common/TextArea'
 import { apiGet } from '@/lib/api'
@@ -33,10 +34,11 @@ const replaceToken = (value: string, start: number, end: number, text: string) =
 
 type Props = Omit<ComponentPropsWithoutRef<'textarea'>, 'value' | 'onChange' | 'onBlur'> & {
     tags:     string
-    setTags:  (tags: string) => void }
+    setTags:  (tags: string) => void
+    errors?:  string[] }
 
 
-const PostFormTagsArea: FC<Props> = ({ tags, setTags, ...rest }) => {
+const PostFormTagsArea: FC<Props> = ({ tags, setTags, errors, ...rest }) => {
   const ref = useRef<HTMLTextAreaElement> (null)
 
   const [bounds, setBounds] = useState<{ start: number; end: number }> ({ start: 0, end: 0 })
@@ -96,6 +98,7 @@ const PostFormTagsArea: FC<Props> = ({ tags, setTags, ...rest }) => {
 			     : [] as Tag[]}
 		activeIndex={-1}
 		onSelect={handleTagSelect}/>)}
+	<FieldError messages={errors}/>
       </div>)
 }
 

frontend/src/components/PostOriginalCreatedTimeField.tsx

@@ -9,7 +9,9 @@ type Props = {
     originalCreatedFrom:      string | null
     setOriginalCreatedFrom:   (x: string | null) => void
     originalCreatedBefore:    string | null
-    setOriginalCreatedBefore: (x: string | null) => void }
+    setOriginalCreatedBefore: (x: string | null) => void
+    fromErrors?:              string[]
+    beforeErrors?:            string[] }
 
 
 const PostOriginalCreatedTimeField: FC<Props> = ({ disabled,
@@ -19,6 +21,7 @@ const PostOriginalCreatedTimeField: FC<Props> = ({ disabled,
 		   setOriginalCreatedBefore }) => (
     <div>
       <Label>オリジナルの作成日時</Label>
+
       <div className="my-1 flex">
 	<div className="w-80">
 	  <DateTimeField
@@ -51,6 +54,8 @@ const PostOriginalCreatedTimeField: FC<Props> = ({ disabled,
 	  </Button>
 	</div>
       </div>
+      <FieldError messages={fromErrors}/>
+
       <div className="my-1 flex">
 	<div className="w-80">
 	  <DateTimeField
@@ -71,6 +76,7 @@ const PostOriginalCreatedTimeField: FC<Props> = ({ disabled,
 	  </Button>
 	</div>
       </div>
+      <FieldError messages={beforeErrors}/>
     </div>)
 
 export default PostOriginalCreatedTimeField

frontend/src/components/common/FieldError.tsx

@@ -0,0 +1,17 @@
+import type { FC } from 'react'
+
+type Props = { messages?: string[] }
+
+
+export const FieldError: FC<Props> = ({ messages }: Props) => {
+  if (!(messages?.length))
+    return null
+
+  return (
+      <ul className="mt-1 space-y-1 text-red-600 dark:text-red-400">
+	{messages.map ((message, i) => <li key={i}>{message}</li>)}
+      </ul>)
+}
+
+
+export default FieldError

frontend/src/lib/apiErrors.ts

@@ -0,0 +1,30 @@
+import toCamel from 'camelcase-keys'
+
+import { isApiError } from '@/lib/api'
+
+export type FieldErrors = Partial<Record<string, string[]>>
+
+export type ValidationError = { message:      string
+				fieldErrors:  FieldErrors
+				baseErrors:   string[] }
+
+type RawValidationError = { type?:        string
+			    message?:     string
+			    errors?:      Record<string, string[]>
+			    baseErrors?:  string[] }
+
+
+export const extractValidationError = (err: unknown) => {
+  if (!(isApiError (err)) || err.response?.status !== 422)
+    return null
+
+  const data = toCamel ((err.response.data ?? { }) as Record<string, unknown>,
+			{ deep: true }) as RawValidationError
+
+  if (data.type !== 'validation_error' && !(data.errors))
+    return null
+
+  return { message: data.message ?? '入力内容を確認してください．',
+	   fieldErrors: (data.errors ?? { }) as FieldErrors,
+	   baseErrors: data.baseErrors ?? [] }
+}

frontend/src/pages/posts/PostDetailPage.tsx

@@ -3,7 +3,6 @@ import { motion } from 'framer-motion'
 import { useEffect, useRef, useState } from 'react'
 import { Helmet } from 'react-helmet-async'
 import { useParams } from 'react-router-dom'
-
 import PostEditForm from '@/components/PostEditForm'
 import PostEmbed from '@/components/PostEmbed'
 import PostList from '@/components/PostList'