Handle server validation without assuming every error belongs to a known input.

• Keep user values after failure.
• Normalize public field-key casing once.
• Show a fallback for unknown errors.
• Never display stack traces.

I parse only the public error contract, split known field keys from the remainder, then focus the summary. A transport failure gets recovery wording rather than pretending it is validation.

async function submit(values: CreateUserInput) {
  setPending(true);
  setFieldErrors({});
  setFormError(null);
  try {
    const response = await fetch("/api/users", {
      method: "POST", headers: { "content-type": "application/json" },
      body: JSON.stringify(values)
    });
    if (response.ok) return router.push("/users");
    const problem = await response.json().catch(() => null) as ApiProblem | null;
    if (response.status === 400 && problem?.errors) {
      const known = pickKnownFields(problem.errors, ["displayName", "email"]);
      setFieldErrors(known.fields);
      setFormError(known.other.length ? known.other.join(" ") : null);
    } else {
      setFormError(`Save failed. Reference: ${problem?.traceId ?? "unavailable"}`);
    }
    requestAnimationFrame(() => summaryRef.current?.focus());
  } catch {
    setFormError("The service could not be reached. Try again.");
    requestAnimationFrame(() => summaryRef.current?.focus());
  } finally { setPending(false); }
}

The mapper depends on stable machine keys, not message prose. Unknown fields remain visible so backend contract changes do not silently disappear.

• Response body is not JSON.
• Several messages target one field.
• The API returns 409.
• The network fails before response.

• Test known and unknown keys together.
• Assert values remain.
• Assert trace id appears only in safe fallback text.

• Matching English messages.
• Dropping unknown errors.
• Clearing inputs after rejection.
• Treating every non-200 as field validation.