{"record":{"id":"f0f892841a6b2b95","repo":"AykutSarac/jsoncrack.com","slug":"failed-to-parse-data-syntaxerrorcount-syntax-e","errorCode":null,"errorMessage":"Failed to parse data (${syntaxErrorCount} syntax error(s)).","messagePattern":"Failed to parse data \\((.+?) syntax error\\(s\\)\\)\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"warning","filePath":"packages/jsoncrack-react/src/JSONCrackComponent.tsx","lineNumber":197,"sourceCode":"        setEdges([]);\n        setLoading(false);\n        callbacksRef.current.onParseError?.(result.error);\n        return;\n      }\n\n      if (result.kind === \"above-limit\") {\n        setTotalNodes(result.total);\n        setAboveSupportedLimit(true);\n        setNodes([]);\n        setEdges([]);\n        setLoading(false);\n        return;\n      }\n\n      const { graph, syntaxErrorCount } = result;\n      if (syntaxErrorCount > 0) {\n        callbacksRef.current.onParseError?.(\n          new Error(`Failed to parse data (${syntaxErrorCount} syntax error(s)).`)\n        );\n      }\n      setTotalNodes(graph.nodes.length);\n      setAboveSupportedLimit(false);\n      setNodes(graph.nodes);\n      setEdges(graph.edges);\n      callbacksRef.current.onParse?.({ nodes: graph.nodes, edges: graph.edges });\n      if (graph.nodes.length === 0) setLoading(false);\n    }, [jsonText, maxRenderableNodes]);\n\n    // Keep the viewport in sync with container resizes — react-zoomable-ui snapshots dimensions at creation and does not re-measure on its own.\n    useEffect(() => {\n      if (!viewPort) return;\n      const container = containerRef.current;\n      if (!container || typeof ResizeObserver === \"undefined\") return;\n\n      const observer = new ResizeObserver(() => {\n        if (container.clientWidth === 0 || container.clientHeight === 0) return;","sourceCodeStart":179,"sourceCodeEnd":215,"githubUrl":"https://github.com/AykutSarac/jsoncrack.com/blob/3c9af69e23c635356293b6b28cf4cd0af10d1059/packages/jsoncrack-react/src/JSONCrackComponent.tsx#L179-L215","documentation":"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.","triggerScenarios":"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.","commonSituations":"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.","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."],"exampleFix":"// before\n<JSONCrack json={rawText} />\n\n// after — validate strict JSON and surface lenient-parse warnings\nconst [warnCount, setWarnCount] = useState(0);\nconst safeJson = useMemo(() => {\n  try { JSON.parse(rawText); return rawText; }\n  catch { return rawText; } // still hand it to JSONCrack for lenient render\n}, [rawText]);\n<JSONCrack\n  json={safeJson}\n  onParseError={err => {\n    const m = err.message.match(/(\\d+) syntax error/);\n    if (m) setWarnCount(Number(m[1]));\n  }}\n/>","handlingStrategy":"validation","validationCode":"// Validate strict JSON before rendering; JSONCrack is lenient (jsonc-parser)\nexport function isStrictJson(text: string): boolean {\n  try { JSON.parse(text); return true; } catch { return false; }\n}","typeGuard":"// Confirm a parse result carries lenient syntax errors\nexport function hasSyntaxWarnings(r: { kind: string; syntaxErrorCount?: number }): r is { kind: \"ok\"; syntaxErrorCount: number } {\n  return r.kind === \"ok\" && (r.syntaxErrorCount ?? 0) > 0;\n}","tryCatchPattern":"// onParseError is the supported hook; inspect the count\n<JSONCrack\n  json={text}\n  onParseError={err => {\n    const m = err.message.match(/(\\d+) syntax error/);\n    if (m) setWarningCount(Number(m[1]));\n  }}\n/>","preventionTips":["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."],"tags":["json","parsing","jsonc-parser","jsoncrack-react"],"backgroundTag":null,"analyzedSha":"3c9af69e23c635356293b6b28cf4cd0af10d1059","analyzedAt":"2026-08-12T19:00:27.891Z","schemaVersion":2},"datasetVersion":"2026-08-12T23:17:12.415Z"}