[data grid] ErrorOverlay not passed with defined input props

[scott-avery]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example: https://codesandbox.io/s/hopeful-meadow-vdskw6

Steps:

1. visit https://vdskw6.csb.app/
2. open devtools and navigate to error boundary inside grid component
3. toggle the error state

Current behavior 😯

ErrorOverlay doesn't render with ErrorOverlayProps but state from ErrorBoundary.

Expected behavior 🤔

Redefine ErrorOverlayProps or fix the mechanism

Context 🔦

No response

Your environment 🌎

latest

Order ID 💳 (optional)

53318

[m4theushw]

This can be fixed with:

diff --git a/packages/grid/x-data-grid/src/components/ErrorBoundary.tsx b/packages/grid/x-data-grid/src/components/ErrorBoundary.tsx
index 35acbb1ad..67cca6bf5 100644
--- a/packages/grid/x-data-grid/src/components/ErrorBoundary.tsx
+++ b/packages/grid/x-data-grid/src/components/ErrorBoundary.tsx
@@ -8,7 +8,6 @@ export interface ErrorBoundaryProps {
   render: ({ error }: any) => React.ReactNode;
   api: React.MutableRefObject<GridApiCommunity>;
   hasError: boolean;
-  componentProps?: any[];
   children?: React.ReactNode;
 }
 
@@ -38,7 +37,7 @@ export class ErrorBoundary extends React.Component<ErrorBoundaryProps, any> {
   render() {
     if (this.props.hasError || this.state?.hasError) {
       // You can render any custom fallback UI
-      return this.props.render(this.props.componentProps || this.state);
+      return this.props.render(this.state);
     }
 
     return this.props.children;
diff --git a/packages/grid/x-data-grid/src/components/ErrorOverlay.tsx b/packages/grid/x-data-grid/src/components/ErrorOverlay.tsx
index 7745d3852..9a7715bc9 100644
--- a/packages/grid/x-data-grid/src/components/ErrorOverlay.tsx
+++ b/packages/grid/x-data-grid/src/components/ErrorOverlay.tsx
@@ -5,7 +5,7 @@ import { useGridSelector } from '../hooks/utils/useGridSelector';
 import { gridDensityRowHeightSelector } from '../hooks/features/density/densitySelector';
 
 export interface ErrorOverlayProps extends GridOverlayProps {
-  message?: string;
+  error?: Error;
   hasError: boolean;
   errorInfo: any;
 }
@@ -13,14 +13,14 @@ export interface ErrorOverlayProps extends GridOverlayProps {
 // TODO v6: rename to GridErrorOverlay
 export const ErrorOverlay = React.forwardRef<HTMLDivElement, ErrorOverlayProps>(
   function ErrorOverlay(props: ErrorOverlayProps, ref) {
-    const { message, hasError, errorInfo, ...other } = props;
+    const { error, hasError, errorInfo, ...other } = props;
     const apiRef = useGridApiContext();
     const defaultLabel = apiRef.current.getLocaleText('errorOverlayDefaultLabel');
     const rowHeight = useGridSelector(apiRef, gridDensityRowHeightSelector);
 
     return (
       <GridOverlay ref={ref} sx={{ width: '100%', minHeight: 2 * rowHeight }} {...other}>
-        {message || defaultLabel}
+        {error?.message || defaultLabel}
       </GridOverlay>
     );
   },
diff --git a/packages/grid/x-data-grid/src/components/base/GridErrorHandler.tsx b/packages/grid/x-data-grid/src/components/base/GridErrorHandler.tsx
index 3334faa01..783e2720a 100644
--- a/packages/grid/x-data-grid/src/components/base/GridErrorHandler.tsx
+++ b/packages/grid/x-data-grid/src/components/base/GridErrorHandler.tsx
@@ -11,18 +11,18 @@ function GridErrorHandler(props: { children: React.ReactNode }) {
   const apiRef = useGridApiContext();
   const logger = useGridLogger(apiRef, 'GridErrorHandler');
   const rootProps = useGridRootProps();
-  const error = apiRef.current.state.error;
+  const errorState = apiRef.current.state.error;
 
   return (
     <ErrorBoundary
-      hasError={error != null}
-      componentProps={error}
+      hasError={errorState != null}
       api={apiRef}
       logger={logger}
       render={(errorProps) => (
         <GridMainContainer>
           <rootProps.components.ErrorOverlay
             {...errorProps}
+            {...errorState}
             {...rootProps.componentsProps?.errorOverlay}
           />
         </GridMainContainer>

Do you want to submit a PR? Since ErrorOverlayProps is not exported by @mui/x-data-grid it's safe to change its props. Applying this fix will finally make the error overlay to show error.message, instead of the generic error message.

Side note: For v6 we plan to remove the default error boundary in #1804.

[banoth-ravinder]

@m4theushw I have created PR for this fix. can you please review my PR?
#6819

Thanks in advance.

[MBilalShafi]

@scott-avery Just an FYI, in v6, for consistency, we renamed ErrorOverlay to GridErrorOverlay and ErrorOverlayProps to GridErrorOverlayProps.

[scott-avery]

Thanks for the notice @MBilalShafi

[MBilalShafi]

Update: ErrorOverlay/GridErrorOverlay and ErrorOverlayProps/GridErrorOverlayProps are removed with this change.