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

app/controllers/errors_controller.rb

@@ -0,0 +1,15 @@
+class ErrorsController < ApplicationController
+  layout 'application' # エラー画面にも通常のアプリと同じレイアウトを適用
+
+  def not_found
+    render status: 404 # このアクションでは app/views/errors/not_found.html.erb が使用されます
+  end
+
+  def internal_server_error
+    render status: 500 # このアクションでは app/views/errors/internal_server_error.html.erb が使用されます
+  end
+
+  def unprocessable_entity
+    render status: 422 # このアクションでは app/views/errors/unprocessable_entity.html.erb が使用されます
+  end
+end

app/views/errors/_feedback_notice.html.erb

@@ -0,0 +1,7 @@
+<p>
+  フィードバックなどあれば [email protected] にメールしていただくか、
+  <br>
+  もしくは
+  <a href="https://github.com/coderdojo-japan/coderdojo.jp/issues/" target="_blank" rel="noopener">GitHub Issue</a>
+  に書いていただけると嬉しいです (＞人＜ )✨
+</p>

app/views/errors/_footer_links_and_timeline.html.erb

@@ -0,0 +1,20 @@
+<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/_header.html.erb

@@ -0,0 +1,6 @@
+<div id="top" class="title text-center">
+  <i class="cd cd-logo"></i>
+  <h1>CoderDojo Japan</h1>
+  <p>子どものためのプログラミング道場</p>
+  <br>
+</div>

app/views/errors/internal_server_error.html.erb

@@ -0,0 +1,17 @@
+<% provide(:title, "予期しないエラーが発生しました 😵‍💫") %>
+<% provide(:desc, "申し訳ありません。サーバーで問題が発生しています。") %>
+
+<%= render 'errors/header' %>
+
+<section class="introduction text-center list">
+  <h2>
+    予期しないエラーが発生しました 😵‍💫
+  </h2>
+  <p>
+    現在、問題を調査しています。しばらくしてからもう一度お試しください。
+    <br>
+  </p>
+  <%= render 'errors/feedback_notice' %>
+</section>
+
+<%= render 'errors/footer_links_and_timeline' %>

app/views/errors/not_found.html.erb

@@ -1,12 +1,7 @@
 <% 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>
+<%= render 'errors/header' %>
 
 <section class="introduction text-center list">
   <h2>
@@ -16,23 +11,7 @@
     ページが削除された可能性があります 🤔💭
     <br>
   </p>
-  <p>
-    フィードバックなどあれば [email protected] にメールしていただくか、
-    <br>
-    もしくは
-    <a href="https://github.com/coderdojo-japan/coderdojo.jp/issues/">GitHub Issue</a>
-    に書いていただけると嬉しいです (＞人＜ )✨
-  </p>
+  <%= render 'errors/feedback_notice' %>
 </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 'errors/footer_links_and_timeline' %>

app/views/errors/unprocessable_entity.html.erb

@@ -0,0 +1,17 @@
+<% provide(:title, "リクエストが処理できませんでした… 😢") %>
+<% provide(:desc,  "入力内容に誤りがあるか、リクエストが正しく送信されなかった可能性があります。") %>
+
+<%= render 'errors/header' %>
+
+<section class="introduction text-center list">
+  <h2>
+    リクエストが処理できませんでした… 😢
+  </h2>
+  <p>
+    入力内容に誤りがあるか、リクエストが正しく送信されなかった可能性があります。
+    <br>
+  </p>
+  <%= render 'errors/feedback_notice' %>
+</section>
+
+<%= render 'errors/footer_links_and_timeline' %>

config/application.rb

@@ -11,6 +11,10 @@ class Application < Rails::Application
     # Initialize configuration defaults for originally generated Rails version.
     config.load_defaults 8.0
 
+    # Rambulance が提供するエラー用ルーティングを使うようにする
+    config.exceptions_app = self.routes
+
+
     # Please, add to the `ignore` list any other `lib` subdirectories that do
     # not contain `.rb` files, or that should not be reloaded or eager loaded.
     # Common ones are `templates`, `generators`, or `middleware`, for example.

config/routes.rb

@@ -105,4 +105,11 @@
 
   # Check development sent emails
   mount LetterOpenerWeb::Engine, at: "/letter_opener" if Rails.env.development?
+  mount Rambulance::Engine => "/"
+
+  if Rails.env.development? || Rails.env.test?
+    get "/trigger_500", to: ->(env) { raise "Triggering 500 error" }
+    get "/trigger_422", to: "errors#unprocessable_entity"
+  end
+
 end

spec/requests/errors_spec.rb

@@ -4,12 +4,25 @@
   include Rambulance::TestHelper
 
   describe "Error requests" do
-    it 'should render a corresponding error page' do
+    it 'renders the 404 error page' do
       with_exceptions_app do
         get '/does_not_exist'
       end
+      expect(response.status).to eq(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)
+    end
+
+    it 'renders the 500 error page' do
+      with_exceptions_app do
+        get '/trigger_500'
+      end
+      expect(response.status).to eq(500)
     end
   end
 end