refactor(errorhandling): improve UX in error handling

Author: Markku Laine

backend/aim/handlers.py

@@ -27,7 +27,6 @@
 import tornado.websocket
 from loguru import logger
 from motor.motor_tornado import MotorDatabase
-from pydantic.error_wrappers import ValidationError
 from selenium.webdriver.chrome.webdriver import WebDriver as ChromeWebDriver
 from tornado.options import options
 
@@ -40,6 +39,7 @@
     METRICS_DIR,
     METRICS_FILE_PATTERN,
 )
+from aim.exceptions import ValidationError
 from aim.models import MessageBase, MessageImage, MessageInput, MessageURL
 from aim.tools import Screenshot
 
@@ -246,7 +246,30 @@ def on_message(self, message: Union[str, bytes]):
                     "session": session_id,
                     "datetime": utils.custom_isoformat(datetime.utcnow()),
                     "type": "ValidationError",
-                    "message": e.errors(),
+                    "message": str(e),
+                },
+            )
+
+            # Push error
+            self.write_message(
+                {
+                    "type": "error",
+                    "action": "pushValidationError",
+                    "message": str(e),
+                }
+            )
+        except ValueError as e:
+            logger.error("ValueError", e)
+
+            # Save error data
+            self._save_data(
+                "errors",
+                {
+                    "server": server_name,
+                    "session": session_id,
+                    "datetime": utils.custom_isoformat(datetime.utcnow()),
+                    "type": "ValueError",
+                    "message": e.errors()[0]["msg"],  # type: ignore
                 },
             )
 
@@ -255,7 +278,7 @@ def on_message(self, message: Union[str, bytes]):
                 {
                     "type": "error",
                     "action": "pushValidationError",
-                    "message": e.errors(),
+                    "message": e.errors()[0]["msg"],  # type: ignore
                 }
             )
         except NotImplementedError as e:

frontend/src/components/AIMForm.vue

@@ -30,7 +30,7 @@
             <h4 class="alert-heading">Validation Error</h4>
             <hr>
             <p>
-              <strong>Whoops!</strong> We are having some problems with your input, please try again with a different URL or image.
+              <strong>Whoops!</strong> We are having some problems with your input. Please refresh the page and try again with a different URL or image.
             </p>
           </div>
         </b-col>
@@ -66,6 +66,9 @@
             <div v-if="fileTooLarge" class="invalid-feedback">
               File is too large (max 5 MB).
             </div>
+            <div class="image-min-size">
+              Minimum size is 1280 x 800 pixels.
+            </div>
           </b-form>
         </b-col>
       </b-row>
@@ -748,6 +751,13 @@ header{
 .input-group.is-invalid ~ .invalid-feedback {
   display: block;
 }
+.image-min-size {
+  color: #999999;
+  display: block;
+  font-size: 80%;
+  margin-top: 0.25rem;
+  width: 100%;
+}
 
 .custom-control {
   display: inline;