From 14b8ecbe44aede84c529c651ca02bb8c4d19cb56 Mon Sep 17 00:00:00 2001
From: Kieran <kieran.eglin@gmail.com>
Date: Fri, 23 Aug 2024 13:33:27 -0700
Subject: [PATCH] [Enhancement] Show error messages in-app for easier triage
 (#365)

* Added an improved error message screen with actionable details

* Added a basic 404 page

* fixed tests
---
 config/config.exs                             |  3 +-
 lib/pinchflat_web/controllers/error_html.ex   |  9 +-----
 .../controllers/error_html/404.html.heex      |  3 ++
 .../controllers/error_html/500.html.heex      | 29 +++++++++++++++++++
 .../controllers/error_html_test.exs           |  4 +--
 5 files changed, 37 insertions(+), 11 deletions(-)
 create mode 100644 lib/pinchflat_web/controllers/error_html/404.html.heex
 create mode 100644 lib/pinchflat_web/controllers/error_html/500.html.heex

diff --git a/config/config.exs b/config/config.exs
index 84f85cbf..7df3a778 100644
--- a/config/config.exs
+++ b/config/config.exs
@@ -41,7 +41,8 @@ config :pinchflat, PinchflatWeb.Endpoint,
   adapter: Phoenix.Endpoint.Cowboy2Adapter,
   render_errors: [
     formats: [html: PinchflatWeb.ErrorHTML, json: PinchflatWeb.ErrorJSON],
-    layout: false
+    root_layout: {PinchflatWeb.Layouts, :root},
+    layout: {PinchflatWeb.Layouts, :app}
   ],
   pubsub_server: Pinchflat.PubSub,
   live_view: [signing_salt: "/t5878kO"]
diff --git a/lib/pinchflat_web/controllers/error_html.ex b/lib/pinchflat_web/controllers/error_html.ex
index 7fdeb0a5..6a6e689f 100644
--- a/lib/pinchflat_web/controllers/error_html.ex
+++ b/lib/pinchflat_web/controllers/error_html.ex
@@ -1,14 +1,7 @@
 defmodule PinchflatWeb.ErrorHTML do
   use PinchflatWeb, :html
 
-  # If you want to customize your error pages,
-  # uncomment the embed_templates/1 call below
-  # and add pages to the error directory:
-  #
-  #   * lib/pinchflat_web/controllers/error_html/404.html.heex
-  #   * lib/pinchflat_web/controllers/error_html/500.html.heex
-  #
-  # embed_templates "error_html/*"
+  embed_templates "error_html/*"
 
   # The default is to render a plain text page based on
   # the template name. For example, "404.html" becomes
diff --git a/lib/pinchflat_web/controllers/error_html/404.html.heex b/lib/pinchflat_web/controllers/error_html/404.html.heex
new file mode 100644
index 00000000..d49f5f54
--- /dev/null
+++ b/lib/pinchflat_web/controllers/error_html/404.html.heex
@@ -0,0 +1,3 @@
+<section>
+  <h2 class="text-title-md2 font-bold text-white">404 (not found)</h2>
+</section>
diff --git a/lib/pinchflat_web/controllers/error_html/500.html.heex b/lib/pinchflat_web/controllers/error_html/500.html.heex
new file mode 100644
index 00000000..6d34195f
--- /dev/null
+++ b/lib/pinchflat_web/controllers/error_html/500.html.heex
@@ -0,0 +1,29 @@
+<section>
+  <h2 class="text-title-md2 font-bold text-white">Internal Server Error</h2>
+  <p class="text-body-md text-white mt-2">
+    This shouldn't happen! Please make a
+    <.inline_link href="https://github.com/kieraneglin/pinchflat/issues/new/choose">GitHub issue</.inline_link>
+    with the following information:
+  </p>
+
+  <ul class="list-disc ml-8 mb-8">
+    <li>What you were doing when you saw this page</li>
+    <li>
+      Your system details and logs from
+      <.inline_link href={~p"/app_info"}>app info</.inline_link>
+    </li>
+    <li>All the information in the textarea below (use select all + copy)</li>
+  </ul>
+  <textarea class="w-full min-h-96 font-mono inline-block rounded-lg" readonly>
+**Status**:
+`<%= if Map.has_key?(assigns, :status), do: @status, else: "" %>`
+
+**Reason**:
+`<%= if Map.has_key?(assigns, :reason), do: inspect(@reason), else: "" %>`
+
+**Stacktrace**:
+```
+  <%= if Map.has_key?(assigns, :stack), do: Exception.format_stacktrace(@stack), else: "" %>
+```
+  </textarea>
+</section>
diff --git a/test/pinchflat_web/controllers/error_html_test.exs b/test/pinchflat_web/controllers/error_html_test.exs
index d9baab3f..89bb46a3 100644
--- a/test/pinchflat_web/controllers/error_html_test.exs
+++ b/test/pinchflat_web/controllers/error_html_test.exs
@@ -5,10 +5,10 @@ defmodule PinchflatWeb.ErrorHTMLTest do
   import Phoenix.Template
 
   test "renders 404.html" do
-    assert render_to_string(PinchflatWeb.ErrorHTML, "404", "html", []) == "Not Found"
+    assert render_to_string(PinchflatWeb.ErrorHTML, "404", "html", []) =~ "404 (not found)"
   end
 
   test "renders 500.html" do
-    assert render_to_string(PinchflatWeb.ErrorHTML, "500", "html", []) == "Internal Server Error"
+    assert render_to_string(PinchflatWeb.ErrorHTML, "500", "html", []) =~ "Internal Server Error"
   end
 end