Skip to content

useOnSubmit shows "Server communication error" notification even when submission errors (including root.serverError) are returned #657

@k117117117

Description

@k117117117

API Platform version(s) affected

  • @api-platform/admin: 4.0.9
  • react-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

  1. Configure getSubmissionErrors in the schema analyzer to return errors from the server response (required for OpenAPI setups, already built-in for Hydra)
  2. Return a response with root.serverError:
    {
      "errors": {
        "root": { "serverError": "Custom error message" },
        "title": "Title is required"
      }
    }
  3. Submit the form
  4. Expected: Notification shows "Custom error message" (from useNotifyIsFormInvalid)
  5. Actual: Notification shows "Server communication error" (from the default failure handler in useOnSubmit)

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 },
    });
  });

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions