Error page

lnbits/app.py

@@ -6,7 +6,7 @@ import importlib
 import traceback
 import trio
 
-from fastapi import FastAPI
+from fastapi import FastAPI, Request
 from fastapi.middleware.cors import CORSMiddleware
 from fastapi.middleware.gzip import GZipMiddleware
 from fastapi.staticfiles import StaticFiles
@@ -162,21 +162,13 @@ def register_async_tasks(app):
     async def stop_listeners():
         pass
 
+templates = Jinja2Templates(directory="templates")
 
 def register_exception_handlers(app):
     @app.errorhandler(Exception)
-    async def basic_error(err):
+    async def basic_error(request: Request, err):
         print("handled error", traceback.format_exc())
         etype, value, tb = sys.exc_info()
         traceback.print_exception(etype, err, tb)
         exc = traceback.format_exc()
-        return (
-            "\n\n".join(
-                [
-                    "LNbits internal error!",
-                    exc,
-                    "If you believe this shouldn't be an error please bring it up on https://t.me/lnbits",
-                ]
-            ),
-            500,
-        )
+        return await templates.TemplateResponse("templates/error.html", {"request": request, "err": err})

lnbits/templates/error.html

@@ -0,0 +1,36 @@
+{% extends "public.html" %} {% block page %}
+<div class="row q-col-gutter-md justify-center">
+  <div class="col-12 col-md-7 col-lg-6 q-gutter-y-md">
+    <q-card class="q-pa-lg">
+      <q-card-section class="q-pa-none">
+        <center>
+          <h3 class="q-my-none">Error</h3>
+          <br />
+          <q-icon
+            name="warning"
+            class="text-grey"
+            style="font-size: 20rem"
+          ></q-icon>
+
+          <h5 class="q-my-none">{{ err }}</h5>
+          <h4>If you believe this shouldn't be an error please bring it up on https://t.me/lnbits</h4>
+          <br />
+        </center>
+      </q-card-section>
+    </q-card>
+  </div>
+
+  {% endblock %} {% block scripts %}
+
+  <script>
+    new Vue({
+      el: '#vue',
+      mixins: [windowMixin],
+      data: function () {
+        return {}
+      }
+    })
+  </script>
+
+  {% endblock %}
+</div>