-
-
Notifications
You must be signed in to change notification settings - Fork 132
Description
API Platform version(s) affected
@api-platform/admin: 4.0.9react-admin: 5.14.x
Description
When a server returns submission errors (including root.serverError), the default failure handler in useOnSubmit always shows a generic ra.notification.http_error ("Server communication error") notification — even though submissionErrors are successfully extracted and returned to the form.
React Admin's useNotifyIsFormInvalid hook is designed to display the root.serverError message from form state, but the generic notification from useOnSubmit fires first, resulting in a confusing user experience.
This is related to #488.
How to reproduce
- Configure
getSubmissionErrorsin the schema analyzer to return errors from the server response (required for OpenAPI setups, already built-in for Hydra) - Return a response with
root.serverError:{ "errors": { "root": { "serverError": "Custom error message" }, "title": "Title is required" } } - Submit the form
- Expected: Notification shows "Custom error message" (from
useNotifyIsFormInvalid) - Actual: Notification shows "Server communication error" (from the default
failurehandler inuseOnSubmit)
Root cause
In useOnSubmit.ts, the default failure handler (lines 94–110):
const failure =
mutationOptions?.onError ??
((error: string | Error) => {
let message = 'ra.notification.http_error';
if (!submissionErrors) {
message =
typeof error === 'string' ? error : error.message || message;
}
// ...
notify(message, {
type: 'warning',
messageArgs: { _: errorMessage },
});
});When submissionErrors is truthy, the if (!submissionErrors) block is skipped, so message stays as 'ra.notification.http_error'. The notify() call still executes, showing the generic error.
Possible Solution
Add an early return when submissionErrors exists, so the notification is left to React Admin's useNotifyIsFormInvalid:
const failure =
mutationOptions?.onError ??
((error: string | Error) => {
if (submissionErrors) {
return;
}
let message = 'ra.notification.http_error';
message =
typeof error === 'string' ? error : error.message || message;
// ...
notify(message, {
type: 'warning',
messageArgs: { _: errorMessage },
});
});