[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

@@ -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"]

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,
+  embed_templates "error_html/*"
-  # 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/*"
 
   # The default is to render a plain text page based on
   # the template name. For example, "404.html" becomes

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>

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>

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