Add dynamic 400/404/406/422/500 error pages

Just for something a bit friendlier and a bit more on-theme than the
standard error pages that come with Rails.

Of note: the 404 page helps point out if perhaps a typo was made in the
URL.

These views are copied over from another project of mine, but also
customized to fit this project better.

Also, links to each of these views is available in the UI Portal under a
new "Error Pages" page.

app/controllers/errors_controller.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+class ErrorsController < ApplicationController
+  # 400
+  def bad_request
+    render(status: :bad_request)
+  end
+
+  # 404
+  def not_found
+    render(status: :not_found)
+  end
+
+  # 406
+  def unsupported_browser
+    render(status: :not_acceptable)
+  end
+
+  # 422
+  def unprocessable_entity
+    render(status: :unprocessable_entity)
+  end
+
+  # 500
+  def internal_server_error
+    render(status: :internal_server_error)
+  end
+end

app/controllers/ui_portal/error_pages_controller.rb

@@ -0,0 +1,6 @@
+# frozen_string_literal: true
+
+class UIPortal::ErrorPagesController < UIPortal::BaseController
+  def show
+  end
+end

app/views/errors/bad_request.html.erb

@@ -0,0 +1,17 @@
+<div
+  class="
+    container mx-auto
+    pt-6 md:pt-12 space-y-12
+    text-center
+  "
+>
+  <h1 class="text-9xl text-red-500 dark:text-red-500">
+    400
+  </h1>
+
+  <h2 class="h3 font-normal text-5xl">
+    Bad Request
+  </h2>
+
+  <p>Please try again in a minute.</p>
+</div>

app/views/errors/internal_server_error.html.erb

@@ -0,0 +1,17 @@
+<div
+  class="
+    container mx-auto
+    pt-6 md:pt-12 space-y-12
+    text-center
+  "
+>
+  <h1 class="text-9xl text-red-500 dark:text-red-500">
+    500
+  </h1>
+
+  <h2 class="h3 font-normal text-5xl">
+    Unexpected Error
+  </h2>
+
+  <p>Please try again in a minute.</p>
+</div>

app/views/errors/not_found.html.erb

@@ -0,0 +1,20 @@
+<div
+  class="
+    container mx-auto
+    pt-6 md:pt-12 space-y-12
+    text-center
+  "
+>
+  <h1 class="text-9xl text-amber-500 dark:text-amber-500">
+    404
+  </h1>
+
+  <h2 class="h3 font-normal text-5xl">
+    Page Not Found
+  </h2>
+
+  <div class="space-y-6">
+    <p>If the URL was manually entered, please check for typos:</p>
+    <code class="inline-block"><%= request.original_fullpath %></code>
+  </div>
+</div>

app/views/errors/unprocessable_entity.html.erb

@@ -0,0 +1,15 @@
+<div
+  class="
+    container mx-auto
+    pt-6 md:pt-12 space-y-12
+    text-center
+  "
+>
+  <h1 class="text-9xl text-red-500 dark:text-red-500">
+    422
+  </h1>
+
+  <h2 class="h3 font-normal text-5xl">
+    Unprocessable Entity
+  </h2>
+</div>

app/views/errors/unsupported_browser.html.erb

@@ -0,0 +1,20 @@
+<div
+  class="
+    container mx-auto
+    pt-6 md:pt-12 space-y-12
+    text-center
+  "
+>
+  <h1 class="text-9xl text-red-500 dark:text-red-500">
+    406
+  </h1>
+
+  <h2 class="h3 font-normal text-5xl">
+    Unsupported Browser
+  </h2>
+
+  <div class="space-y-10">
+    <p>Your browser is not supported.</p>
+    <p>Please upgrade your browser to continue.</p>
+  </div>
+</div>

app/views/ui_portal/base/_nav.html.erb

@@ -4,6 +4,7 @@
   <ul class="flex gap-x-8">
     <li><%= active_link_to("UI Home", ui_portal_root_path) %></li>
     <li><%= active_link_to("Flash", ui_portal_flash_notifications_path) %></li>
+    <li><%= active_link_to("Error Pages", ui_portal_error_pages_path) %></li>
     <li>
       <%= active_link_to(
             "Patterns",

app/views/ui_portal/error_pages/show.html.erb

@@ -0,0 +1,13 @@
+<% title("Error Pages") %>
+
+<div class="container mx-auto space-y-12">
+  <h1><%= title %></h1>
+
+  <ul class="space-y-1">
+    <li><%= link_to("400: Bad Request", "/400") %></li>
+    <li><%= link_to("404: Not Found", "/404") %></li>
+    <li><%= link_to("406: Unsupported Browser", "/406") %></li>
+    <li><%= link_to("422: Unprocessable Entity", "/422") %></li>
+    <li><%= link_to("500: Internal Server Error", "/500") %></li>
+  </ul>
+</div>

config/initializers/dynamic_error_pages.rb

@@ -0,0 +1,6 @@
+# frozen_string_literal: true
+
+Rails.application.configure do
+  config.exceptions_app = routes
+  config.action_dispatch.show_exceptions = :all
+end

config/routes.rb

@@ -49,6 +49,7 @@
       root "home#show"
 
       resource :flash_notifications, only: :show
+      resource :error_pages, only: :show
 
       resources :patterns do
         scope module: :patterns do
@@ -70,6 +71,12 @@
   # live.
   get "up" => "rails/health#show", as: :rails_health_check
 
+  match "/400" => "errors#bad_request", via: :all
+  match "/404" => "errors#not_found", via: :all
+  match "/406" => "errors#unsupported_browser", via: :all
+  match "/422" => "errors#unprocessable_entity", via: :all
+  match "/500" => "errors#internal_server_error", via: :all
+
   # Render dynamic PWA files from app/views/pwa/*
   get "service-worker" => "rails/pwa#service_worker", as: :pwa_service_worker
   get "manifest" => "rails/pwa#manifest", as: :pwa_manifest