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

  1. Pre-validate JSON.parse(getJson()) before importing jq and surface a specific 'invalid JSON' message instead of the generic toast.
  2. Split the catch so dynamic-import rejection (asset load) is distinguishable from jq execution failure.
  3. Include error.message in the toast so the user sees the jq parser position.
  4. 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

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.