chore: update error components for loading file failed

src/layouts/error-boundary.tsx

@@ -1,35 +1,29 @@
-import { Component } from 'react';
+import type { ErrorInfo } from 'react';
+import React from 'react';
+import ErrorResult from './error-result';
 
-interface ErrorBoundaryState {
-  hasError: boolean;
-}
-
-class ErrorBoundary extends Component<
+// eslint-disable-next-line @typescript-eslint/ban-types
+class ErrorBoundary extends React.Component<
   { children?: React.ReactNode },
-  ErrorBoundaryState
+  { hasError: boolean; errorInfo: string }
 > {
-  constructor(props: any) {
-    super(props);
-    this.state = {
-      hasError: false
-    };
+  state = { hasError: false, errorInfo: '' };
+
+  static getDerivedStateFromError(error: Error) {
+    return { hasError: true, errorInfo: error.message };
   }
 
-  static getDerivedStateFromError(error: any) {
-    console.error('Error caught by Error Boundary:', error);
-    return { hasError: true };
-  }
-
-  componentDidCatch(error: any, info: any) {
-    console.error('Error caught by Error Boundary:', error);
-    console.error(info);
+  componentDidCatch(error: any, errorInfo: ErrorInfo) {
+    // You can also log the error to an error reporting service
+    // eslint-disable-next-line no-console
+    console.log(error, errorInfo);
   }
 
   render() {
     if (this.state.hasError) {
-      return <h1>Something went wrong.</h1>;
+      // You can render any custom fallback UI
+      return <ErrorResult extra={this.state.errorInfo} />;
     }
-
     return this.props.children;
   }
 }

src/layouts/error-result.tsx

@@ -0,0 +1,37 @@
+import { useIntl } from '@umijs/max';
+import { Result } from 'antd';
+import styled from 'styled-components';
+
+const Inner = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+`;
+
+interface ErrorResultProps {
+  extra?: string;
+}
+
+function isChunkLoadError(msg?: string): boolean {
+  if (typeof msg !== 'string') return false;
+  return msg.includes('Loading chunk') && msg.includes('failed');
+}
+
+const ErrorResult: React.FC<ErrorResultProps> = ({ extra }) => {
+  const intl = useIntl();
+  return (
+    <Result
+      status="error"
+      title={
+        isChunkLoadError(extra)
+          ? intl.formatMessage({ id: 'common.page.refresh.tips' })
+          : intl.formatMessage({ id: 'common.page.wentwrong' })
+      }
+      extra={extra}
+    />
+  );
+};
+
+export default ErrorResult;

src/layouts/index.tsx

@@ -36,6 +36,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 import Exception from './Exception';
 import './Layout.css';
 import { LogoIcon, SLogoIcon } from './Logo';
+import ErrorBoundary from './error-boundary';
 import { getRightRenderContent } from './rightRender';
 import { patchRoutes } from './runtime';
 
@@ -465,6 +466,7 @@ export default (props: any) => {
         fixedHeader
         {...runtimeConfig}
         actionsRender={actionRender}
+        ErrorBoundary={ErrorBoundary}
       >
         <Exception
           route={matchedRoute}