AykutSarac/jsoncrack.com · warning

errors[0]?.message

Error message

errors[0]?.message

What it means

Monaco editor's onValidate callback receives errors — an array of editor.IMarker objects from the JSON language service (or the configured JSON schema validator). errors[0]?.message extracts the first marker's message and stores it in the error state, which drives the 'Invalid' label in BottomBar. This is not a thrown exception; it is Monaco's diagnostics pipeline surfacing syntax/schema problems in the editor buffer.

Source

Thrown at apps/www/src/features/editor/TextEditor.tsx:89

  }, [getHasChanges]);

  const handleMount: OnMount = useCallback(editor => {
    editor.onDidPaste(() => {
      editor.getAction("editor.action.formatDocument")?.run();
    });
  }, []);

  return (
    <StyledEditorWrapper>
      <StyledWrapper>
        <Editor
          height="100%"
          language={fileType}
          theme={theme}
          value={contents}
          options={editorOptions}
          onMount={handleMount}
          onValidate={errors => setError(errors[0]?.message || "")}
          onChange={contents => setContents({ contents, skipUpdate: true })}
          loading={<LoadingOverlay visible />}
        />
      </StyledWrapper>
    </StyledEditorWrapper>
  );
};

export default TextEditor;

const StyledEditorWrapper = styled.div`
  display: flex;
  flex-direction: column;
  height: 100%;
  user-select: none;
`;

const StyledWrapper = styled.div`

View on GitHub (pinned to 3c9af69e23)

Solutions

  1. Hover the BottomBar popover to read the stored message and jump to the location.
  2. Use Monaco's quick-fix or the format-on-paste hook (editor.onDidPaste already runs formatDocument).
  3. Ensure the configured JSON schema actually matches the document being edited.
  4. Fix the first reported error — Monaco revalidates and the message updates on each change.

Example fix

// before
onValidate={errors => setError(errors[0]?.message || "")}

// after
onValidate={errors => setError(errors[0]?.message ?? "")}
Defensive patterns

Strategy: validation

Validate before calling

// Validate before relying on the stored error
function firstMarkerMessage(errors: { message?: string }[]): string {
  return errors[0]?.message ?? "";
}

Type guard

function hasMarkers(errors: unknown): errors is { message: string }[] {
  return Array.isArray(errors) && errors.length > 0 && typeof errors[0]?.message === "string";
}

Try / catch

onValidate={errors => setError(hasMarkers(errors) ? errors[0].message : "")}

Prevention

When it happens

Trigger: Typing an unclosed brace, trailing comma, or duplicate key; content failing the configured JSON schema (jsonSchema in useFile); pasting minified JSON with a structural error; switching the language mode to JSON from non-JSON content.

Common situations: Transient mid-edit errors that clear as the user finishes typing; schema mismatch after loading a schema intended for a different document shape; stale marker after a bulk replace.

Related errors


AI-assisted analysis of AykutSarac/jsoncrack.com@3c9af69e23 (2026-08-12). Data as JSON: /api/errors/eef68846411fe5f3. Report an issue: GitHub.