From 559c98f261a9d730c18e3c49e308c4cd6ab1073a Mon Sep 17 00:00:00 2001
From: irongit <96106336+goodmorning10@users.noreply.github.com>
Date: Mon, 6 Apr 2026 22:32:19 +0800
Subject: [PATCH] feat(web): add ErrorBoundary to prevent full-page crashes
---
web/src/components/common/ErrorBoundary.jsx | 52 +++++++++++++++++++++
web/src/components/layout/PageLayout.jsx | 5 +-
web/src/i18n/locales/en.json | 4 +-
web/src/i18n/locales/fr.json | 4 +-
web/src/i18n/locales/ja.json | 4 +-
web/src/i18n/locales/ru.json | 4 +-
web/src/i18n/locales/vi.json | 4 +-
web/src/i18n/locales/zh-CN.json | 4 +-
web/src/i18n/locales/zh-TW.json | 4 +-
9 files changed, 77 insertions(+), 8 deletions(-)
create mode 100644 web/src/components/common/ErrorBoundary.jsx
diff --git a/web/src/components/common/ErrorBoundary.jsx b/web/src/components/common/ErrorBoundary.jsx
new file mode 100644
index 00000000..3827969a
--- /dev/null
+++ b/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 (
+
+
+ }
+ darkModeImage={
+
+ }
+ description={t('页面渲染出错，请刷新页面重试')}
+ />
+
+
+ );
+ }
+ return this.props.children;
+ }
+}
+
+export default withTranslation()(ErrorBoundary);
diff --git a/web/src/components/layout/PageLayout.jsx b/web/src/components/layout/PageLayout.jsx
index 51666b5e..ca38ed50 100644
--- a/web/src/components/layout/PageLayout.jsx
+++ b/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',
}}
>
-
+
+
+
{!shouldHideFooter && (