✨ feat: Better errors

packages/web/src/components/Playground.tsx

@@ -4,6 +4,7 @@ import { editor } from "monaco-editor";
 import { useEffect, useRef, useState } from "react";
 import { useColorMode } from "@docusaurus/theme-common";
 import JSONSourceMap from "@mischnic/json-sourcemap";
+import { betterAjvErrors } from "@apideck/better-ajv-errors";
 
 // To use Ajv with the support of all JSON Schema draft-2019-09/2020-12
 // features you need to use a different export:
@@ -30,6 +31,16 @@ type Position = {
   pos: number;
 };
 
+type ValidationError = {
+  message: string;
+  suggestion?: string;
+  path: string;
+  context: {
+    errorType: string;
+    allowedValue?: string;
+  };
+};
+
 /* The EthDebug Playground: An interactive component for developers */
 /* and tinkerers to build and test EthDebug schemas.                */
 export default function Playground(props: PlaygroundProps): JSX.Element {
@@ -80,26 +91,36 @@ export default function Playground(props: PlaygroundProps): JSX.Element {
     if (!validate) return showError("Unable to validate schema");
     const sourceMap = getParsedEditorInput();
     validate(sourceMap.data);
-
-    showValidationErrors(validate.errors, sourceMap);
+    const betterErrors = betterAjvErrors({
+      //@ts-ignore
+      schema: schemas[props.schema.id],
+      data: sourceMap.data,
+      errors: validate.errors,
+    });
+    console.log(betterErrors, validate.errors);
+    showValidationErrors(betterErrors, sourceMap);
   }
 
   /**
    * Shows validation error in the Monaco editor
-   * @param {ErrorObject[] | null | undefined} errors - Validation errors if any
+   * @param {ValidationError[]} errors - Validation errors if any
    * @param {string} sourceMap - The source map of the editor input
    */
   function showValidationErrors(
-    errors: ErrorObject[] | null | undefined,
+    errors: ValidationError[],
     sourceMap: SourceMap
   ) {
     const model = editorRef.current?.getModel();
     if (!model || !monaco) return showError("Unable to validate schema");
     let markers = [];
     if (errors) {
       for (const [_, error] of Object.entries(errors)) {
-        let node = sourceMap.pointers[error.instancePath];
-        const message = error.message;
+        let instancePath = error.path.replace("{base}", "").replace(/\./g, "/");
+        let node = sourceMap.pointers[instancePath];
+        let message = error.message.replace("{base}", "").replace(/\./g, "/");
+        if (error.context.errorType == "const") {
+          message = `Expecting a constant value of "${error.context.allowedValue}"`;
+        }
 
         if (!node || !message) continue;