{"record":{"id":"2b46e76fca313e75","repo":"AykutSarac/jsoncrack.com","slug":"invalid-json","errorCode":null,"errorMessage":"Invalid JSON!","messagePattern":"Invalid JSON!","errorType":"validation","errorClass":null,"httpStatus":null,"severity":"error","filePath":"apps/www/src/pages/widget.tsx","lineNumber":69,"sourceCode":"\n window.parent.postMessage(window.frameElement?.getAttribute(\"id\"), \"*\");\n }\n }, [checkEditorSession, clearJson, isReady, push, query.json, query.partner]);\n\n React.useEffect(() => {\n const handler = (event: EmbedMessage) => {\n try {\n if (!event.data?.json) return;\n if (event.data?.options?.theme === \"light\" || event.data?.options?.theme === \"dark\") {\n setTheme(event.data.options.theme);\n toggleDarkMode(event.data.options.theme === \"dark\");\n }\n\n setContents({ contents: event.data.json, hasChanges: false });\n setDirection(event.data.options?.direction || \"RIGHT\");\n } catch (error) {\n console.error(error);\n toast.error(\"Invalid JSON!\");\n }\n };\n\n window.addEventListener(\"message\", handler);\n return () => window.removeEventListener(\"message\", handler);\n }, [setColorScheme, setContents, setDirection, toggleDarkMode, theme]);\n\n React.useEffect(() => {\n setColorScheme(theme);\n }, [setColorScheme, theme]);\n\n return (\n \n {generateNextSeo({ noindex: true, nofollow: true })}\n \n

\n \n

","sourceCodeStart":51,"sourceCodeEnd":87,"githubUrl":"https://github.com/AykutSarac/jsoncrack.com/blob/3c9af69e23c635356293b6b28cf4cd0af10d1059/apps/www/src/pages/widget.tsx#L51-L87","documentation":"Shown by the widget page's window message handler when ANY error occurs while ingesting a postMessage from a parent frame. The handler reads event.data.json and event.data.options, then calls setContents/setDirection/toggleDarkMode. The catch is broad and always reports 'Invalid JSON!' even though the real cause may be unrelated to JSON validity (e.g. a state setter throwing). It is a user-facing toast, not a logged exception beyond console.error.","triggerScenarios":"Parent window calls postMessage with an EmbedMessage whose json is not a string the store can ingest; options.theme is an unexpected value reaching toggleDarkMode; setContents throws because contentToJson rejects the payload (wrong format, malformed); or any throw inside the try block. Fires from widget.tsx:60-70.","commonSituations":"Embedding the widget in an iframe and posting a non-JSON string; posting an object instead of a string for json; posting options with an unhandled theme value; format mismatch between posted content and the store's current format.","solutions":["Validate event.data shape before acting on it (type-guard the EmbedMessage).","Ensure the parent posts json as a parseable JSON string matching the widget's expected format.","Narrow the catch: distinguish JSON.parse failures from state-setter failures so the message is accurate.","Log the real error (already done via console.error) and inspect the browser console to find the true cause."],"exampleFix":"// before\ncatch (error) {\n console.error(error);\n toast.error(\"Invalid JSON!\");\n}\n\n// after — accurate messaging per cause\n} catch (error) {\n console.error(error);\n toast.error(error instanceof SyntaxError ? \"Invalid JSON!\" : \"Failed to load embedded content.\");\n}","handlingStrategy":"validation","validationCode":"// Type-guard incoming postMessage payloads before acting\nfunction isEmbedMessage(d: unknown): d is { json: string; options?: { theme?: \"light\" | \"dark\"; direction?: string } } {\n if (!d || typeof d !== \"object\") return false;\n const o = d as Record;\n return typeof o.json === \"string\";\n}","typeGuard":"// Narrow the message event data\nexport function isEmbedEvent(event: MessageEvent) {\n return event.data && typeof (event.data as any).json === \"string\";\n}","tryCatchPattern":"// Narrow the catch so the toast reflects the real cause\n} catch (error) {\n console.error(error);\n toast.error(error instanceof SyntaxError ? \"Invalid JSON!\" : \"Failed to apply embedded content.\");\n}","preventionTips":["Validate event.origin and the message shape before trusting postMessage data.","Keep the try block limited to JSON ingestion so state-setter failures aren't mislabeled 'Invalid JSON'.","Log the real error; the current console.error is the only diagnostic."],"tags":["postmessage","iframe","widget","embed","ui"],"backgroundTag":null,"analyzedSha":"3c9af69e23c635356293b6b28cf4cd0af10d1059","analyzedAt":"2026-08-12T19:00:27.891Z","schemaVersion":2},"datasetVersion":"2026-08-12T23:17:12.415Z"}