diff --git a/app/controllers/errors_controller.rb b/app/controllers/errors_controller.rb
new file mode 100644
index 0000000000..7b15a8b8dc
--- /dev/null
+++ b/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
diff --git a/app/views/errors/internal_server_error.html.haml b/app/views/errors/internal_server_error.html.haml
new file mode 100644
index 0000000000..3033e1a59c
--- /dev/null
+++ b/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")
diff --git a/app/views/errors/not_found.html.haml b/app/views/errors/not_found.html.haml
new file mode 100644
index 0000000000..de473462a7
--- /dev/null
+++ b/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")
diff --git a/app/views/errors/unprocessable_entity.html.haml b/app/views/errors/unprocessable_entity.html.haml
new file mode 100644
index 0000000000..1bc4aea24b
--- /dev/null
+++ b/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")
diff --git a/app/views/layouts/errors.html.haml b/app/views/layouts/errors.html.haml
new file mode 100644
index 0000000000..c3d35d472a
--- /dev/null
+++ b/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
diff --git a/config/application.rb b/config/application.rb
index 11e8cf12b8..c7fc66d559 100644
--- a/config/application.rb
+++ b/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
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 959e95dc97..9f8712c99b 100644
--- a/config/locales/en.yml
+++ b/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: "Please try again
+ This might be a temporary problem. Please click the back button to return to the previous screen or go back to Home and try again.
+ Contact support
+ If the problem persists or is urgent, please tell us about it. Find our contact details from the global Open Food Network Local page.
+ It really helps us if you can give as much detail as possible about what the missing page is about.
"
+ internal_server_error:
+ title: "We're sorry, but something went wrong (500)"
+ message_html: "Please try again
+ This might be a temporary problem. Please click the back button to return to the previous screen or go back to Home and try again.
+ We're on it
+ 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.
+ Contact support
+ If the problem persists or is urgent, please tell us about it. Find our contact details from the global Open Food Network Local page.
+ It really helps us if you can give as much detail as possible about what you were doing when this error occurred.
"
+ unprocessable_entity:
+ title: "The change you wanted was rejected (422)"
+ message_html: "The change you wanted was rejected. Maybe you tried to change something you don't have access to.
+
+ "