はじめに
Railsアプリを新規作成した時点では、404 Not Found
のエラーページは以下のようになっています。
エラーが出ているということは伝わりますが、すべて英語で書かれていて無骨な印象を受けます。404 Not Found
という文言も見当たらないため、一見してどういう内容のエラーなのかが伝わりにくいです。このようなエラーページではなく、もっとわかりやすいオリジナルのエラーページを実装することができます。
本記事では、Railsアプリでオリジナルのエラーページを実装する方法について説明します。
オリジナルのエラーページを実装
ルーティングの追加
config/routes.rb
の最後(end
の直前)に以下のルーティングを追記します。他のどのルーティングにも一致しないリクエストの場合はApplicationContoller
のrouting_error
アクションを実行するようにしています。
get '*not_found' => 'application#routing_error'
post '*not_found' => 'application#routing_error'
アクションの追加
app/controller/application_controller.rb
に以下を追記します。
class ApplicationController < ActionController::Base
unless Rails.env.development?
rescue_from Exception, with: :_render_500
rescue_from ActiveRecord::RecordNotFound, with: :_render_404
rescue_from ActionController::RoutingError, with: :_render_404
end
def routing_error
raise ActionController::RoutingError, params[:path]
end
private
def _render_404(e = nil)
logger.info "Rendering 404 with excaption: #{e.message}" if e
if request.format.to_sym == :json
render json: { error: "404 Not Found" }, status: :not_found
else
render "errors/404.html", status: :not_found, layout: "error"
end
end
def _render_500(e = nil)
logger.error "Rendering 500 with excaption: #{e.message}" if e
if request.format.to_sym == :json
render json: { error: "500 Internal Server Error" }, status: :internal_server_error
else
render "errors/500.html", status: :internal_server_error, layout: "error"
end
end
end
エラーページのレンダリングをしている箇所について、errors/404.html
のように必ず拡張子をつけるようにしてください。例えば/icon.gif
のようなリクエストがきた場合、レンダリングの指定ファイルの拡張子が省略されていると、リクエストの拡張子に基づいたerrors/404.gif
をレンダリングしようとしエラーになります。
より丁寧に以下のように書くこともできます。
respond_to do |format|
format.json { render json: { error: "404 Not Found" }, status: :not_found }
format.all { render file: 'errors/404.html', content_type: 'text/html', status: :not_found, layout: 'error' }
end
なお、開発環境でエラーページの確認をする場合は、Rails.env.development?
をRails.env.production?
に変えるか、条件文をコメントアウトするなどしてください。
ビューの追加
app/views/errors/
ディレクトリを作成し、その中に404.html.erb
と500.html.erb
を作成してください。また、レイアウトを指定している場合はapp/views/layouts/
ディレクトリ配下にerror.html.erb
を作成してください。
今回は以下のようなシンプルなエラーページを作成しました。
まとめ
普段はあまりユーザーの目に入らないエラーページですが、だからこそこだわってオリジナルのエラーページを実装していると「おっ」と思ってもらえるかもしれません。そんなに難しい作業ではないので、余裕があればぜひオリジナルのエラーページを実装してみましょう。
本記事を参考にして、オリジナルのエラーページを実装していただければと思います。