onError handler not called in Edit/Create components with mutationMode="pessimistic"

[drfuturenet]

What you were expecting:
When using mutationMode="pessimistic" in Edit or Create components, the onError handler should be called when the DataProvider throws an HttpError, and error notifications should be displayed to the user.

What happened instead:
The onError handler is never called, and error notifications are not displayed, even though the DataProvider correctly throws HttpError objects. The form remains in a loading state without any user feedback about the error.

Steps to reproduce:

1. Create an Edit component with mutationMode="pessimistic"
2. Add an onError handler to the form (TabbedForm, SimpleForm, etc.)
3. Configure DataProvider to throw HttpError on update/create operations
4. Trigger an update/create operation that will fail
5. Observe that onError is never called and no error notification appears

Related code:

// Edit component
<Edit<Resource> mutationMode="pessimistic">
  <TabbedForm onError={(error) => {
    console.log('This never gets called'); // This never executes
    notify(error.message, { type: 'error' });
  }}>
    {/* form fields */}
  </TabbedForm>
</Edit>

// DataProvider update method
const update = async (resource, params) => {
  try {
    // API call that returns 400 error
    const response = await fetch(/* ... */);
    if (!response.ok) {
      throw new HttpError('Error message', 400, responseBody);
    }
  } catch (error) {
    // This HttpError is thrown but onError is never called
    throw new HttpError(error.message, error.status, error.body);
  }
};

Environment:

• React version: ^19.1.0
• React Admin version: ^5.8.1
• Browser: Chrome Version 140.0.7339.128 (Official Build) (64-bit)

Additional context:
Using mutationMode="optimistic" works correctly and displays error notifications. However, this would make the UI confusing.

This appears to be related to the closed issue #8428 from 2 years ago, which was closed without resolution. The problem affects both Create and Edit components when using pessimistic mutation mode.

[slax57]

There is no onError prop on <TabbedForm>, neither on <Form>.

onError should be passed as mutationOptions to <Edit> or <Create> like so:

<Edit mutationMode="pessimistic" mutationOptions={{ onError }}>
  <TabbedForm>
    {/* form fields */}
  </TabbedForm>
</Edit>

If you still have the error after fixing this issue, please provide a sandbox in which we can reproduce the issue, as requested in the issue template.
You can for instance fork this Stackblitz.

[drfuturenet]

Thank you. Yes, that is being hit. However, I've realised I didn't go to the root of my issue here.

The real issue is that the DataProvider.update() method correctly throws HttpError as per documentation, but the error message is not automatically displayed in the Notify component when using mutationMode="pessimistic".

Now that I'm hitting onError I could as a workaround use

const onError = (error: any) => {
  notify(error.message, { type: 'error' });
  return false;
};

However, I'd like to avoid that, because this should be automatic per React Admin docs. Every Edit component would need this boilerplate.

Any ideas on why this could be happening? Thanks!

[slax57]

I confirm react-admin should display the error message in a notification by default, even in pessimistic mode.

If you have found a case where this doesn't work, then, again, please provide a reproduction.
This will allow us to 1- confirm you code is valid and 2- debug the issue if the bug is confirmed.

[drfuturenet]

Hi there, sure thing. This should do it:
App.js

import React from 'react';
import { Admin, Resource, Edit, List, SimpleForm, TextInput, Datagrid, TextField, EditButton, HttpError } from 'react-admin';

// Mock DataProvider that throws HttpError to reproduce the bug
const dataProvider = {
  getList: (resource) => {
    console.log('DataProvider.getList called for:', resource);
    return Promise.resolve({ 
      data: [
        { id: 1, title: 'Test Post 1', content: 'Test content 1' },
        { id: 2, title: 'Test Post 2', content: 'Test content 2' }
      ], 
      total: 2 
    });
  },
  getOne: (resource, params) => {
    console.log('DataProvider.getOne called for:', resource, params);
    return Promise.resolve({ 
      data: { 
        id: params.id, 
        title: `Test Post ${params.id}`, 
        content: `Test content ${params.id}` 
      } 
    });
  },
  update: async (resource, params) => {
    console.log('DataProvider.update called with:', resource, params);
    
    // Simulate NetSuite API error
    throw new HttpError(
      'Status text not getting registered in Notify component',
      400,
      {
        errors: [
          {
            id: 'test-error-id',
            status: '400',
            title: 'My error title',
            detail: 'NONEXISTENT_FIELD'
          }
        ]
      }
    );
  },
  create: (resource, params) => {
    console.log('DataProvider.create called for:', resource, params);
    return Promise.resolve({ data: { id: Date.now(), ...params.data } });
  },
  delete: (resource, params) => {
    console.log('DataProvider.delete called for:', resource, params);
    return Promise.resolve({ data: { id: params.id } });
  },
  getMany: (resource, params) => {
    console.log('DataProvider.getMany called for:', resource, params);
    return Promise.resolve({ data: [] });
  },
  getManyReference: (resource, params) => {
    console.log('DataProvider.getManyReference called for:', resource, params);
    return Promise.resolve({ data: [], total: 0 });
  },
};

const PostList = () => {
  console.log('PostList component rendered');
  
  return (
    <List>
      <Datagrid>
        <TextField source="id" />
        <TextField source="title" />
        <TextField source="content" />
        <EditButton />
      </Datagrid>
    </List>
  );
};

const PostEdit = () => {
  console.log('PostEdit component rendered');
  
  return (
    <Edit mutationMode="pessimistic">
      <SimpleForm>
        <TextInput source="title" />
        <TextInput source="content" multiline />
      </SimpleForm>
    </Edit>
  );
};

const App = () => {
  console.log('App component rendered');
  
  return (
    <Admin dataProvider={dataProvider}>
      <Resource name="posts" list={PostList} edit={PostEdit} />
    </Admin>
  );
};

export default App;

package.json

{
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "react-admin": "^5.8.1",
    "@mui/material": "^5.14.0",
    "@emotion/react": "^11.11.0",
    "@emotion/styled": "^11.11.0"
  }
}

[slax57]

I see the issue now. You are returning an error body containing an errors key, which conflicts with react-admin Server-side Validation mechanism.

If you rename this key to anything else (i.e. errors2) then you will see an error notification with your error message (Status text not getting registered in Notify component) as expected.

See https://stackblitz.com/edit/github-dph9ckny?file=src%2Findex.tsx for an example.

So, to me, there is no issue, RA is working as expected. Hence I'm closing this ticket.

[drfuturenet]

Hi @slax57 , I see. Is there an official typing for the body property somewhere please? Looking into HttpError.ts the body seems to have a loose typing (public readonly body: any = null).

[slax57]

No there is not. There is a convention in react-admin that key/value pairs under the errors key will be interpreted as server-side validation errors, but the rest of the body can be anything. Hence we do not want to put a type on body that would be too restrictive.