feat(editor): enhance interactive JSON schema validation errors#354
feat(editor): enhance interactive JSON schema validation errors#354itvi-1234 wants to merge 3 commits into
Conversation
Preview Deployed!
Last updated at 2026-06-27T18:45:23Z |
|
Hi @AgniveshChaubey & @jagpreetrahi , COuld you please review the PR whenever you have time ,I think preview is failing , It is not showing all the changes Original one - 
Preview - 
|
AgniveshChaubey
left a comment
AgniveshChaubey
left a comment
There was a problem hiding this comment.
Actions status looks successful. Will need to check what can be issue here.
Anyways, here are couple of points based on local deployment:
-
right now, the error popup opens up only for
JSON Schemarelated error, not forJSONsyntax errors. Figuring out JSON syntax error can be a bit tricky, but we'll have to somehow cover JSON syntax errors as well. -
I can see clicking the json schema doc button takes us to the official json schema page. But I highly doubt if JSON Schema has a dedicated page for each keyword. Maybe we can use the learnjsonschema.com website in our case, because as of now, it has a dedicated page for keyword of dialect 2020-12.
itvi-1234
force-pushed
the
feature/clickable-validation-errors
branch
2 times, most recently
from
236004c to
81fd854
Compare
Signed-off-by: itvi-1234 <rjsumit71@gmail.com>
itvi-1234
force-pushed
the
feature/clickable-validation-errors
branch
from
81fd854 to
a8366ed
Compare
Signed-off-by: itvi-1234 <rjsumit71@gmail.com>
Signed-off-by: itvi-1234 <rjsumit71@gmail.com>
AgniveshChaubey
left a comment
AgniveshChaubey
left a comment
There was a problem hiding this comment.
Left some comments. We're definitely moving in the right direction.
| ]; | ||
| const SUPPORTED_DIALECTS = ["https://json-schema.org/draft/2020-12/schema"]; | ||
|
|
||
| const getKeywordDocLink = (keywordLabel: string) => { |
There was a problem hiding this comment.
possibly we can put this function a sepaarte utils file
| } | ||
| ); | ||
| unregisterSchema(schemaId); | ||
| setMetaSchemaOutputFormat("BASIC"); |
There was a problem hiding this comment.
Let's not remove the comment from here. It is providing an importaent info and might ve very useful in future during debugging.
| } catch (err) { | ||
| const message = err instanceof Error ? err.message : String(err); | ||
|
|
||
| setSchemaValidation({ |
There was a problem hiding this comment.
Currently, because of this filtering, we're missing important information that should be surfaced to the user. Indeed we're properly tracing and following the error, but when we look at the error message (for example when I put a value of type as objec instead of object), it says some misleadning things ("/type: invalid anyOf", in case of above example). Actually all the repititive errors blocks for the same location contains different meta-validation failures. We need to figure out a way to utilize those error blocks and detrive a meaningful error message for the end user. With quick google search, i found one library under Hyperjump unbrella itself (https://github.com/hyperjump-io/json-schema-errors). We can explore how helpful this can be in our case.
| {schemaValidation.schemaErrors.map((err, i) => ( | ||
| <li | ||
| key={i} | ||
| className={`flex items-center gap-2 pr-2 rounded transition-colors group ${activeErrorIndex === i ? 'bg-[var(--popup-header-bg-color)]' : 'hover:bg-[var(--popup-header-bg-color)]' |
There was a problem hiding this comment.
I think we should wrap this into a separate component.
2 participants
Description
This PR introduces a major upgrade to the JSON Schema validation UX within the Monaco Editor. We have replaced the static error reporting system with an interactive, highly visual overlay that guides users precisely to the source of their schema errors and provides actionable documentation links.
closes #335
Key Features & Improvements
@hyperjump/json-schemaexecution to use the"BASIC"output format, successfully exposing the exact rule and JSON pointer path of schema violations.backdrop-blur-smoverlay appears over the graph visualization panel displaying a list of errors.getHighlightedNodeRangeFromPath) to sync the editor with validation errors.hover-out), providing clear context of the currently selected error.getKeywordDocLink) that reads the failed Hyperjump keyword (e.g.maxLength,enum) and provides a directtarget="_blank"link to the relevant section of the official Understanding JSON Schema documentation.Technical Changes
MonacoEditor.tsxto handle the newSchemaValidationErrortype containingpathanddocLink.Testing Instructions
"type": "int"instead of"integer").<BsBoxArrowUpRight>) to confirm it opens the correct Official JSON Schema documentation page.