[DataGrid] ErrorOverlay not showing when attempting to show that error has occured.

[ThukuWakogi]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

Setting the error prop in DataGrid component makes the table not display any data despite the being data.

<DataGrid
  autoHeight
  columns={columns}
  rows={results}
  disableColumnMenu
  disableColumnSelector
  loading={isRequesting}
  localeText={{ noRowsLabel: 'No Orders', errorOverlayDefaultLabel: 'An error occurred.' }}
  error={requestStatus === 'failed'} // makes table not display data
/>

Also attempting to manually add ErrorOverlay doesn't seem to work. And ErrorOverlay is not exported from @mui/x-data-grid

import { ErrorOverlay } from '@mui/x-data-grid';

// Module '"@mui/x-data-grid"' has no exported member 'ErrorOverlay'.

Expected behavior 🤔

Error overlay to be displayed on Error.

Steps to reproduce 🕹

Add any value to error prop.

<DataGrid columns={columns} rows={rows} error /> // any value

Context 🔦

Notify user when an error occurs.

Your environment 🌎

`npx @mui/envinfo`

  System:
    OS: macOS High Sierra 10.13.6
  Binaries:
    Node: 16.13.1 - /usr/local/bin/node
    Yarn: 1.22.17 - /usr/local/bin/yarn
    npm: 8.2.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 98.0.4758.80
    Edge: Not Found
    Firefox: Not Found
    Safari: 13.1.2
  npmPackages:
    @emotion/react: ^11.7.1 => 11.7.1 
    @emotion/styled: ^11.6.0 => 11.6.0 
    @mui/base:  5.0.0-alpha.68 
    @mui/icons-material: ^5.4.1 => 5.4.1 
    @mui/material: ^5.4.1 => 5.4.1 
    @mui/private-theming:  5.4.1 
    @mui/styled-engine:  5.4.1 
    @mui/system:  5.4.1 
    @mui/types:  7.1.1 
    @mui/utils:  5.4.1 
    @mui/x-data-grid: ^5.5.1 => 5.5.1 
    @types/react: 17.0.38 => 17.0.38 
    react: 17.0.2 => 17.0.2 
    react-dom: 17.0.2 => 17.0.2 
    typescript: 4.5.5 => 4.5.5 

Order ID 💳 (optional)

No response

[cherniavskii]

Hey @ThukuWakogi
If I understand correctly, you want to show error overlay conditionally.
Currently, error prop has any type, so you'll have to pass undefined explicitly to not show error overlay, like this:

-error={requestStatus === 'failed'}
+error={requestStatus === 'failed' || undefined}

But while creating a codesandbox demo, I've noticed that DataGrid does not react instantly to error change and there's mismatch between error value and the actual DataGrid state:
https://codesandbox.io/s/datagriddemo-material-demo-forked-ki8vv?file=/demo.tsx

Screen.Recording.2022-02-11.at.10.27.36.mov

[alexfauquette]

For information, we have another bug in which the rendering of the grid mismatch props #4119

[MBilalShafi]

This bug seems invalid since we don't have ErrorOverlay anymore. Users have to add the errors on their side. I'll close this one.
@ThukuWakogi feel free to followup the discussion if you want some more information around this.