marmelab / marmelab/react-admin

Inconsistent rendering of errors in List components

Open
#8,801 2 comments 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
26.9k
Forks
5.5k
Avg merge
2d 3h
Merged PRs (30d)
19

Description

What you were expecting:

When the dataProvider.getList() call fails, components rendering a list should render something meaningful and consistent.

What happened instead:

  • For fetcher components
    • <List> renders the error messages twice (once in the notification, once in the <Error> component), and if the content component renders it, too, that's three times
    • <ReferenceManyField> renders the notification (no error component)
  • For content components
    • <Datagrid> and <SimpleList> render <ListNoResults>, which is misleading
    • <SingleFieldList> fails.

Besides, in the <List> component, it is not possible to override / hide the <Error> render (cf https://github.com/marmelab/react-admin/issues/8528#issuecomment-1369117499).

Steps to reproduce:

Check the Storybook for List / Error in Fetch : https://react-admin-storybook.vercel.app/?path=/story/ra-ui-materialui-list-list--error-in-fetch

Capture d’écran 2023-04-04 à 06 33 17

Other information:

Which component should handle the error case? In my opinion, just like for the loading case, it's the content components' responsibility (<Datagrid>, <SimpleList>, etc), not the fetcher component (<List>, etc). But I'm open to discussion on this one.

Environment

  • React-admin version: 4.x
  • Last version that did not exhibit the issue (if applicable): n/a
  • React version: 17
  • Browser: Chrome

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Open the Storybook “List / Error in Fetch” story and reproduce the failures across List, ReferenceManyField, Datagrid, SimpleList, and SingleFieldList. Review the issue’s proposed responsibility split, then define and validate a consistent, non-duplicated error state with an overridable List error render; the issue needs a decided behavior before implementation can be considered done.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.