chore: update error components for loading file failed

src/atoms/settings.ts

@@ -19,7 +19,13 @@ const defaultSettings: UserSettings = {
 export const getStorageUserSettings = () => {
   if (typeof window === 'undefined') return defaultSettings;
   try {
-    return JSON.parse(localStorage.getItem('userSettings') || '{}');
+    const savedSettings = JSON.parse(
+      localStorage.getItem('userSettings') || '{}'
+    );
+    return {
+      ...defaultSettings,
+      ...savedSettings
+    };
   } catch {
     return defaultSettings;
   }

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}

src/locales/en-US/common.ts

@@ -244,5 +244,8 @@ export default {
   'common.appearance.lightmode': 'Light Mode',
   'common.appearance.tips': 'Default follows system preference.',
   'common.button.forgotpassword': 'Forgot password?',
-  'common.appearance.theme': 'Theme'
+  'common.appearance.theme': 'Theme',
+  'common.page.wentwrong': 'Something went wrong.',
+  'common.page.refresh.tips':
+    'Oops! Something went wrong. Try refreshing the page.'
 };

src/locales/ja-JP/common.ts

@@ -244,7 +244,10 @@ export default {
   'common.appearance.lightmode': 'Light Mode',
   'common.appearance.tips': 'Default follows system preference.',
   'common.button.forgotpassword': 'Forgot password?',
-  'common.appearance.theme': 'Theme'
+  'common.appearance.theme': 'Theme',
+  'common.page.wentwrong': 'Something went wrong.',
+  'common.page.refresh.tips':
+    'Oops! Something went wrong. Try refreshing the page.'
 };
 
 // ========== To-Do: Translate Keys (Remove After Translation) ==========
@@ -257,5 +260,7 @@ export default {
 // 7. 'common.appearance.lightmode': 'Light Mode',
 // 8. 'common.appearance.tips': 'Default follows system preference.'
 // 9. 'common.button.forgotpassword': 'Forgot Password?'
-// 10.  'common.appearance.theme': 'Theme'
+// 10.  'common.appearance.theme': 'Theme',
+// 11. 'common.page.wentwrong': 'Something went wrong.',
+// 12. 'common.page.refresh.tips': 'Oops! Something went wrong. Try refreshing the page.'
 // ========== End of To-Do List ==========

src/locales/ru-RU/common.ts

@@ -243,9 +243,14 @@ export default {
   'common.appearance.lightmode': 'Светлая тема',
   'common.appearance.tips': 'По умолчанию соответствует системным настройкам.',
   'common.button.forgotpassword': 'Забыли пароль?',
-  'common.appearance.theme': 'Theme'
+  'common.appearance.theme': 'Theme',
+  'common.page.wentwrong': 'Something went wrong.',
+  'common.page.refresh.tips':
+    'Oops! Something went wrong. Try refreshing the page.'
 };
 
 // ========== To-Do: Translate Keys (Remove After Translation) ==========
-// 1.  'common.appearance.theme': 'Theme'
+// 1.  'common.appearance.theme': 'Theme',
+// 2. 'common.page.wentwrong': 'Something went wrong.',
+// 3. 'common.page.refresh.tips':'Oops! Something went wrong. Try refreshing the page.'
 // ========== End of To-Do List ==========

src/locales/zh-CN/common.ts

@@ -239,5 +239,7 @@ export default {
   'common.appearance.lightmode': '浅色模式',
   'common.appearance.tips': '默认跟随系统设置',
   'common.button.forgotpassword': '忘记密码？',
-  'common.appearance.theme': '主题'
+  'common.appearance.theme': '主题',
+  'common.page.wentwrong': '哎呀，出了点问题',
+  'common.page.refresh.tips': '出了点问题，试试刷新页面吧！'
 };