feat(web): add ErrorBoundary to prevent full-page crashes

web/src/components/common/ErrorBoundary.jsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { Empty, Button } from '@douyinfe/semi-ui';
+import {
+  IllustrationFailure,
+  IllustrationFailureDark,
+} from '@douyinfe/semi-illustrations';
+import { withTranslation } from 'react-i18next';
+
+class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError() {
+    return { hasError: true };
+  }
+
+  componentDidCatch(error, errorInfo) {
+    console.error('[ErrorBoundary]', error, errorInfo);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      const { t } = this.props;
+      return (
+        <div className='flex flex-col justify-center items-center h-screen p-8'>
+          <Empty
+            image={
+              <IllustrationFailure style={{ width: 250, height: 250 }} />
+            }
+            darkModeImage={
+              <IllustrationFailureDark style={{ width: 250, height: 250 }} />
+            }
+            description={t('页面渲染出错，请刷新页面重试')}
+          />
+          <Button
+            theme='solid'
+            type='primary'
+            style={{ marginTop: 16 }}
+            onClick={() => window.location.reload()}
+          >
+            {t('刷新页面')}
+          </Button>
+        </div>
+      );
+    }
+    return this.props.children;
+  }
+}
+
+export default withTranslation()(ErrorBoundary);

web/src/components/layout/PageLayout.jsx

@@ -23,6 +23,7 @@ import SiderBar from './SiderBar';
 import App from '../../App';
 import FooterBar from './Footer';
 import { ToastContainer } from 'react-toastify';
+import ErrorBoundary from '../common/ErrorBoundary';
 import React, { useContext, useEffect, useState } from 'react';
 import { useIsMobile } from '../../hooks/common/useIsMobile';
 import { useSidebarCollapsed } from '../../hooks/common/useSidebarCollapsed';
@@ -216,7 +217,9 @@ const PageLayout = () => {
               position: 'relative',
             }}
           >
-            <App />
+            <ErrorBoundary>
+              <App />
+            </ErrorBoundary>
           </Content>
           {!shouldHideFooter && (
             <Layout.Footer

web/src/i18n/locales/en.json

@@ -3376,6 +3376,8 @@
     "从剪贴板粘贴配置": "Paste Config",
     "剪贴板中未检测到连接信息": "No connection info found in clipboard",
     "连接信息已填入": "Connection info applied",
-    "无法读取剪贴板": "Cannot read clipboard"
+    "无法读取剪贴板": "Cannot read clipboard",
+    "页面渲染出错，请刷新页面重试": "An error occurred while rendering the page. Please refresh and try again.",
+    "刷新页面": "Reload Page"
   }
 }

web/src/i18n/locales/fr.json

@@ -3332,6 +3332,8 @@
     "从剪贴板粘贴配置": "Coller la config",
     "剪贴板中未检测到连接信息": "Aucune info de connexion trouvée dans le presse-papiers",
     "连接信息已填入": "Informations de connexion appliquées",
-    "无法读取剪贴板": "Impossible de lire le presse-papiers"
+    "无法读取剪贴板": "Impossible de lire le presse-papiers",
+    "页面渲染出错，请刷新页面重试": "Une erreur est survenue lors du rendu de la page. Veuillez rafraîchir et réessayer.",
+    "刷新页面": "Recharger la page"
   }
 }

web/src/i18n/locales/ja.json

@@ -3313,6 +3313,8 @@
     "从剪贴板粘贴配置": "クリップボードから貼り付け",
     "剪贴板中未检测到连接信息": "クリップボードに接続情報が見つかりません",
     "连接信息已填入": "接続情報を入力しました",
-    "无法读取剪贴板": "クリップボードを読み取れません"
+    "无法读取剪贴板": "クリップボードを読み取れません",
+    "页面渲染出错，请刷新页面重试": "ページのレンダリング中にエラーが発生しました。ページを更新して再試行してください。",
+    "刷新页面": "ページを更新"
   }
 }

web/src/i18n/locales/ru.json

@@ -3346,6 +3346,8 @@
     "从剪贴板粘贴配置": "Вставить конфигурацию",
     "剪贴板中未检测到连接信息": "Данные подключения не найдены в буфере обмена",
     "连接信息已填入": "Данные подключения применены",
-    "无法读取剪贴板": "Не удалось прочитать буфер обмена"
+    "无法读取剪贴板": "Не удалось прочитать буфер обмена",
+    "页面渲染出错，请刷新页面重试": "Произошла ошибка при отрисовке страницы. Пожалуйста, обновите страницу и попробуйте снова.",
+    "刷新页面": "Обновить страницу"
   }
 }

web/src/i18n/locales/vi.json

@@ -3882,6 +3882,8 @@
     "从剪贴板粘贴配置": "Dán cấu hình",
     "剪贴板中未检测到连接信息": "Không tìm thấy thông tin kết nối trong bộ nhớ tạm",
     "连接信息已填入": "Đã áp dụng thông tin kết nối",
-    "无法读取剪贴板": "Không thể đọc bộ nhớ tạm"
+    "无法读取剪贴板": "Không thể đọc bộ nhớ tạm",
+    "页面渲染出错，请刷新页面重试": "Đã xảy ra lỗi khi hiển thị trang. Vui lòng tải lại trang và thử lại.",
+    "刷新页面": "Tải lại trang"
   }
 }

web/src/i18n/locales/zh-CN.json

@@ -2980,6 +2980,8 @@
     "从剪贴板粘贴配置": "从剪贴板粘贴配置",
     "剪贴板中未检测到连接信息": "剪贴板中未检测到连接信息",
     "连接信息已填入": "连接信息已填入",
-    "无法读取剪贴板": "无法读取剪贴板"
+    "无法读取剪贴板": "无法读取剪贴板",
+    "页面渲染出错，请刷新页面重试": "页面渲染出错，请刷新页面重试",
+    "刷新页面": "刷新页面"
   }
 }

web/src/i18n/locales/zh-TW.json

@@ -2997,6 +2997,8 @@
     "从剪贴板粘贴配置": "從剪貼簿貼上設定",
     "剪贴板中未检测到连接信息": "剪貼簿中未偵測到連線資訊",
     "连接信息已填入": "連線資訊已填入",
-    "无法读取剪贴板": "無法讀取剪貼簿"
+    "无法读取剪贴板": "無法讀取剪貼簿",
+    "页面渲染出错，请刷新页面重试": "頁面渲染出錯，請重新整理頁面重試",
+    "刷新页面": "重新整理頁面"
   }
 }