Merge branch 'ui-more-detailed-error-msgs' into 'main'

Show more detailed error messages in frontend

Closes #308

See merge request reportcreator/reportcreator!421

CHANGELOG.md

@@ -10,6 +10,7 @@
 * Fix resizing PDF viewer loses mouse focus in Firefox
 * Add raptor mascot images as to empty pages
 * Increase contrast of nested form fields
+* Show more detailed error messages in frontend
 
 
 ## v2024.3 - 2024-01-09

frontend/src/utils/toast.ts

@@ -1,3 +1,4 @@
+import isObject from "lodash/isObject";
 import { useToast } from "vue-toastification";
 
 export function requestErrorToast({ error, message }: { error: any, message?: string}) {
@@ -17,12 +18,18 @@ export function requestErrorToast({ error, message }: { error: any, message?: st
   }
   if (error?.data?.detail) {
     message += ': ' + error?.data?.detail;
-  } else if (Array.isArray(error?.data) && error?.data?.length === 1) {
-    message += ': ' + error?.data[0];
+  } else if (Array.isArray(error?.data)) {
+    message += ': ' + error.data.join(', ')
+  } else if (error?.data?.non_field_errors) {
+    message += ': ' + error.data.non_field_errors.join(', ');
   } else if (error?.status === 429) {
     message += ': Exceeded rate limit. Try again later.';
+  } else if (isObject(error?.data)) {
+    const entries = Object.values(error.data)
+      .filter(v => Array.isArray(v))
+      .flat();
+    message += ': ' + entries.join(', ');
   }
-
   errorToast(message);
 }