Suggestions

sanic/pages/error.py

@@ -1,16 +1,30 @@
-from .base import BasePage
-from sanic.request import Request
-from contextlib import suppress
-from html5tagger import E
-from tracerite import html_traceback, inspector
+from typing import Any, Mapping
+
 import tracerite.html
 
+from html5tagger import E
+from tracerite import html_traceback, inspector
+
+from sanic.request import Request
+
+from .base import BasePage
+
+
 # Avoid showing the request in the traceback variable inspectors
-inspector.blacklist_types += Request,
+inspector.blacklist_types += (Request,)
+
 
 class ErrorPage(BasePage):
     STYLE_APPEND = tracerite.html.style
-    def __init__(self, title: str, text: str, request: Request, exc: Exception, full: bool) -> None:
+
+    def __init__(
+        self,
+        title: str,
+        text: str,
+        request: Request,
+        exc: Exception,
+        full: bool,
+    ) -> None:
         super().__init__()
         # Internal server errors come with the text of the exception, which we don't want to show to the user.
         # FIXME: This needs to be done some place else but I am not digging into that now.
@@ -35,26 +49,53 @@ class ErrorPage(BasePage):
             route_name = "[route not found]"
         with self.doc.main:
             self.doc.h1(f"⚠️ {self.title}").p(self.text)
-            context = getattr(self.exc, "context", None) or {}
-            if debug:
-                context.update(getattr(self.exc, "extra", None) or {})
-            # Show context and extra details if available on the exception
+            # Show context details if available on the exception
+            context = getattr(self.exc, "context", None)
             if context:
-                # Printing values may easily cause a new exception, so suppress it
-                with self.doc.table(id="exception-context"), suppress(Exception):
-                    for k, v in context.items():
-                        self.doc.tr.td(k).td(v)
+                self._key_value_table(
+                    "Exception context", "exception-context", context
+                )
+
             if not debug:
                 return
-            # Show additional details in debug mode, open by default for 500 errors
+            # Show additional details in debug mode,
+            # open by default for 500 errors
             with self.doc.details(open=self.full, class_="smalltext"):
-                self.doc.summary("Details for developers (Sanic debug mode only)")
+                # Show extra details if available on the exception
+                extra = getattr(self.exc, "extra", None)
+                if extra:
+                    self._key_value_table(
+                        "Exception extra data", "exception-extra", extra
+                    )
+
+                self.doc.summary(
+                    "Details for developers (Sanic debug mode only)"
+                )
                 if self.exc:
                     self.doc.h2(f"Exception in {route_name}:")
                     # skip_outmost=1 to hide Sanic.handle_request
-                    self.doc(html_traceback(self.exc, skip_outmost=1, include_js_css=False))
+                    self.doc(
+                        html_traceback(
+                            self.exc, skip_outmost=1, include_js_css=False
+                        )
+                    )
 
-                self.doc.h2(f"{self.request.method} {self.request.path}")
-                with self.doc.table(id="request-headers"):
-                    for k, v in self.request.headers.items():
-                        self.doc.tr.td(f"{k}:", class_="nobr").td(v)
+                self._key_value_table(
+                    f"{self.request.method} {self.request.path}",
+                    "request-headers",
+                    self.request.headers,
+                )
+
+    def _key_value_table(
+        self, title: str, table_id: str, data: Mapping[str, Any]
+    ) -> None:
+        with self.doc.table(id=table_id, class_="key-value-table"):
+            self.doc.caption(title)
+            for key, value in data.items():
+                try:
+                    self.doc.tr.td(key, class_="nobr key").td(value)
+                # Printing values may cause a new exception, so suppress it
+                except Exception:
+                    self.doc.tr.td(key, class_="nobr key").td(
+                        E.em("Unable to display value")
+                    )

sanic/pages/styles/BasePage.css

@@ -1,4 +1,3 @@
-
 /** BasePage **/
 html {
     font: 16px sans-serif;
@@ -9,6 +8,7 @@ html {
 body {
     margin: 0;
     font-size: 1.25rem;
+    --accent: #ff0d68;
 }
 
 body>* {

sanic/pages/styles/ErrorPage.css

@@ -1,2 +1,52 @@
 /** ErrorPage **/
-summary { color: #888; }
+summary {
+    color: #888;
+}
+
+.tracerite {
+    /* --color-var: var(--accent);
+    --color-val: #ff0; */
+    --color-type: var(--accent);
+}
+
+.key-value-table {
+    margin: 2rem 0;
+    border-collapse: collapse;
+}
+
+.key-value-table caption {
+    caption-side: top;
+    text-align: left;
+    font-size: 1.25rem;
+    font-weight: 700;
+    padding-bottom: 0.5rem;
+}
+
+.key-value-table td {
+    font-size: 1rem;
+    font-family: monospace;
+    border: 1px solid #888;
+    padding: 0.25rem;
+}
+
+.key-value-table .key {
+    color: var(--accent)
+}
+
+mark {
+    position: relative;
+}
+
+mark[data-symbol="💣"]::before {
+    content: "Exception raised";
+    display: none;
+    position: absolute;
+    top: -1.25em;
+    right: 0;
+    padding: 0.25em;
+    background-color: var(--accent);
+}
+
+mark[data-symbol="💣"]:hover::before {
+    display: block;
+}