Create an ErrorsController that handle errors thrown application

app/controllers/errors_controller.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+class ErrorsController < ApplicationController
+  layout "errors"
+
+  def not_found
+    render status: :not_found
+  end
+
+  def internal_server_error
+    render status: :internal_server_error
+  end
+
+  def unprocessable_entity
+    render status: :unprocessable_entity
+  end
+end

app/views/errors/internal_server_error.html.haml

@@ -0,0 +1,8 @@
+- content_for :title do
+  = I18n.t("errors.internal_server_error.title")
+.dialog
+  %a{href: "/"}
+    %img{src: "/500.jpg"}
+  %h1
+    = t("errors.internal_server_error.title")
+  = t("errors.internal_server_error.message_html")

app/views/errors/not_found.html.haml

@@ -0,0 +1,8 @@
+- content_for :title do
+  = I18n.t("errors.not_found.title")
+.dialog
+  %a{href: "/"}
+    %img{src: "/500.jpg"}
+  %h1
+    = t("errors.not_found.title")
+  = t("errors.not_found.message_html")

app/views/errors/unprocessable_entity.html.haml

@@ -0,0 +1,26 @@
+:css
+  body {
+    text-align: center;
+  }
+  a { 
+    font-size: 100%; 
+    color: black; 
+    line-height: 1.5em; 
+    text-decoration: none;
+    border-bottom: 1px dotted black;
+    padding: 0 0.2rem;
+  }
+  a:hover, a:focus, a:active{
+    background: #8f301d;
+    color: white;
+    border-bottom: none;
+  }
+
+- content_for :title do
+  = I18n.t("errors.unprocessable_entity.title")
+.dialog
+  %a{href: "/", style: "border: none; background: none;"}
+    %img{src: "/422.jpg"}
+  %h1
+    = t("errors.unprocessable_entity.title")
+  = t("errors.unprocessable_entity.message_html")

app/views/layouts/errors.html.haml

@@ -0,0 +1,28 @@
+%html
+%head
+  :css
+    body {
+      background-color: #fff;
+      color: #666;
+      font-family: arial, sans-serif;
+
+    }
+    div.dialog {
+      width: 600px;
+      margin: auto;
+    }
+    @media only screen
+      and (min-width: 320px)
+      and (max-width: 568px) {
+        div.dialog, div.dialog img {
+          width: 95%;
+        }
+    }
+    div.dialog h1 {
+      font-size: 1.8em;
+    }
+  %title
+    = yield(:title)
+
+%body
+  = yield

config/application.rb

@@ -243,5 +243,7 @@ module Openfoodnetwork
     config.active_storage.service = ENV["S3_BUCKET"].present? ? :amazon : :local
     config.active_storage.content_types_to_serve_as_binary -= ["image/svg+xml"]
     config.active_storage.variable_content_types += ["image/svg+xml"]
+
+    config.exceptions_app = self.routes
   end
 end

config/locales/en.yml

@@ -4302,3 +4302,25 @@ See the %{link} to find out more about %{sitename}'s features and to start using
       x_years:
         one: 1 year
         other: "%{count} years"
+  errors:
+    not_found:
+      title: "The page you were looking for doesn't exist (404)"
+      message_html: "<b>Please try again</b>
+      <p>This might be a temporary problem. Please click the back button to return to the previous screen or go back to <a href='/'>Home</a> and try again.</p>
+      <b>Contact support</b>
+      <p>If the problem persists or is urgent, please tell us about it. Find our contact details from the global <a href='https://openfoodnetwork.org/ofn-local/' target='blank'>Open Food Network Local page</a>.</p>
+      <p>It really helps us if you can give as much detail as possible about what the missing page is about.</p>"
+    internal_server_error:
+      title: "We're sorry, but something went wrong (500)"
+      message_html: "<b>Please try again</b>
+      <p>This might be a temporary problem. Please click the back button to return to the previous screen or go back to <a href='/''>Home</a> and try again.</p>
+      <b>We're on it</b>
+      <p>If you have seen this problem before, we probably already know about it and are working on a fix. We record all the errors that come up.</p>
+      <b>Contact support</b>
+      <p>If the problem persists or is urgent, please tell us about it. Find our contact details from the global <a href='https://openfoodnetwork.org/ofn-local/' target='blank'>Open Food Network Local page</a>.</p>
+      <p>It really helps us if you can give as much detail as possible about what you were doing when this error occurred.</p>"
+    unprocessable_entity:
+      title: "The change you wanted was rejected (422)"
+      message_html: "<p>The change you wanted was rejected. Maybe you tried to change something you don't have access to.
+      <br><h3><a href='/' >Return home</a></h3>
+      </p>"