{"record":{"id":"6d5564cfe3b098c1","repo":"AykutSarac/jsoncrack.com","slug":"json-parsing-failed-for-graph-mode","errorCode":null,"errorMessage":"JSON parsing failed for graph mode.","messagePattern":"JSON parsing failed for graph mode\\.","errorType":"validation","errorClass":null,"httpStatus":null,"severity":"error","filePath":"apps/chrome-extension/src/content-script.tsx","lineNumber":338,"sourceCode":"        const message = error instanceof Error ? error.message : \"Unable to load graph renderer.\";\n        setComponentError(message);\n      });\n\n    return () => {\n      active = false;\n    };\n  }, []);\n\n  const parsedJson = useMemo(() => {\n    try {\n      return JSON.parse(rawJson);\n    } catch {\n      return null;\n    }\n  }, [rawJson]);\n\n  if (parsedJson === null) {\n    return <div id=\"jsoncrack-graph-error\">JSON parsing failed for graph mode.</div>;\n  }\n\n  if (componentError) {\n    return <div id=\"jsoncrack-graph-error\">Graph renderer error: {componentError}</div>;\n  }\n\n  if (!JSONCrackComponent) {\n    return <div id=\"jsoncrack-graph-status\">Loading graph renderer...</div>;\n  }\n\n  return (\n    <div style={{ width: \"100%\", height: \"100%\" }}>\n      <JSONCrackComponent\n        json={parsedJson}\n        theme={theme}\n        showControls\n        showGrid\n        centerOnLayout","sourceCodeStart":320,"sourceCodeEnd":356,"githubUrl":"https://github.com/AykutSarac/jsoncrack.com/blob/3c9af69e23c635356293b6b28cf4cd0af10d1059/apps/chrome-extension/src/content-script.tsx#L320-L356","documentation":"The content script captures the page body text as rawJson and runs JSON.parse in a useMemo. If parsing throws, the component renders this static error div. It means the page body text — which the extension assumed was a JSON document based on document.contentType — is not parseable JSON, even though the content type claimed it was.","triggerScenarios":"Another JSON-viewer extension already prettified/wrapped the body text; document.body.innerText includes injected UI text around the JSON; truncated or partial response; contentType spoofed; an HTML error page served with a JSON content-type header.","commonSituations":"Conflicting JSON-viewer extension mutating the DOM; server returning 200 with an HTML body but a JSON content-type; streaming/partial response cut off.","solutions":["Prefer document.documentElement.textContent or fetch the raw body via the background script.","Trim and attempt a tolerant parse, or strip leading/trailing non-JSON noise.","Detect an HTML doctype and bail early with a clearer message.","Fall back to fetch(location.href) for the canonical response body when accessible."],"exampleFix":"// before\nconst parsedJson = useMemo(() => {\n  try {\n    return JSON.parse(rawJson);\n  } catch {\n    return null;\n  }\n}, [rawJson]);\n\n// after\nconst parsedJson = useMemo(() => {\n  const trimmed = rawJson.trim();\n  if (!trimmed.startsWith(\"{\") && !trimmed.startsWith(\"[\")) return null;\n  try {\n    return JSON.parse(trimmed);\n  } catch {\n    return null;\n  }\n}, [rawJson]);","handlingStrategy":"validation","validationCode":"function tryParseRawJson(raw: string): unknown | null {\n  const trimmed = raw.trim();\n  if (!trimmed.startsWith(\"{\") && !trimmed.startsWith(\"[\")) return null;\n  try {\n    return JSON.parse(trimmed);\n  } catch {\n    return null;\n  }\n}","typeGuard":"function looksLikeJsonBody(raw: string): boolean {\n  const t = raw.trim();\n  return (t.startsWith(\"{\") && t.endsWith(\"}\")) || (t.startsWith(\"[\") && t.endsWith(\"]\"));\n}","tryCatchPattern":"const parsedJson = useMemo(() => tryParseRawJson(rawJson), [rawJson]);\nif (parsedJson === null) {\n  return <div id=\"jsoncrack-graph-error\">JSON parsing failed for graph mode.</div>;\n}","preventionTips":["Prefer document.documentElement.textContent over innerText, which can include injected UI text.","Detect an HTML doctype early and skip rendering to avoid confusing parse-failure messages.","Consider fetching the canonical body via the background script to avoid DOM mutations by other extensions."],"tags":["chrome-extension","json-parse","content-script","dom"],"backgroundTag":null,"analyzedSha":"3c9af69e23c635356293b6b28cf4cd0af10d1059","analyzedAt":"2026-08-12T19:00:27.891Z","schemaVersion":2},"datasetVersion":"2026-08-12T23:17:12.415Z"}