【Rails7】動的なカスタムエラー画面を作成し、共通デザインを適用する（400/401/403/404/429/500/503）

はじめに

Railsアプリケーションは、エラーが発生した際にユーザーにフィードバックを提供するためのデフォルトエラーページをいくつか用意している。

ただ、ユーザーエクスペリエンスの観点から見ると、エラー文言、デザインに関してカスタマイズの余地があり、今回プロジェクトの開発でエラー画面のカスタマイズを行なったので、備忘録的にカスタムエラー画面の作成について記載。

カスタムエラーページの設定方法

静的/動的なエラーページの違い

Railsのエラーページはデフォルトでは、静的ファイルでpublicディレクトリに配置されている。publicディレクトリは、静的ファイル（画像、CSS、JavaScriptファイルなど）を格納するための場所であり、Railsアプリケーションが起動するサーバーから直接アクセスされるファイルが配置される。

静的なエラーページを設定する場合は、404（Not Found）、500（Internal Server Error）など、一般的なHTTPステータスコードに対応するカスタムエラーページを作成し、それぞれ404.html、500.htmlといった名前でpublicディレクトリに保存する。

ただ、今回は静的なHTMLエラーページではなく、Railsのビューレンダリングシステムを利用した動的なエラーページを提供する場合で記載する。

動的なエラーページの設定方法

エラーハンドリングのコントローラを作成

まず、エラーページ用のコントローラを作成する。

# app/controllers/errors_controller.rb

class ErrorsController < ApplicationController
  def not_found
    render(:status => 404)
  end

  def internal_server_error
    render(:status => 500)
  end
end

エラービューの作成

各エラーに対応するビューをapp/views/errorsディレクトリに作成する。例えば、404エラーと500エラーに対応するビューファイルは下記のようになる。

• app/views/errors/not_found.html.erb

• app/views/errors/internal_server_error.html.erb

ルーティングの設定

config/routes.rbファイルにエラーページへのルートを追加する。また、アプリケーションが存在しないルートにアクセスされた際に404エラーを表示するように設定することができる。

# config/routes.rb

Rails.application.routes.draw do
  # 既存のルート定義

  # カスタムエラーページ用のルート
  get '/404', to: 'errors#not_found', as: :not_found
  get '/500', to: 'errors#internal_server_error', as: :internal_server_error

  # すべての未知のルートを404エラーページへリダイレクト
  match '*path', to: 'errors#not_found', via: :all
end

Application Configの設定

config/application.rbまたは環境固有の設定ファイル（例：config/environments/production.rb）で、、、、

続きは、こちらで記載しています。

【Rails7】動的なカスタムエラー画面を作成し、共通デザインを適用する（400/401/403/404/429/500/503）