Rambulanceを使って404/500/422ページを整備

app/helpers/errors_helper.rb

@@ -0,0 +1,19 @@
+module ErrorsHelper
+  def error_title(code)
+    case code
+    when 404 then "ページが見つかりませんでした... 🥺💦"
+    when 422 then "リクエストが処理できませんでした… 😢"
+    when 500 then "予期しないエラーが発生しました 😵‍💫"
+    else           "予期せぬエラーが発生しました…😵"
+    end
+  end
+
+  def error_desc(code)
+    case code
+    when 404 then "ページが削除された可能性があります 🤔💭"
+    when 422 then "入力内容に誤りがあるか、リクエストが正しく送信されなかった可能性があります。"
+    when 500 then "申し訳ありません。サーバーで問題が発生しています。"
+    else           "改善されない場合は、お手数ですがエラー報告をお願いいたします🙇‍♀️"
+    end
+  end
+end

app/views/errors/bad_request.html.erb

@@ -1,39 +1 @@
-<% provide(:title, "ページが見つかりませんでした... 🥺💦") %>
-<% provide(:desc,  "ページが削除された可能性があります 🤔💭") %>
-
-<div id="top" class="title text-center">
-  <i class="cd cd-logo"></i>
-  <h1>CoderDojo Japan</h1>
-  <p>子どものためのプログラミング道場</p>
-  <br>
-</div>
-
-<section class="introduction text-center list">
-  <h2>
-    ページが見つかりませんでした... 🥺💦
-  </h2>
-  <p>
-    ページが削除された可能性があります 🤔💭
-    <br>
-  </p>
-  <p>
-    フィードバックなどあれば [email protected] にメールしていただくか、
-    <br>
-    もしくは
-    <a href="https://github.com/coderdojo-japan/coderdojo.jp/issues/">GitHub Issue</a>
-    に書いていただけると嬉しいです (＞人＜ )✨
-  </p>
-</section>
-
-<section id="timeline" class="text-center grayscale-bg" style="padding-bottom: 100px;">
-  <br>
-  <h3 class="text-center">
-    <a href="https://twitter.com/search?vertical=default&q=dojocon%20OR%20coderdojo%20OR%20%E3%82%B3%E3%83%BC%E3%83%80%E3%83%BC%E9%81%93%E5%A0%B4%20lang%3Aja" target="_blank" rel="noopener">🐣 最近の情報発信</a>
-  </h3>
-  <br>
-  <div class="twitter-timeline-wrapper">
-    <a class="twitter-timeline" href="https://twitter.com/CoderDojoJapan?ref_src=twsrc%5Etfw" data-lang="ja" data-chrome="noheader nofooter noborders" data-dnt="true" data-width="500" data-tweet-limit="5">@CoderDojoJapan アカウントのタイムライン</a>
-  </div>
-  <script async="" await="" src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
-</section> 
-
+<%= render template: "errors/show", locals: { status_code: 400 } %>

app/views/errors/forbidden.html.erb

@@ -1,38 +1 @@
-<% provide(:title, "403 Forbidden エラー 🚧 🏗") %>
-<% provide(:desc,  "アクセス権限が無いか削除された可能性があります 🤔💭") %>
-
-<div id="top" class="title text-center">
-  <i class="cd cd-logo"></i>
-  <h1>CoderDojo Japan</h1>
-  <p>子どものためのプログラミング道場</p>
-  <br>
-</div>
-
-<section class="introduction text-center list">
-  <h2>
-    アクセスできないページのため表示できませんでした 🚧 🏗
-  </h2>
-  <p>
-    ログインし直すことで解決する可能性があります 🤔💭
-    <br>
-  </p>
-  <p>
-    フィードバックなどあれば [email protected] にメールしていただくか、
-    <br>
-    もしくは
-    <a href="https://github.com/coderdojo-japan/coderdojo.jp/issues/">GitHub Issue</a>
-    に書いていただけると嬉しいです (＞人＜ )✨
-  </p>
-</section>
-
-<section id="timeline" class="text-center grayscale-bg" style="padding-bottom: 100px;">
-  <br>
-  <h3 class="text-center">
-    <a href="https://twitter.com/search?vertical=default&q=dojocon%20OR%20coderdojo%20OR%20%E3%82%B3%E3%83%BC%E3%83%80%E3%83%BC%E9%81%93%E5%A0%B4%20lang%3Aja" target="_blank" rel="noopener">🐣 最近の情報発信</a>
-  </h3>
-  <br>
-  <div class="twitter-timeline-wrapper">
-    <a class="twitter-timeline" href="https://twitter.com/CoderDojoJapan?ref_src=twsrc%5Etfw" data-lang="ja" data-chrome="noheader nofooter noborders" data-dnt="true" data-width="500" data-tweet-limit="5">@CoderDojoJapan アカウントのタイムライン</a>
-  </div>
-  <script async="" await="" src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
-</section> 
+<%= render template: "errors/show", locals: { status_code: 403 } %>

app/views/errors/internal_server_error.html.erb

@@ -0,0 +1 @@
+<%= render template: "errors/show", locals: { status_code: 500 } %>

app/views/errors/not_found.html.erb

@@ -1,38 +1 @@
-<% provide(:title, "ページが見つかりませんでした... 🥺💦") %>
-<% provide(:desc,  "ページが削除された可能性があります 🤔💭") %>
-
-<div id="top" class="title text-center">
-  <i class="cd cd-logo"></i>
-  <h1>CoderDojo Japan</h1>
-  <p>子どものためのプログラミング道場</p>
-  <br>
-</div>
-
-<section class="introduction text-center list">
-  <h2>
-    ページが見つかりませんでした... 🥺💦
-  </h2>
-  <p>
-    ページが削除された可能性があります 🤔💭
-    <br>
-  </p>
-  <p>
-    フィードバックなどあれば [email protected] にメールしていただくか、
-    <br>
-    もしくは
-    <a href="https://github.com/coderdojo-japan/coderdojo.jp/issues/">GitHub Issue</a>
-    に書いていただけると嬉しいです (＞人＜ )✨
-  </p>
-</section>
-
-<section id="timeline" class="text-center grayscale-bg" style="padding-bottom: 100px;">
-  <br>
-  <h3 class="text-center">
-    <a href="https://twitter.com/search?vertical=default&q=dojocon%20OR%20coderdojo%20OR%20%E3%82%B3%E3%83%BC%E3%83%80%E3%83%BC%E9%81%93%E5%A0%B4%20lang%3Aja" target="_blank" rel="noopener">🐣 最近の情報発信</a>
-  </h3>
-  <br>
-  <div class="twitter-timeline-wrapper">
-    <a class="twitter-timeline" href="https://twitter.com/CoderDojoJapan?ref_src=twsrc%5Etfw" data-lang="ja" data-chrome="noheader nofooter noborders" data-dnt="true" data-width="500" data-tweet-limit="5">@CoderDojoJapan アカウントのタイムライン</a>
-  </div>
-  <script async="" await="" src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
-</section> 
+<%= render template: "errors/show", locals: { status_code: 404 } %>

app/views/errors/show.html.erb

@@ -0,0 +1,53 @@
+<%# The status_code local variable is passed from the parent template %>
+<% title = error_title(status_code) %>
+<% desc  = error_desc(status_code) %>
+
+<% provide(:title, title) %>
+<% provide(:desc,  desc) %>
+
+<div id="top" class="title text-center">
+  <i class="cd cd-logo"></i>
+  <h1>CoderDojo Japan</h1>
+  <p>子どものためのプログラミング道場</p>
+  <br>
+</div>
+
+<section class="introduction text-center list">
+  <h2><%= title %></h2>
+  <p>
+    <%= desc %>
+    <br>
+  </p>
+  <p>
+    フィードバックなどあれば [email protected] にメールしていただくか、
+    <br>
+    もしくは
+    <a href="https://github.com/coderdojo-japan/coderdojo.jp/issues/" target="_blank" rel="noopener">
+      GitHub Issue
+    </a>
+    に書いていただけると嬉しいです (＞人＜ )✨
+  </p>
+</section>
+
+<section id="timeline" class="text-center grayscale-bg" style="padding-bottom: 100px;">
+  <br>
+  <h3 class="text-center">
+    <a href="https://twitter.com/search?vertical=default&q=dojocon%20OR%20coderdojo%20OR%20%E3%82%B3%E3%83%BC%E3%83%80%E3%83%BC%E9%81%93%E5%A0%B4%20lang%3Aja"
+       target="_blank" rel="noopener">
+      🐣 最近の情報発信
+    </a>
+  </h3>
+  <br>
+  <div class="twitter-timeline-wrapper">
+    <a class="twitter-timeline"
+       href="https://twitter.com/CoderDojoJapan?ref_src=twsrc%5Etfw"
+       data-lang="ja"
+       data-chrome="noheader nofooter noborders"
+       data-dnt="true"
+       data-width="500"
+       data-tweet-limit="5">
+      @CoderDojoJapan アカウントのタイムライン
+    </a>
+  </div>
+  <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
+</section>

app/views/errors/unprocessable_content.html.erb

@@ -0,0 +1 @@
+<%= render template: "errors/show", locals: { status_code: 422 } %>

config/initializers/rambulance.rb

@@ -29,9 +29,10 @@
   # If Rambulance receives an exception that is not listed here, it'll render
   # the internal server error template and return 500 as http status.
   config.rescue_responses = {
-    ActionController::RoutingError     => :not_found,
-    AbstractController::ActionNotFound => :not_found,
-    ActionController::BadRequest       => :bad_request,
+    "ActionController::RoutingError"     => :not_found,
+    "AbstractController::ActionNotFound" => :not_found,
+    "ActionController::BadRequest"       => :bad_request,
+    "ActionController::InvalidAuthenticityToken" => :unprocessable_entity,
 
     # "ActiveRecord::RecordNotUnique"  => :unprocessable_entity,
     # "CanCan::AccessDenied"           => :forbidden,

spec/requests/errors_spec.rb

@@ -1,15 +1,64 @@
 require 'rails_helper'
 
-RSpec.describe "Errors", type: :request do
+RSpec.describe 'Errors', type: :request do
   include Rambulance::TestHelper
+  include ErrorsHelper
 
-  describe "Error requests" do
-    it 'should render a corresponding error page' do
+  before do
+    # テスト用のルーティングを直接定義
+    Rails.application.routes.draw do
+      get '/trigger_400', to: ->(env) { raise ActionController::BadRequest }
+      get '/trigger_422', to: ->(env) { raise ActionController::InvalidAuthenticityToken }
+      get '/trigger_500', to: ->(env) { raise 'This is a test 500 error' }
+    end
+
+    # ビューのレンダリングをスタブして、レイアウト起因のエラーを回避
+    allow_any_instance_of(Rambulance::ExceptionsApp).to receive(:render).and_wrap_original do |m, *args|
+      options = args.last.is_a?(Hash) ? args.pop : {}
+      m.call(*args, **options.merge(layout: false))
+    end
+  end
+
+  after do
+    # テスト後に追加したルーティングを元に戻す
+    Rails.application.reload_routes!
+  end
+
+  describe 'Error requests' do
+    it 'renders the 404 error page' do
       with_exceptions_app do
+        # どのルーティングにもマッチしないパスをリクエスト
         get '/does_not_exist'
       end
+      expect(response.status).to eq(404)
+      expect(response.body).to include(error_title(404))
+      expect(response.body).to include(error_desc(404))
+    end
 
-      assert_equal 404, response.status
+    it 'renders the 422 error page' do
+      with_exceptions_app do
+        get '/trigger_422'
+      end
+      expect(response.status).to eq(422)
+      expect(response.body).to include(error_title(422))
+      expect(response.body).to include(error_desc(422))
+    end
+
+    it 'renders the 500 error page' do
+      with_exceptions_app do
+        get '/trigger_500'
+      end
+      expect(response.status).to eq(500)
+      expect(response.body).to include(error_title(500))
+      expect(response.body).to include(error_desc(500))
+    end
+    it 'renders the 400 error page' do
+      with_exceptions_app do
+        get '/trigger_400'
+      end
+      expect(response.status).to eq(400)
+      expect(response.body).to include(error_title(400))
+      expect(response.body).to include(error_desc(400))
     end
   end
 end