AykutSarac/jsoncrack.com · error

Invalid JSON!

Error message

Invalid JSON!

What it means

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.

Source

Thrown at apps/www/src/pages/widget.tsx:69

      window.parent.postMessage(window.frameElement?.getAttribute("id"), "*");
    }
  }, [checkEditorSession, clearJson, isReady, push, query.json, query.partner]);

  React.useEffect(() => {
    const handler = (event: EmbedMessage) => {
      try {
        if (!event.data?.json) return;
        if (event.data?.options?.theme === "light" || event.data?.options?.theme === "dark") {
          setTheme(event.data.options.theme);
          toggleDarkMode(event.data.options.theme === "dark");
        }

        setContents({ contents: event.data.json, hasChanges: false });
        setDirection(event.data.options?.direction || "RIGHT");
      } catch (error) {
        console.error(error);
        toast.error("Invalid JSON!");
      }
    };

    window.addEventListener("message", handler);
    return () => window.removeEventListener("message", handler);
  }, [setColorScheme, setContents, setDirection, toggleDarkMode, theme]);

  React.useEffect(() => {
    setColorScheme(theme);
  }, [setColorScheme, theme]);

  return (
    <ThemeProvider theme={theme === "dark" ? darkTheme : lightTheme}>
      <Head>{generateNextSeo({ noindex: true, nofollow: true })}</Head>
      <ModalController />
      <div style={{ width: "100vw", height: "100vh" }}>
        <GraphView isWidget />
      </div>

View on GitHub (pinned to 3c9af69e23)

Solutions

  1. Validate event.data shape before acting on it (type-guard the EmbedMessage).
  2. Ensure the parent posts json as a parseable JSON string matching the widget's expected format.
  3. Narrow the catch: distinguish JSON.parse failures from state-setter failures so the message is accurate.
  4. Log the real error (already done via console.error) and inspect the browser console to find the true cause.

Example fix

// before
catch (error) {
  console.error(error);
  toast.error("Invalid JSON!");
}

// after — accurate messaging per cause
} catch (error) {
  console.error(error);
  toast.error(error instanceof SyntaxError ? "Invalid JSON!" : "Failed to load embedded content.");
}
Defensive patterns

Strategy: validation

Validate before calling

// Type-guard incoming postMessage payloads before acting
function isEmbedMessage(d: unknown): d is { json: string; options?: { theme?: "light" | "dark"; direction?: string } } {
  if (!d || typeof d !== "object") return false;
  const o = d as Record<string, unknown>;
  return typeof o.json === "string";
}

Type guard

// Narrow the message event data
export function isEmbedEvent(event: MessageEvent) {
  return event.data && typeof (event.data as any).json === "string";
}

Try / catch

// Narrow the catch so the toast reflects the real cause
} catch (error) {
  console.error(error);
  toast.error(error instanceof SyntaxError ? "Invalid JSON!" : "Failed to apply embedded content.");
}

Prevention

When it happens

Trigger: 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.

Common situations: 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.

Understand the failure class

Related errors

AI-assisted analysis of AykutSarac/jsoncrack.com@3c9af69e23 (2026-08-12). Data as JSON: /api/errors/2b46e76fca313e75. Report an issue: GitHub.