Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Server errors cause Runtime error in List component (v4) #7415

Closed
timukasr opened this issue Mar 23, 2022 · 2 comments
Closed

Server errors cause Runtime error in List component (v4) #7415

timukasr opened this issue Mar 23, 2022 · 2 comments
Assignees
@fzaninotto
Labels
bug

Comments

@timukasr
Copy link

What you were expecting:
When loading data from server fails, expecting generic error message in red toast

What happened instead:
Full error modal:

Unhandled Runtime Error
TypeError: Cannot read properties of undefined (reading 'length')

Steps to reproduce:
Configure data provider with invalid URL or return non 2xx status code from server

Related code:
Easiest to use invalid URL for data provider:

const UserList = () => (
  <List>
    <Datagrid rowClick="edit">
      <TextField source="id" />
      <TextField source="name" />
    </Datagrid>
  </List>
);

const dataProvider = jsonServerProvider("https://jsonplaceholder.typicode.com/invalid"); // invalid API URL here
const AdminApp = () => (
  <Admin dataProvider={dataProvider}>
    <Resource name="users" list={UserList} />
  </Admin>
);

Using ListGuesser works as expected:

const dataProvider = jsonServerProvider("https://jsonplaceholder.typicode.com/invalid");
const AdminApp = () => (
  <Admin dataProvider={dataProvider}>
    <Resource name="users" list={ListGuesser} />
  </Admin>
);

Other information:

Environment

  • React-admin version: 4.0.0-beta.3
  • Last version that did not exhibit the issue (if applicable): 4.0.0-beta.3
  • React version: 17.0.2
  • Browser: Chrome 99.0.4844.74
  • Stack trace (in case of a JS error):
Unhandled Runtime Error
TypeError: Cannot read properties of undefined (reading 'length')

Call Stack
eval
node_modules\ra-ui-materialui\dist\esm\index.js (3:26492)
renderWithHooks
node_modules\react-dom\cjs\react-dom.development.js (14985:0)
updateForwardRef
node_modules\react-dom\cjs\react-dom.development.js (17044:0)
beginWork
node_modules\react-dom\cjs\react-dom.development.js (19098:0)
HTMLUnknownElement.callCallback
node_modules\react-dom\cjs\react-dom.development.js (3945:0)
Object.invokeGuardedCallbackDev
node_modules\react-dom\cjs\react-dom.development.js (3994:0)
invokeGuardedCallback
node_modules\react-dom\cjs\react-dom.development.js (4056:0)
beginWork$1
node_modules\react-dom\cjs\react-dom.development.js (23964:0)
performUnitOfWork
node_modules\react-dom\cjs\react-dom.development.js (22776:0)
workLoopSync
node_modules\react-dom\cjs\react-dom.development.js (22707:0)
renderRootSync
node_modules\react-dom\cjs\react-dom.development.js (22670:0)
performSyncWorkOnRoot
node_modules\react-dom\cjs\react-dom.development.js (22293:0)
eval
node_modules\react-dom\cjs\react-dom.development.js (11327:0)
unstable_runWithPriority
node_modules\react-dom\node_modules\scheduler\cjs\scheduler.development.js (468:0)
runWithPriority$1
node_modules\react-dom\cjs\react-dom.development.js (11276:0)
flushSyncCallbackQueueImpl
node_modules\react-dom\cjs\react-dom.development.js (11322:0)
flushSyncCallbackQueue
node_modules\react-dom\cjs\react-dom.development.js (11309:0)
NotifyManager.batchedUpdates$1 [as batchNotifyFn]
node_modules\react-dom\cjs\react-dom.development.js (22387:0)
eval
node_modules\react-query\es\core\notifyManager.js (75:0)

The above error occurred in the <Datagrid> component:

    at eval (webpack-internal:///./node_modules/ra-ui-materialui/dist/esm/index.js:382:36722)
    at div
    at eval (webpack-internal:///./node_modules/@emotion/react/dist/emotion-element-cbed451f.browser.esm.js:57:66)
    at Paper (webpack-internal:///./node_modules/@mui/material/Paper/Paper.js:85:82)
    at eval (webpack-internal:///./node_modules/@emotion/react/dist/emotion-element-cbed451f.browser.esm.js:57:66)
    at Card (webpack-internal:///./node_modules/@mui/material/Card/Card.js:51:82)
    at div
    at div
    at eval (webpack-internal:///./node_modules/@emotion/react/dist/emotion-element-cbed451f.browser.esm.js:57:66)
    at ListView (webpack-internal:///./node_modules/ra-ui-materialui/dist/esm/index.js:402:12788)
    at ListContextProvider (webpack-internal:///./node_modules/ra-core/dist/esm/index.js:300:16307)
    at ResourceContextProvider (webpack-internal:///./node_modules/ra-core/dist/esm/index.js:293:7334)
    at ListBase (webpack-internal:///./node_modules/ra-core/dist/esm/index.js:300:16679)
    at List (webpack-internal:///./node_modules/ra-ui-materialui/dist/esm/index.js:402:17604)
    at UserList
    at Routes (webpack-internal:///./node_modules/react-router/index.js:276:5)
    at ResourceContextProvider (webpack-internal:///./node_modules/ra-core/dist/esm/index.js:293:7334)
    at Resource (webpack-internal:///./node_modules/ra-core/dist/esm/index.js:293:7476)
    at Routes (webpack-internal:///./node_modules/react-router/index.js:276:5)
    at ErrorBoundary (webpack-internal:///./node_modules/react-error-boundary/dist/react-error-boundary.umd.js:69:37)
    at div
    at main
    at div
    at div
    at eval (webpack-internal:///./node_modules/@emotion/react/dist/emotion-element-cbed451f.browser.esm.js:57:66)
    at Layout (webpack-internal:///./node_modules/ra-ui-materialui/dist/esm/index.js:380:71840)
    at div
    at Routes (webpack-internal:///./node_modules/react-router/index.js:276:5)
    at CoreAdminRoutes (webpack-internal:///./node_modules/ra-core/dist/esm/index.js:293:3335)
    at Routes (webpack-internal:///./node_modules/react-router/index.js:276:5)
    at CoreAdminUI (webpack-internal:///./node_modules/ra-core/dist/esm/index.js:293:5680)
    at AdminUI (webpack-internal:///./node_modules/ra-ui-materialui/dist/esm/index.js:411:7486)
    at InnerThemeProvider (webpack-internal:///./node_modules/@mui/system/esm/ThemeProvider/ThemeProvider.js:21:70)
    at ThemeProvider (webpack-internal:///./node_modules/@mui/private-theming/ThemeProvider/ThemeProvider.js:47:5)
    at ThemeProvider (webpack-internal:///./node_modules/@mui/system/esm/ThemeProvider/ThemeProvider.js:41:5)
    at ThemeProvider (webpack-internal:///./node_modules/ra-ui-materialui/dist/esm/index.js:380:81958)
    at ResourceDefinitionContextProvider (webpack-internal:///./node_modules/ra-core/dist/esm/index.js:292:54420)
    at NotificationContextProvider (webpack-internal:///./node_modules/ra-core/dist/esm/index.js:292:8125)
    at I18nContextProvider (webpack-internal:///./node_modules/ra-core/dist/esm/index.js:292:8696)
    at Router (webpack-internal:///./node_modules/react-router/index.js:210:15)
    at HistoryRouter (webpack-internal:///./node_modules/ra-core/dist/esm/index.js:292:782)
    at BasenameContextProvider (webpack-internal:///./node_modules/ra-core/dist/esm/index.js:292:1271)
    at AdminRouter (webpack-internal:///./node_modules/ra-core/dist/esm/index.js:292:1407)
    at QueryClientProvider (webpack-internal:///./node_modules/react-query/es/react/QueryClientProvider.js:39:21)
    at StoreContextProvider (webpack-internal:///./node_modules/ra-core/dist/esm/index.js:292:6883)
    at CoreAdminContext (webpack-internal:///./node_modules/ra-core/dist/esm/index.js:292:54815)
    at AdminContext (webpack-internal:///./node_modules/ra-ui-materialui/dist/esm/index.js:411:7908)
    at Admin (webpack-internal:///./node_modules/react-admin/dist/esm/index.js:18:264)
    at AdminApp
    at LoadableImpl (webpack-internal:///./node_modules/next/dist/shared/lib/loadable.js:101:38)
    at AdminPage
    at div
    at Layout (webpack-internal:///./components/layout/Layout.tsx:22:26)
    at MyApp (webpack-internal:///./pages/_app.tsx:75:28)
    at ErrorBoundary (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/client.js:8:20584)
    at ReactDevOverlay (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/client.js:8:23125)
    at Container (webpack-internal:///./node_modules/next/dist/client/index.js:357:9)
    at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:791:26)
    at Root (webpack-internal:///./node_modules/next/dist/client/index.js:915:27)

React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary.
@fzaninotto fzaninotto added the bug label Mar 23, 2022
@fzaninotto
Copy link
Member

Reproduced, thanks for the report.

@fzaninotto fzaninotto self-assigned this Mar 23, 2022
fzaninotto added a commit that referenced this issue Mar 23, 2022
@fzaninotto
Fix List when dataProvider.getList returns an error
5cc275a 
Closes #7415
@fzaninotto fzaninotto mentioned this issue Mar 23, 2022
Merged
@fzaninotto
Copy link
Member

Fixed by #7423

@mytharcher mytharcher mentioned this issue Oct 6, 2022
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@fzaninotto fzaninotto

Labels
bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@fzaninotto @timukasr