Merge pull request #6508 from marmelab/fix-error-coundary-type

[TypeScript] Fix Error prop types
marmelab · Aug 13, 2021 · 2693435 · 2693435
2 parents 8219644 + 92ff269
commit 2693435
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 18 deletions.
diff --git a/packages/ra-ui-materialui/src/layout/Error.tsx b/packages/ra-ui-materialui/src/layout/Error.tsx
@@ -146,15 +146,15 @@ const Error = (props: ErrorProps): JSX.Element => {
 Error.propTypes = {
     classes: PropTypes.object,
     className: PropTypes.string,
-    error: PropTypes.oneOfType([PropTypes.object, PropTypes.string]).isRequired,
+    error: PropTypes.object.isRequired,
     errorInfo: PropTypes.object,
     title: TitlePropType,
 };
 
 export interface ErrorProps extends HtmlHTMLAttributes<HTMLDivElement> {
     classes?: ClassesOverride<typeof useStyles>;
     className?: string;
-    error: any;
+    error: Error;
     errorInfo?: ErrorInfo;
     title?: string;
 }

diff --git a/packages/ra-ui-materialui/src/layout/Layout.tsx b/packages/ra-ui-materialui/src/layout/Layout.tsx
@@ -79,7 +79,7 @@ class LayoutWithoutTheme extends Component<
     LayoutWithoutThemeProps,
     LayoutState
 > {
-    state = { hasError: false, errorMessage: null, errorInfo: null };
+    state: LayoutState = { hasError: false, error: null, errorInfo: null };
 
     constructor(props) {
         super(props);
@@ -95,8 +95,8 @@ class LayoutWithoutTheme extends Component<
         });
     }
 
-    componentDidCatch(errorMessage, errorInfo) {
-        this.setState({ hasError: true, errorMessage, errorInfo });
+    componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+        this.setState({ hasError: true, error, errorInfo });
     }
 
     render() {
@@ -105,7 +105,7 @@ class LayoutWithoutTheme extends Component<
             children,
             classes,
             className,
-            error,
+            error: ErrorComponent,
             dashboard,
             logout,
             menu,
@@ -120,7 +120,7 @@ class LayoutWithoutTheme extends Component<
             staticContext,
             ...props
         } = this.props;
-        const { hasError, errorMessage, errorInfo } = this.state;
+        const { hasError, error, errorInfo } = this.state;
         return (
             <>
                 <div
@@ -138,13 +138,15 @@ class LayoutWithoutTheme extends Component<
                                 }),
                             })}
                             <div id="main-content" className={classes.content}>
-                                {hasError
-                                    ? createElement(error, {
-                                          error: errorMessage,
-                                          errorInfo,
-                                          title,
-                                      })
-                                    : children}
+                                {hasError ? (
+                                    <ErrorComponent
+                                        error={error}
+                                        errorInfo={errorInfo}
+                                        title={title}
+                                    />
+                                ) : (
+                                    children
+                                )}
                             </div>
                         </main>
                     </div>
@@ -186,8 +188,8 @@ export interface LayoutProps
     classes?: any;
     className?: string;
     error?: ComponentType<{
-        error?: string;
-        errorInfo?: React.ErrorInfo;
+        error?: Error;
+        errorInfo?: ErrorInfo;
         title?: string | ReactElement<any>;
     }>;
     menu?: ComponentType<MenuProps>;
@@ -198,8 +200,8 @@ export interface LayoutProps
 
 export interface LayoutState {
     hasError: boolean;
-    errorMessage: string;
-    errorInfo: ErrorInfo;
+    error?: Error;
+    errorInfo?: ErrorInfo;
 }
 
 interface LayoutWithoutThemeProps