How to handle server error of data provider in React-admin?

When we were working with the react admin tool we got into a situation where the API server was not stable and in many cases, the react-admin was showing a broken grid. We wanted to handle this case gracefully. The user experience of the broken grid was not good. We wanted to provide a better user experience. It looks like the following:

We really wanted to show a message with a notification in case of the server error. We were using the following httpClient:

const httpClient = (url, options = {}) => {
    if (!options.headers) {
        options.headers = new Headers({ Accept: 'application/json' });
    }
    const token = localStorage.getItem('token');
    options.headers.set('Authorization', "Bearer " +  token);
    return fetchUtils.fetchJson(url, options);
};

Reason of the issue

The server errors were not properly handled in react admin until the version 3.3.3. We were using an older version of react-admin. We upgraded the “react-admin”: “^3.5.2” and “ra-data-simple-rest”: “^3.5.2”.

Set a custom message for server error

Try the following code to add a custom notification message from the server.

    return fetchUtils.fetchJson(url, options)
        .catch(error => {
        return new Promise(function(resolve, reject) {
            reject({message: "Something went wrong, please try again."});
        });
    });

The above code will handle the server error and will show a custom message.

Source:
Simple data provider react admin
Handle server error react admin