{"record":{"id":"4f513cdff699b501","repo":"AykutSarac/jsoncrack.com","slug":"graph-renderer-error-componenterror","errorCode":null,"errorMessage":"Graph renderer error: {componentError}","messagePattern":"Graph renderer error: (.+?)","errorType":"console","errorClass":null,"httpStatus":null,"severity":"error","filePath":"apps/chrome-extension/src/content-script.tsx","lineNumber":342,"sourceCode":"    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\n        onNodeClick={node => setSelectedNode(node)}\n        renderNodeLimitExceeded={() => <NodeLimitUpgrade />}\n      />\n      <NodeModal nodeData={selectedNode} onClose={() => setSelectedNode(null)} />","sourceCodeStart":324,"sourceCodeEnd":360,"githubUrl":"https://github.com/AykutSarac/jsoncrack.com/blob/3c9af69e23c635356293b6b28cf4cd0af10d1059/apps/chrome-extension/src/content-script.tsx#L324-L360","documentation":"Rendered when componentError state is non-null, i.e. loadJsonCrackComponent() rejected (see the renderer-load failure). The div interpolates the captured message, often containing the CSP blocked-URL or chunk-load detail. This is the visible symptom the user sees in place of the graph.","triggerScenarios":"Same root causes as the renderer-load failure: CSP block, missing chunk, bundler/manifest misconfiguration, or a side effect of the temporary Worker shadowing.","commonSituations":"Same as the renderer-load failure; corporate sites with strict CSP; extension built without exposing chunks via web_accessible_resources.","solutions":["Read the interpolated message — it usually contains the CSP/blocked-URL detail.","Apply the renderer-load fixes (web_accessible_resources, single-file bundle, extension-origin assets).","Add a retry affordance that clears the memoized jsonCrackComponentPromise and re-imports.","Distinguish 'import failed' from 'Worker blocked' so guidance can be targeted."],"exampleFix":"// before\nconst loadJsonCrackComponent = async () => {\n  if (jsonCrackComponentPromise) return jsonCrackComponentPromise;\n  jsonCrackComponentPromise = (async () => { /* import */ })();\n  return jsonCrackComponentPromise;\n};\n\n// after\nconst loadJsonCrackComponent = async () => {\n  if (jsonCrackComponentPromise) return jsonCrackComponentPromise;\n  jsonCrackComponentPromise = (async () => { /* import */ })();\n  try {\n    return await jsonCrackComponentPromise;\n  } catch (e) {\n    jsonCrackComponentPromise = null; // allow retry\n    throw e;\n  }\n};","handlingStrategy":"retry","validationCode":"// Allow the memoized import promise to be retried after a failure\nfunction resetLoaderOnFailure() {\n  jsonCrackComponentPromise = null;\n}","typeGuard":null,"tryCatchPattern":"try {\n  return await jsonCrackComponentPromise;\n} catch (e) {\n  jsonCrackComponentPromise = null; // allow retry on next user action\n  throw e;\n}","preventionTips":["Read the interpolated componentError — it usually contains the CSP blocked-URL or chunk path.","Expose a retry button that clears the memoized promise and re-imports after the user fixes CSP/resources.","Distinguish import-failed from Worker-blocked so guidance can be targeted."],"tags":["chrome-extension","csp","dynamic-import","ui-text","content-script"],"backgroundTag":null,"analyzedSha":"3c9af69e23c635356293b6b28cf4cd0af10d1059","analyzedAt":"2026-08-12T19:00:27.891Z","schemaVersion":2},"datasetVersion":"2026-08-12T23:17:12.415Z"}