{"record":{"id":"551f3bfad89d187e","repo":"AykutSarac/jsoncrack.com","slug":"this-graph-has-totalnodes-nodes-and-exceeds-the","errorCode":null,"errorMessage":"This graph has ${totalNodes} nodes and exceeds the maxRenderableNodes limit (${maxRenderableNodes}).","messagePattern":"This graph has (.+?) nodes and exceeds the maxRenderableNodes limit \\((.+?)\\)\\.","errorType":"validation","errorClass":null,"httpStatus":null,"severity":"warning","filePath":"packages/jsoncrack-react/src/JSONCrackComponent.tsx","lineNumber":585,"sourceCode":"        aria-label=\"JSON data visualization\"\n        onContextMenu={event => event.preventDefault()}\n        {...bindLongPress()}\n      >\n        {showControls && (\n          <Controls\n            onFocusRoot={viewPortApi.focusFirstNode}\n            onCenterView={viewPortApi.centerView}\n            onZoomOut={viewPortApi.zoomOut}\n            onZoomIn={viewPortApi.zoomIn}\n          />\n        )}\n\n        {aboveSupportedLimit &&\n          (tooLargeContent ? (\n            tooLargeContent\n          ) : (\n            <div className={styles.tooLarge}>\n              {`This graph has ${totalNodes} nodes and exceeds the maxRenderableNodes limit (${maxRenderableNodes}).`}\n            </div>\n          ))}\n\n        {loading && (\n          <div className={styles.overlay}>\n            <div className={styles.spinner} />\n          </div>\n        )}\n\n        <Space\n          onCreate={nextViewPort => {\n            setViewPort(nextViewPort);\n            onViewportCreateRef.current?.(nextViewPort);\n          }}\n          onContextMenu={event => event.preventDefault()}\n          treatTwoFingerTrackPadGesturesLikeTouch={trackpadZoom}\n          className=\"jsoncrack-space\"\n          style={{","sourceCodeStart":567,"sourceCodeEnd":603,"githubUrl":"https://github.com/AykutSarac/jsoncrack.com/blob/3c9af69e23c635356293b6b28cf4cd0af10d1059/packages/jsoncrack-react/src/JSONCrackComponent.tsx#L567-L603","documentation":"Not a thrown error — it is the inline UI string rendered in the tooLarge overlay when the parsed graph's node count exceeds the maxRenderableNodes prop (default 1500). parseJsonGraph returns { kind:\"above-limit\", total }, which sets aboveSupportedLimit=true and totalNodes, hiding the canvas and showing this message (or a caller-supplied renderNodeLimitExceeded renderer). It is a capacity gate to keep ELK layout and reaflow rendering performant.","triggerScenarios":"Supplying JSON whose flattened node count (every object/array/value becomes a node in parser.ts) is greater than maxRenderableNodes. E.g. a large array of objects with many keys, or deeply nested structures. Triggered deterministically by parseJsonGraph returning kind:\"above-limit\" at canvasHelpers.ts:80-82.","commonSituations":"Loading a multi-megabyte API dump; rendering a database export; default 1500 limit hit by moderately large real-world payloads; forgetting to raise the limit for a known-large dataset.","solutions":["Raise the maxRenderableNodes prop on JSONCrack (be mindful of ELK layout time and DOM weight).","Reduce the input size before passing it (filter/summarize the JSON).","Provide a renderNodeLimitExceeded renderer to give users actionable guidance instead of the default string.","If raising the limit, verify performance on the target hardware — reaflow renders one DOM node per graph node."],"exampleFix":"// before\n<JSONCrack json={bigJson} />\n\n// after — raise the cap and supply a custom overlay\n<JSONCrack\n  json={bigJson}\n  maxRenderableNodes={5000}\n  renderNodeLimitExceeded={(total, max) => (\n    <p>{total} nodes (limit {max}). Refine the query to render.</p>\n  )}\n/>","handlingStrategy":"validation","validationCode":"// Count nodes cheaply before rendering to stay under the cap\nimport { parseGraph } from \"jsoncrack-react/parser\";\nexport function nodeCountOf(text: string): number {\n  try { return parseGraph(text).nodes.length; } catch { return Infinity; }\n}","typeGuard":"// Detect the above-limit parse branch\nexport function isAboveLimit(r: { kind: string; total?: number }): r is { kind: \"above-limit\"; total: number } {\n  return r.kind === \"above-limit\";\n}","tryCatchPattern":"// Not a thrown error — gate rendering on the limit\nconst result = parseJsonGraph(text, maxRenderableNodes);\nif (result.kind === \"above-limit\") {\n  // show your own UX instead of the default overlay\n  return <TooLarge total={result.total} max={maxRenderableNodes} />;\n}","preventionTips":["Pre-aggregate or filter large JSON before rendering.","Pick a maxRenderableNodes that matches your target device's rendering budget.","Provide renderNodeLimitExceeded so users get actionable guidance."],"tags":["jsoncrack-react","capacity","rendering","ui"],"backgroundTag":null,"analyzedSha":"3c9af69e23c635356293b6b28cf4cd0af10d1059","analyzedAt":"2026-08-12T19:00:27.891Z","schemaVersion":2},"datasetVersion":"2026-08-12T23:17:12.415Z"}