Add custom 500 error page. Display the traceback. Center and format error page in general.

Also add a link to github for reporting the exception.

2 files changed, 39 insertions, 1 deletions

diff --git a/youtube/__init__.py b/youtube/__init__.py
index 534b9f8..d8171c0 100644
--- a/youtube/__init__.py
+++ b/youtube/__init__.py
@@ -1,5 +1,6 @@
 import flask
 import settings
+import traceback
 yt_app = flask.Flask(__name__)
 yt_app.url_map.strict_slashes = False
 
@@ -30,3 +31,7 @@ def commatize(num):
     if isinstance(num, str):
         num = int(num)
     return '{:,}'.format(num)
+
+@yt_app.errorhandler(500)
+def error_page(e):
+    return flask.render_template('error.html', traceback=traceback.format_exc()), 500
diff --git a/youtube/templates/error.html b/youtube/templates/error.html
index e77c92c..27b68ff 100644
--- a/youtube/templates/error.html
+++ b/youtube/templates/error.html
@@ -1,7 +1,40 @@
 {% set page_title = 'Error' %}
 {% extends "base.html" %}
 
+{% block style %}
+    h1{
+        font-size: 32px;
+        font-weight: normal;
+    }
+    #error-box, #error-message{
+        background-color: var(--interface-color);
+        width: 80%;
+        margin: auto;
+        margin-top: 20px;
+        padding: 5px;
+    }
+    #error-box > div, #error-box > p, #error-box > h1{
+        white-space: pre-wrap;
+        margin-bottom: 10px;
+    }
+    .code-box{
+        padding: 5px;
+        border-style:solid;
+        border-width:1px;
+        border-radius:5px;
+    }
+{% endblock style %}
+
 {% block main %}
-    {{ error_message }}
+    {% if traceback %}
+        <div id="error-box">
+            <h1>500 Uncaught exception:</h1>
+            <div class="code-box"><code>{{ traceback }}</code></div>
+            <p>Please report this issue at <a href="https://github.com/user234683/youtube-local/issues" target="_blank">https://github.com/user234683/youtube-local/issues</a></p>
+            <p>Remember to include the traceback in your issue and redact any information in it you do not want to share</p>
+        </div>
+    {% else %}
+        <div id="error-message">{{ error_message }}</div>
+    {% endif %}
 {% endblock %}