feat(proejects): routing and layout error boundaries combine

ErrorBoundary.tsx

@@ -1,38 +1,49 @@
-import { useNavigate, useRouteError } from 'react-router-dom';
+import { useRouteError, useNavigate } from 'react-router-dom';
 import { Button, Typography } from 'antd';
-
+import { $t } from './src/locales'
 import SvgIcon from '@/components/custom/svg-icon';
+import type { FallbackProps } from 'react-error-boundary'
+import { localStg } from '@/utils/storage';
+
+
+type Props = Partial<FallbackProps>;
+
+const isDev = import.meta.env.DEV;
 
 const { Title, Text } = Typography;
-const ErrorPage = () => {
-  const error = useRouteError() as Error;
-  const { t } = useTranslation();
-  const navigate = useNavigate();
-  const location = useLocation();
 
-  console.error(error);
-  const handleRetry = () => {
-    navigate(location.pathname + location.search, { replace: true, state: 'reload' });
-  };
+function HookSupportChecker() {
+  try {
+    // 尝试使用一个简单的 Hook
+
+    const error = useRouteError() as Error;
+    const nav = useNavigate()
+
+    const update = () => {
+      nav(0)
+    }
+
+    return { update, error }; // 如果没有抛出异常，则支持 Hook
+  } catch (error) {
+    return false; // 如果抛出异常，则不支持 Hook
+  }
+}
+
+const theme = localStg.get('themeColor') || '#646cff'
+const ErrorPage: FC<Props> = ({ error, resetErrorBoundary }) => {
+
+  // 可以在这里根据不同的业务逻辑处理错误或者上报给日志服务
+  const hook = HookSupportChecker()
+
+  console.error(error, 999);
 
   return (
     <div className="size-full min-h-520px flex-col-center gap-16px overflow-hidden">
       <div className="flex text-400px text-primary">
-        <SvgIcon localIcon="expectation" />
+        <SvgIcon localIcon="error" />
       </div>
-      <Button
-        onClick={handleRetry}
-        type="primary"
-      >
-        {t('system.reload')}
-      </Button>
-      <Title
-        className="m-0"
-        level={5}
-      >
-        {t('system.errorReason')}
-      </Title>
-      <Text code>{error.message}</Text>
+      {isDev ? <Text code>{hook ? hook.error.message : error.message}</Text> : <Title level={3}>{$t('common.errorHint')}</Title>}
+      <Button style={{ backgroundColor: theme }} type='primary' onClick={hook ? hook.update : resetErrorBoundary} >{$t('common.tryAlign')}</Button>
     </div>
   );
 };

src/locales/langs/en-us/common.ts

@@ -7,6 +7,8 @@ const common: App.I18n.Schema['translation']['common'] = {
   cancel: 'Cancel',
   close: 'Close',
   check: 'Check',
+  errorHint:'Please try again later',
+  tryAlign:'Try Align',
   expandColumn: 'Expand Column',
   columnSetting: 'Column Setting',
   config: 'Config',

src/locales/langs/zh-cn/common.ts

@@ -31,6 +31,8 @@ const common: App.I18n.Schema['translation']['common'] = {
   reset: '重置',
   search: '搜索',
   switch: '切换',
+  errorHint:'出错了，请稍后再试',
+  tryAlign:'刷新重试',
   tip: '提示',
   trigger: '触发',
   update: '更新',

src/main.tsx

@@ -1,34 +1,37 @@
 import { createRoot } from 'react-dom/client';
 import { Provider } from 'react-redux';
 import { ErrorBoundary } from 'react-error-boundary';
-import FallbackRender from '@/components/common/ErrorBoundary.tsx';
+import FallbackRender from '../ErrorBoundary.tsx';
 import { store } from '@/store';
 import App from './App.tsx';
 import './plugins/assets';
 import { setupI18n } from './locales';
 import { setupDayjs, setupIconifyOffline, setupLoading, setupNProgress } from './plugins';
 
 function setupApp() {
+
+
   setupI18n();
+
   setupLoading();
+
   setupNProgress();
+
   setupIconifyOffline();
+
   setupDayjs();
+
   const container = document.getElementById('root');
-  if (container) {
-    const root = createRoot(container);
-    root.render(
-      <ErrorBoundary fallbackRender={FallbackRender}>
-        <Provider store={store}>
-          <App />
-        </Provider>
-      </ErrorBoundary>
-    );
-  } else {
-    throw new Error(
-      "Root element with ID 'root' was not found in the document. Ensure there is a corresponding HTML element with the ID 'root' in your HTML file."
-    );
-  }
+  if (!container) return ;
+  const root = createRoot(container);
+  root.render(
+    <ErrorBoundary fallbackRender={FallbackRender}>
+      <Provider store={store}>
+        <App />
+      </Provider>
+    </ErrorBoundary>
+  );
+
 }
 
 setupApp();

src/types/app.d.ts

@@ -270,6 +270,8 @@ declare namespace App {
         };
         common: {
           action: string;
+          errorHint: string;
+          tryAlign: string;
           add: string;
           addSuccess: string;
           backToHome: string;

src/types/auto-imports.d.ts

@@ -5,7 +5,13 @@
 // Generated by unplugin-auto-import
 export {}
 declare global {
+  const AButton: typeof import('antd')['Button']
+  const ACard: typeof import('antd')['Card']
+  const ACol: typeof import('antd')['Col']
   const AConfigProvider: typeof import('antd')['ConfigProvider']
+  const ARow: typeof import('antd')['Row']
+  const ATitle: typeof import('antd')['Title']
+  const ATypography: typeof import('antd')['Typography']
   const AppProvider: typeof import('../components/common/AppProvider')['default']
   const BetterScroll: typeof import('../components/custom/BetterScroll')['default']
   const BeyondHiding: typeof import('../components/custom/BeyondHiding')['default']