What causes "Failed to parse data (${syntaxErrorCount} syntax error(s))." in AykutSarac/jsoncrack.com?

Run the input through JSON.parse (or a strict validator) before passing it to JSONCrack if strict compliance is required.

AykutSarac/jsoncrack.com · warning · Error

Failed to parse data (${syntaxErrorCount} syntax error(s)).

Error message

Failed to parse data (${syntaxErrorCount} syntax error(s)).

What it means

Emitted by JSONCrackReact when the underlying jsonc-parser parseTree() returns a valid node tree but also records one or more ParseError entries in its error collector. jsonc-parser is a lenient parser (it tolerates comments, trailing commas, and other deviations), so it can produce a usable graph while still flagging syntax problems. The component still renders the graph but surfaces the count via the optional onParseError callback so consumers can decide how to react. It is informational, not a hard failure.

Source

Thrown at packages/jsoncrack-react/src/JSONCrackComponent.tsx:197

        setEdges([]);
        setLoading(false);
        callbacksRef.current.onParseError?.(result.error);
        return;
      }

      if (result.kind === "above-limit") {
        setTotalNodes(result.total);
        setAboveSupportedLimit(true);
        setNodes([]);
        setEdges([]);
        setLoading(false);
        return;
      }

      const { graph, syntaxErrorCount } = result;
      if (syntaxErrorCount > 0) {
        callbacksRef.current.onParseError?.(
          new Error(`Failed to parse data (${syntaxErrorCount} syntax error(s)).`)
        );
      }
      setTotalNodes(graph.nodes.length);
      setAboveSupportedLimit(false);
      setNodes(graph.nodes);
      setEdges(graph.edges);
      callbacksRef.current.onParse?.({ nodes: graph.nodes, edges: graph.edges });
      if (graph.nodes.length === 0) setLoading(false);
    }, [jsonText, maxRenderableNodes]);

    // Keep the viewport in sync with container resizes — react-zoomable-ui snapshots dimensions at creation and does not re-measure on its own.
    useEffect(() => {
      if (!viewPort) return;
      const container = containerRef.current;
      if (!container || typeof ResizeObserver === "undefined") return;

      const observer = new ResizeObserver(() => {
        if (container.clientWidth === 0 || container.clientHeight === 0) return;

View on GitHub (pinned to 3c9af69e23)

Solutions

Run the input through JSON.parse (or a strict validator) before passing it to JSONCrack if strict compliance is required.
If JSONC/JSON5 is intentional, ignore or downgrade this notification — the rendered graph is still correct.
Wire an onParseError handler on the JSONCrack component to capture the count and surface it in your own UI.
Sanitize the source: strip comments and trailing commas with a JSONC-aware tool before strict downstream use.

Example fix

// before
<JSONCrack json={rawText} />

// after — validate strict JSON and surface lenient-parse warnings
const [warnCount, setWarnCount] = useState(0);
const safeJson = useMemo(() => {
  try { JSON.parse(rawText); return rawText; }
  catch { return rawText; } // still hand it to JSONCrack for lenient render
}, [rawText]);
<JSONCrack
  json={safeJson}
  onParseError={err => {
    const m = err.message.match(/(\d+) syntax error/);
    if (m) setWarnCount(Number(m[1]));
  }}
/>

Defensive patterns

Strategy: validation

Validate before calling

// Validate strict JSON before rendering; JSONCrack is lenient (jsonc-parser)
export function isStrictJson(text: string): boolean {
  try { JSON.parse(text); return true; } catch { return false; }
}

Type guard

// Confirm a parse result carries lenient syntax errors
export function hasSyntaxWarnings(r: { kind: string; syntaxErrorCount?: number }): r is { kind: "ok"; syntaxErrorCount: number } {
  return r.kind === "ok" && (r.syntaxErrorCount ?? 0) > 0;
}

Try / catch

// onParseError is the supported hook; inspect the count
<JSONCrack
  json={text}
  onParseError={err => {
    const m = err.message.match(/(\d+) syntax error/);
    if (m) setWarningCount(Number(m[1]));
  }}
/>

Prevention

Run JSON.parse on user input before passing to JSONCrack if strict JSON is required.
Strip JSONC comments/trailing commas upstream if downstream tools are strict.
Wire onParseError to make lenient-parse warnings visible in your own UI.

When it happens

Trigger: Passing JSON text that is structurally interpretable but technically malformed: trailing commas (e.g. `{"a":1,}`), unquoted keys, single-quoted strings, line/block comments in a context treated as plain JSON, duplicate keys, or numbers/strings jsonc-parser can recover from. parseJsonGraph returns kind:"ok" with syntaxErrorCount = graph.errors.length > 0, which triggers the callback at JSONCrackComponent.tsx:196-198.

Common situations: Loading JSON5/JSONC content through a path that assumes strict JSON; pasting JSON produced by a lenient serializer; user-typed JSON in an editor with trailing commas; machine-generated JSON with comments. The graph still renders, so users may not realize the input is non-strict until they wire onParseError.

Understand the failure class

Parsing and encoding errors: unexpected token, malformed input — why parsers reject input and how to find the real culprit.

Related errors

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