Improved error display

searx/static/themes/eelo/css/eelo.css

@@ -79,6 +79,18 @@ a {
 #page_not_found_404 img {
   max-width: 70%;
 }
+#errors {
+  border: 2px solid #e06572;
+  border-radius: 8px;
+  padding: 8px;
+}
+#errors .title {
+  margin-top: 0;
+  margin-bottom: 8px;
+}
+#errors pre {
+  background-color: rgba(224, 101, 114, 0.1);
+}
 .inline {
   display: flex;
   flex-direction: row;
@@ -323,7 +335,7 @@ pre {
   background: rgba(0, 0, 0, 0.1);
   padding: 8px 16px;
   border-radius: 8px;
-  white-space: pre-wrap;
+  white-space: pre-line;
 }
 footer {
   position: absolute;

searx/static/themes/eelo/less/eelo/base.less

@@ -51,7 +51,7 @@ pre {
   background: @dim-color-lighter;
   padding: @spacing_medium @spacing_large;
   border-radius: @corner-radius;
-  white-space: pre-wrap;
+  white-space: pre-line;
 }
 
 

searx/static/themes/eelo/less/eelo/layout.less

@@ -56,6 +56,19 @@
     max-width: 70%;
   }
 }
+#errors {
+  .widget-border(@color_danger);
+  border-radius: @corner-radius;
+  padding: @spacing_medium;
+
+  .title {
+    margin-top: 0;
+    margin-bottom: @spacing_medium;
+  }
+  pre {
+    background-color: fade(@color_danger, 10%);
+  }
+}
 
 
 .inline {

searx/templates/eelo/base.html

@@ -55,24 +55,6 @@
 
     {% set inline_search_form = true %}
     <main>
-        
-    {# Ignore errors for now, they might not be very useful #}
-    {% if errors and False %}
-        <div class="error danger" role="alert">
-            <div class="header">
-                <strong class="lead">{{ _('Error!') }}</strong>
-
-                <button class="close" data-dismiss="alert" type="button">
-                    {{ icon("close") }}
-                </button>
-            </div>
-            <ul>
-                {% for message in errors %}
-                <li>{{ message }}</li>
-                {% endfor %}
-            </ul>
-        </div>
-    {% endif %}
 
     {% block site_alert_error %}
     {% endblock %}

searx/templates/eelo/index.html

 {% extends "eelo/base.html" %}
 {% block content %}
+
+{% if errors %}
+{% from 'eelo/macros.html' import errors_panel %}
+<div class="content-small-centered">
+    {{ errors_panel(errors, error_details) }}
+</div>
+{% endif %}
+
 <div id="index">
     <img src="{{ url_for('static', filename='img/logo_searx_a.png') }}" alt="searx logo" />
     <img id="logo_inline" src="{{ url_for('static', filename='img/logo_eelo_inline.png') }}" alt="e logo" />

searx/templates/eelo/macros.html

@@ -129,4 +129,21 @@
 {% elif filesize < 1024*1024*1024 %}{{ '{0:0.2f}'.format(filesize/1024/1024) }} {{ _('MiB') }}
 {% elif filesize < 1024*1024*1024*1024 %}{{ '{0:0.2f}'.format(filesize/1024/1024/1024) }} {{ _('GiB') }}
 {% else %}{{ '{0:0.2f}'.format(filesize/1024/1024/1024/1024) }} {{ _('TiB') }}{% endif %}
+{%- endmacro %}
+
+
+{% macro errors_panel(errors, error_detail) -%}
+<section id="errors" class="danger">
+    <h4 class="title">{{_("Error")}}</h4>
+    <ul>
+        {% for message in errors %}
+        <li>{{ message }}</li>
+        {% endfor %}
+    </ul>
+    {% if error_detail %}
+    <pre>
+{{error_detail}}
+    </pre>
+    {% endif %}
+</section>
 {%- endmacro %}
\ No newline at end of file

searx/templates/eelo/preferences.html

@@ -191,6 +191,11 @@
 
 
     <div id="info">
+        {% if errors %}
+        {% from 'eelo/macros.html' import errors_panel %}
+        {{ errors_panel(errors) }}
+        {% endif %}
+
         <div id="notice">
             <p>{{ _('These settings are stored in your cookies, this allows us not to store this data about you.') }}
             <br/>

searx/templates/eelo/results.html

@@ -123,6 +123,11 @@
         </div>
 
         <div>
+            {% if errors %}
+            {% from 'eelo/macros.html' import errors_panel %}
+            {{ errors_panel(errors) }}
+            {% endif %}
+            
             {% if infoboxes %}
                 {% for infobox in infoboxes %}
                     {% include 'eelo/components/infobox.html' %}

searx/webapp.py

@@ -459,7 +459,7 @@ def index_error(exn, output):
         return jsonify({"error": f"{user_error}: {exn}"})
 
     request.errors.append(user_error)
-    return render('index.html')
+    return render('index.html', error_details=exn)
 
 
 @app.route('/search', methods=['GET', 'POST'])