AykutSarac/jsoncrack.com · error
error
Error message
error
What it means
Logged by the updateJson hook when running a jq query against the current document via the jq-web WASM module. The catch fires when JSON.parse(getJson()) throws on malformed editor content, when the dynamic import("jq-web") rejects (WASM asset blocked/missing), or when the jq query string is syntactically invalid. The WASM engine surfaces a generic Error whose message usually cites the parser position.
Source
Thrown at apps/www/src/hooks/useJsonQuery.ts:22
const useJsonQuery = () => {
const getJson = useJson(state => state.getJson);
const setContents = useFile(state => state.setContents);
const transformer = async ({ value }) => {
const { run } = await import("json_typegen_wasm");
return run("Root", value, JSON.stringify({ output_mode: "typescript/typealias" }));
};
const updateJson = async (query: string, cb?: () => void) => {
try {
const jq = await import("jq-web");
const res = await jq.promised.json(JSON.parse(getJson()), query);
setContents({ contents: JSON.stringify(res, null, 2) });
cb?.();
} catch (error) {
console.error(error);
toast.error("Unable to process the request.");
}
};
const getJsonType = async () => {
const types = await transformer({ value: getJson() });
return types;
};
return { updateJson, getJsonType };
};
export default useJsonQuery;
View on GitHub (pinned to 3c9af69e23)
Solutions
- Pre-validate JSON.parse(getJson()) before importing jq and surface a specific 'invalid JSON' message instead of the generic toast.
- Split the catch so dynamic-import rejection (asset load) is distinguishable from jq execution failure.
- Include error.message in the toast so the user sees the jq parser position.
- Pin or upgrade jq-web if the WASM asset repeatedly fails to load.
Example fix
// before
try {
const jq = await import("jq-web");
const res = await jq.promised.json(JSON.parse(getJson()), query);
setContents({ contents: JSON.stringify(res, null, 2) });
cb?.();
} catch (error) {
console.error(error);
toast.error("Unable to process the request.");
}
// after
let parsed: unknown;
try {
parsed = JSON.parse(getJson());
} catch {
return toast.error("Editor content is not valid JSON.");
}
try {
const jq = await import("jq-web");
const res = await jq.promised.json(parsed, query);
setContents({ contents: JSON.stringify(res, null, 2) });
cb?.();
} catch (error) {
console.error(error);
toast.error(error instanceof Error ? error.message : "Unable to process the request.");
} Defensive patterns
Strategy: validation
Validate before calling
// Run before invoking jq
function isValidJsonInput(value: string): boolean {
try {
JSON.parse(value);
return true;
} catch {
return false;
}
}
if (!isValidJsonInput(getJson())) {
toast.error("Editor content is not valid JSON.");
return;
} Type guard
function isJqWebModule(mod: unknown): mod is { promised: { json: (input: unknown, q: string) => Promise<unknown> } } {
return typeof (mod as any)?.promised?.json === "function";
} Try / catch
try {
const jq = await import("jq-web");
if (!isJqWebModule(jq)) throw new Error("jq-web module shape unexpected");
const res = await jq.promised.json(JSON.parse(getJson()), query);
} catch (error) {
if (error instanceof SyntaxError) toast.error("Invalid JSON input: " + error.message);
else if (error instanceof Error) toast.error("jq error: " + error.message);
else toast.error("Unable to process the request.");
} Prevention
- Pre-validate the editor buffer with JSON.parse before exposing the jq query input.
- Pin jq-web to a known-good version and verify the WASM asset URL is reachable in CI.
- Show error.message in the toast so users can self-diagnose query typos.
When it happens
Trigger: Calling updateJson with a malformed jq expression (e.g. unterminated pipe '.users[] | .name'); invoking it while the editor buffer holds non-JSON text so JSON.parse(getJson()) throws SyntaxError; jq-web's .wasm file 404ing behind a CDN/proxy so import("jq-web") rejects.
Common situations: Typo in the jq query input box; editor left with a trailing comma or comment that breaks JSON.parse; jq-web version pin where the WASM asset moved on the CDN; pasting a JMESPath/JSONPath expression instead of jq syntax.
Related errors
AI-assisted analysis of AykutSarac/jsoncrack.com@3c9af69e23 (2026-08-12).
Data as JSON: /api/errors/b65f001065d9ee90.
Report an issue: GitHub.