Allow to provide additional details in error dialogue

Author: Lord-Grey

assets/webconfig/i18n/en.json

@@ -1232,6 +1232,9 @@
     "wiz_yeelight_desc2": "Now choose which lamps should be added. The position assigns the lamp to a specific position on your \"picture\". Disabled lamps won't be added. To identify single lamps press the button on the right.",
     "wiz_yeelight_intro1": "This wizard configures Hyperion for the Yeelight system. Features are the Yeelights' auto detection, setting each light to a specific position on your picture or disable it and tune the Hyperion settings automatically! So in short: All you need are some clicks and you are done!",
     "wiz_yeelight_title": "Yeelight Wizard",
-    "wiz_yeelight_unsupported": "Unsupported"
+    "wiz_yeelight_unsupported": "Unsupported",
+    "ws_error_occured": "WebSocket error occured",
+    "ws_not_supported": "Websocket is not supported by your browser",
+    "ws_processing_exception": "Exception during Websocket message processing"    
 }
 

assets/webconfig/js/content_index.js

@@ -242,11 +242,11 @@ $(document).ready(function () {
   $(window.hyperion).on("error", function (event) {
     //If we are getting an error "No Authorization" back with a set loginToken we will forward to new Login (Token is expired.
     //e.g.: hyperiond was started new in the meantime)
-    if (event.reason == "No Authorization" && getStorage("loginToken")) {
+    if (event.reason.message == "No Authorization" && getStorage("loginToken")) {
       removeStorage("loginToken");
       requestRequiresDefaultPasswortChange();
     } else {
-      showInfoDialog("error", "Error", event.reason);
+      showInfoDialog("error", "", event.reason.message, event.reason.details);
     }
   });
 

assets/webconfig/js/hyperion.js

@@ -126,27 +126,50 @@ function initWebSocket() {
               if (error == "Service Unavailable") {
                 window.location.reload();
               } else {
-                $(window.hyperion).trigger({ type: "error", reason: error });
+                const errorData = Array.isArray(response.errorData) ? response.errorData : [];
+                console.log("[window.websocket::onmessage] ", error, ", Description:", errorData);
+                $(window.hyperion).trigger({
+                  type: "error",
+                  reason: {
+                    message: error,
+                    details: errorData.map((item) => item.description || "")
+                  }
+                });
               }
-              let errorData = response.hasOwnProperty("errorData") ? response.errorData : "";
-              console.log("[window.websocket::onmessage] ", error, ", Description:", errorData);
             }
         }
         catch (exception_error) {
-          $(window.hyperion).trigger({ type: "error", reason: exception_error });
-          console.log("[window.websocket::onmessage] ", exception_error)
+          console.log("[window.websocket::onmessage] ", exception_error);
+          $(window.hyperion).trigger({
+            type: "error",
+            reason: {
+              message: $.i18n("ws_processing_exception") + ": " + exception_error.message,
+              details: [exception_error.stack]
+            }
+          });
         }
       };
 
       window.websocket.onerror = function (error) {
-        $(window.hyperion).trigger({ type: "error", reason: error });
-        console.log("[window.websocket::onerror] ", error)
+        console.log("[window.websocket::onerror] ", error);
+        $(window.hyperion).trigger({
+          type: "error",
+          reason: {
+            message: $.i18n("ws_error_occured"),
+            details: [error]
+          }
+        });
       };
     }
   }
   else {
-    $(window.hyperion).trigger("error");
-    alert("Websocket is not supported by your browser");
+    $(window.hyperion).trigger({
+      type: "error",
+      reason: {
+        message: $.i18n("ws_not_supported"),
+        details: []
+      }
+    });
   }
 }
 

assets/webconfig/js/ui_utils.js

@@ -307,7 +307,7 @@ function setClassByBool(obj, enable, class1, class2) {
   }
 }
 
-function showInfoDialog(type, header, message) {
+function showInfoDialog(type, header = "", message = "", details = []) {
   if (type == "success") {
     $('#id_body').html('<i style="margin-bottom:20px" class="fa fa-check modal-icon-check">');
     if (header == "")
@@ -321,9 +321,10 @@ function showInfoDialog(type, header, message) {
     $('#id_footer').html('<button type="button" class="btn btn-warning" data-dismiss="modal">' + $.i18n('general_btn_ok') + '</button>');
   }
   else if (type == "error") {
-    $('#id_body').html('<i style="margin-bottom:20px" class="fa fa-warning modal-icon-error">');
-    if (header == "")
+    $('#id_body').html('<i style="margin-bottom:20px" class="fa fa-warning modal-icon-error"></i>');
+    if (header == "") {
       $('#id_body').append('<h4 style="font-weight:bold;text-transform:uppercase;">' + $.i18n('infoDialog_general_error_title') + '</h4>');
+    }
     $('#id_footer').html('<button type="button" class="btn btn-danger" data-dismiss-modal="#modal_dialog">' + $.i18n('general_btn_ok') + '</button>');
   }
   else if (type == "select") {
@@ -394,6 +395,24 @@ function showInfoDialog(type, header, message) {
   if (type == "select" || type == "iswitch")
     $('#id_body').append('<select id="id_select" class="form-control" style="margin-top:10px;width:auto;"></select>');
 
+  // Append details if available
+  if (Array.isArray(details) && details.length > 0) {
+
+    // Create a container div for additional details with proper styles
+    const detailsContent = $('<div></div>').css({
+      'text-align': 'left',
+      'white-space': 'pre-wrap',     // Ensures newlines are respected
+      'word-wrap': 'break-word',     // Prevents long words from overflowing
+      'margin-top': '15px'
+    });
+
+    detailsContent.append('<hr>');
+    details.forEach((desc, index) => {
+      detailsContent.append(document.createTextNode(`${index + 1}. ${desc}\n`));
+    });
+    $('#id_body').append(detailsContent);
+  }
+
   if (getStorage("darkMode") == "on")
     $('#id_logo').attr("src", 'img/hyperion/logo_negativ.png');