Reduce output of config validation errors

src/pages/api/validate.js

@@ -1,9 +1,19 @@
 import checkAndCopyConfig from "utils/config/config";
+import createLogger from "utils/logger";
 
 const configs = ["docker.yaml", "settings.yaml", "services.yaml", "bookmarks.yaml", "kubernetes.yaml", "proxmox.yaml"];
+const logger = createLogger("configValidationHandler");
 
 export default async function handler(req, res) {
-  const errors = configs.map((config) => checkAndCopyConfig(config)).filter((status) => status !== true);
-
+  let errors = configs.map((config) => checkAndCopyConfig(config)).filter((status) => status !== true);
+  if (errors.length > 0) {
+    logger.error("Configuration validation errors", errors);
+    errors = errors.map((error) => ({
+      name: error.name,
+      config: error.config,
+      reason: error.reason,
+      mark: { line: error.mark?.line },
+    }));
+  }
   res.send(errors);
 }

src/pages/index.jsx

@@ -167,11 +167,13 @@ function Index({ initialSettings, fallback }) {
             >
               <div className="bg-amber-200 text-amber-800 dark:text-amber-200 dark:bg-amber-800 p-2 rounded-md font-bold">
                 <BiError className="float-right w-6 h-6" />
-                {error.config}
+                {error.name} - {error.config}
               </div>
               <div className="p-2 text-theme-100 dark:text-theme-200">
-                <pre className="opacity-50 font-bold pb-2">{error.reason}</pre>
-                <pre className="text-sm">{error.mark.snippet}</pre>
+                <pre className="opacity-50 font-bold pb-2">
+                  Reason: "{error.reason}" at line {error.mark?.line}
+                </pre>
+                <pre className="font-italic">Check logs for details.</pre>
               </div>
             </div>
           ))}