Custom 404 and 500 error pages

app/assets/stylesheets/errors.scss

@@ -0,0 +1,26 @@
+// Place all the styles related to the errors controller here.
+// They will automatically be included in application.css.
+// You can use Sass (SCSS) here: https://sass-lang.com/
+body {
+    background: #f5f5f5;
+    font-family: 'Noto Sans', sans-serif;
+    margin: 0;
+    color: #4c5667;
+    overflow-x: hidden !important;
+    padding-top: 40px;
+    padding-bottom: 40px;
+}
+
+.message-box h1 {
+    color: #252932;
+    font-size: 80px;
+    font-weight: 700;
+    margin-left: 18px;
+    line-height: 80px;
+    text-shadow: rgba(61, 61, 61, 0.3) 1px 1px, rgba(61, 61, 61, 0.2) 2px 2px, rgba(61, 61, 61, 0.3) 3px 3px;
+    padding-top: 25px;
+}
+
+.message {
+    font-size: 18px;
+}

app/controllers/errors_controller.rb

@@ -0,0 +1,10 @@
+class ErrorsController < ApplicationController
+  def not_found
+    render status: 404
+  end
+
+
+  def internal_server_error
+    render status: 500
+  end
+end

app/helpers/errors_helper.rb

@@ -0,0 +1,2 @@
+module ErrorsHelper
+end

app/views/errors/internal_server_error.html.erb

@@ -0,0 +1,28 @@
+<div class="container">
+  <div class="row">
+    <div class="col-sm-6">
+                <svg class="svg-box" width="380px" height="500px" viewBox="0 0 837 1045" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+                    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+                      <path d="M353,9 L626.664028,170 L626.664028,487 L353,642 L79.3359724,487 L79.3359724,170 L353,9 Z" id="Polygon-1" stroke="#3bafda" stroke-width="6" sketch:type="MSShapeGroup"></path>
+                      <path d="M78.5,529 L147,569.186414 L147,648.311216 L78.5,687 L10,648.311216 L10,569.186414 L78.5,529 Z" id="Polygon-2" stroke="#7266ba" stroke-width="6" sketch:type="MSShapeGroup"></path>
+                      <path d="M773,186 L827,217.538705 L827,279.636651 L773,310 L719,279.636651 L719,217.538705 L773,186 Z" id="Polygon-3" stroke="#f76397" stroke-width="6" sketch:type="MSShapeGroup"></path>
+                      <path d="M639,529 L773,607.846761 L773,763.091627 L639,839 L505,763.091627 L505,607.846761 L639,529 Z" id="Polygon-4" stroke="#00b19d" stroke-width="6" sketch:type="MSShapeGroup"></path>
+                      <path d="M281,801 L383,861.025276 L383,979.21169 L281,1037 L179,979.21169 L179,861.025276 L281,801 Z" id="Polygon-5" stroke="#ffaa00" stroke-width="6" sketch:type="MSShapeGroup"></path>
+                    </g>
+                </svg>
+    </div>
+
+    <div class="col-sm-6">
+      <div class="message-box">
+        <h1 class="m-b-0">500 Internal Server Error!</h1>
+          <p class="message">Unfortunately we're having trouble loading the page you are looking for. Please come back in a while.</p>
+            <div class="buttons-con">
+                <div class="action-link-wrap">
+                  <a><%= link_to "Go Back", user_path(current_user.id), class: "btn btn-custom btn-info waves-effect waves-light m-t-20" %></a>
+                  <a><%= link_to "Go to Homepage", root_path, class: "btn btn-custom btn-info waves-effect waves-light m-t-20" %></a>
+                </div>
+            </div>
+      </div>
+    </div>
+ </div>
+</div>

app/views/errors/not_found.html.erb

@@ -0,0 +1,5 @@
+<div class="jumbotron text-center">
+		            <h1 class="display-3 mb-5">Oops! Page Not Found</h1>
+<p class="lead text-monospace">Sorry but the page you are looking for does not exist.</p>
+<p class="text-center"><%= link_to "Go Back Home", root_path, class: "btn btn-info pl-5 pr-5" %></p>
+</div>

config/application.rb

@@ -10,7 +10,8 @@ module Shiftwork2
   class Application < Rails::Application
     # Initialize configuration defaults for originally generated Rails version.
     config.load_defaults 6.0
-
+    config.exceptions_app = self.routes
+
     # Set official app timezone
     config.time_zone = "UTC"
 

config/environments/development.rb

@@ -10,7 +10,7 @@
   config.eager_load = false
 
   # Show full error reports.
-  config.consider_all_requests_local = true
+  config.consider_all_requests_local = false
 
   # Enable/disable caching. By default caching is disabled.
   # Run rails dev:cache to toggle caching.

config/routes.rb

@@ -1,4 +1,8 @@
 Rails.application.routes.draw do
+  get 'errors/not_found'
+  get 'errors/internal_server_error'
+  match "/404", to: "errors#not_found", via: :all
+  match "/500", to: "errors#internal_server_error", via: :all
   # match '/404', to: 'application#render_not_found', via: :all
 
   root 'users#index'

spec/helpers/errors_helper_spec.rb

@@ -0,0 +1,15 @@
+require 'rails_helper'
+
+# Specs in this file have access to a helper object that includes
+# the ErrorsHelper. For example:
+#
+# describe ErrorsHelper do
+#   describe "string concat" do
+#     it "concats two strings with spaces" do
+#       expect(helper.concat_strings("this","that")).to eq("this that")
+#     end
+#   end
+# end
+RSpec.describe ErrorsHelper, type: :helper do
+  pending "add some examples to (or delete) #{__FILE__}"
+end

spec/requests/errors_spec.rb

@@ -0,0 +1,18 @@
+require 'rails_helper'
+
+RSpec.describe "Errors", type: :request do
+  describe "GET /not_found" do
+    it "returns http success" do
+      get "/errors/not_found"
+      expect(response).to have_http_status(:success)
+    end
+  end
+
+  describe "GET /internal_server_error" do
+    it "returns http success" do
+      get "/errors/internal_server_error"
+      expect(response).to have_http_status(:success)
+    end
+  end
+
+end

spec/views/errors/internal_server_error.html.erb_spec.rb

@@ -0,0 +1,5 @@
+require 'rails_helper'
+
+RSpec.describe "errors/internal_server_error.html.erb", type: :view do
+  pending "add some examples to (or delete) #{__FILE__}"
+end

spec/views/errors/not_found.html.erb_spec.rb

@@ -0,0 +1,5 @@
+require 'rails_helper'
+
+RSpec.describe "errors/not_found.html.erb", type: :view do
+  pending "add some examples to (or delete) #{__FILE__}"
+end