Cuộc sống Nhật Bản
Yuto Blog

Ruby on Railsでカスタム404、500エラーページを作成する方法 - 完全ガイド

Mua ngay trả dần cùng Muadee iOS
Nội dung chính

Ruby on Railsにおける標準のエラーページとは

問題が発生した場合に表示されるページで、Ruby on Railsでは、様々な種類のエラーに対応するエラーページが標準で提供されています。

404エラーは、クライアントエラーを示し、通常はユーザーの要求が正しくないことを示します。一方、500エラーはサーバーエラーを示し、アプリケーションが要求を処理するのに問題があることを示します。

Railsのデフォルトのエラーページは、以下のようなものです。

404エラー

スクリーンショット 2023-08-05 10.52.54.png

50xエラー

スクリーンショット 2023-08-05 10.53.34.png

カスタムエラーページが必要な理由

カスタムエラーページを使用すると、ユーザー体験を向上させることができます。例えば、ブランドのスタイルに合わせたデザインや、ユーザーが次に何をすべきかを示す役立つ情報を提供することが可能です。

Ruby on Railsでのカスタム404エラーページの作成方法

カスタム404エラーページを作成するための手順は非常にシンプルです。以下に、実装に必要なコードを示します。

レイアウト

まず、エラーページ用のレイアウトを設定します。内容としては= yieldぐらいで十分です。

Copy app/views/layouts/error.html.slim
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
doctype html

html lang='en'
  head
    meta charset='utf-8'
    meta name="viewport" content="width=device-width,initial-scale=1"

    title Error

    = csrf_meta_tags
    = csp_meta_tag
    = favicon_link_tag 'favicon.ico'

    = vite_client_tag
    = vite_javascript_tag 'application'

  body
    = yield

コントローラー

次に、新たなエラーページを管理するアクションとそれに対応するビューを作成します。以下のコードスニペットは、カスタム404エラーページをレンダリングするためのアクションとビューを示しています:

Copy app/controllers/application_controller.rb
1
2
3
4
5
6
7
8
9
class ApplicationController < ActionController::Base
  rescue_from ActiveRecord::RecordNotFound, with: :render404

  def render404(error = nil)
    Rails.logger.error("❌#{error.message}") if error
    render template: 'errors/render404', layout: 'static_page', status: :not_found
  end
end

ビュー

そして、404エラーページのビューを作成します。そこにホームページに戻るリンクを入れるとユーザーには便利だと思います。

Copy app/views/errors/error404.html.slim
1
2
3
4
div class="mt-12 flex flex-col space-y-8 items-center justify-center"
  div = image_tag 'system_icons/404.png'
  h1 class="text-red-700 text-xl md:text-3xl" Sorry! This page is not available.
  = link_to '<<< Back', root_path, class: 'text-xl text-blue-500'

ルーティング

最後に、新しいエラーページが適切に表示されるように、ルーティングを設定します。以下のコードは、カスタム404エラーページへのルーティングを示しています:

Copy config/routes.rb
1
2
3
4
5
Rails.application.routes.draw do
  # 省略

  get '*path', to: 'application#render404'
end

試しには、例えばlocalhost:3000/hoge/hogeなどという存在しないページ、または存在しないレコードのページにアクセスするとカスタムの404ページが表示されるはずです。

スクリーンショット 2023-08-05 10.59.35.png

Ruby on Railsでのカスタム500エラーページの作成方法

コントローラー

サーバーエラーをハンドリングするアクションを追加します:

Copy app/controllers/application_controller.rb
1
2
3
4
5
6
7
8
class ApplicationController < ActionController::Base
  rescue_from StandardError, with: :render500

  def render500(error = nil)
    Rails.logger.error("❌#{error.message}") if error
    render template: 'errors/render500', layout: 'static_page', status: :internal_server_error
  end
end

ビュー

Copy app/views/errors/error500.html.slim
1
2
3
4
5
div class="mt-12 flex flex-col space-y-8 items-center justify-center"
  div = image_tag 'system_icons/500.png'
  h1 class="text-red-700 text-xl md:text-3xl" Oops! Something went wrong
  p class="text-lg" Please be patient or try again later.
  = link_to '<<< Back', root_path, class: 'text-xl text-blue-500'

サーバーエラーが発生するとカスタムの500ページが表示されるはずです。

スクリーンショット 2023-08-05 11.32.39.png

rescue_fromに関する注意点

rescue_fromを複数記述した場合は下から上までの順番に動作します。従って、ApplicationControllerに定義するrescue_fromはこのような順番で定義してください。

Copy app/controllers/application_controller.rb
1
2
  rescue_from StandardError, with: :render500                # 二番目に動作
  rescue_from ActiveRecord::RecordNotFound, with: :render404 # 一番目に動作
Updated at 2024-02-04
Nếu bài viết có ích thì các bạn hãy chia sẻ nhé
Rate this article: 4.9/5 (25 ratings)
You didn't rate yet
Le Minh Thien Toan

Tác giả:Yuto Yasunaga

Xin chào các bạn. Mình là kỹ sư IT đang làm việc ở Nhật Bản. Mình tạo blog này để chia sẻ về cuộc sống và những kinh nghiệm trong quá trình học tập và làm việc.
Hy vọng bài viết này sẽ có ích cho bạn.