From ed2837bf568c44acb51ec28885f91835004bfd5d Mon Sep 17 00:00:00 2001
From: zdl <3489966805@qq.com>
Date: Thu, 30 Oct 2025 15:27:18 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E7=A7=BB=E9=99=A4=20AppProviders?=
 =?UTF-8?q?=20=E4=B8=AD=E7=9A=84=E5=85=A8=E5=B1=80=20ErrorBoundary,?=
 =?UTF-8?q?=E9=81=BF=E5=85=8D=E9=87=8D=E5=A4=8D=E5=B5=8C=E5=A5=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

问题:
- AppProviders 有全局 ErrorBoundary (第1层)
- PageTransitionWrapper 有页面级 ErrorBoundary (第2层)
- Auth.js 有认证页 ErrorBoundary (第3层)
- 导致同一个错误被捕获多次,造成冗余

优化策略:
- 移除 AppProviders 中的全局 ErrorBoundary
- 保留 PageTransitionWrapper 中的页面级 ErrorBoundary
- 保留 Auth.js 中的认证页 ErrorBoundary

优势:
- 精细化错误隔离: 页面错误不会影响导航栏
- 更好的用户体验: 导航栏始终可用,用户可以切换页面
- 避免重复捕获: 每个错误只被捕获一次
- 符合最佳实践: ErrorBoundary 应在需要隔离的边界处使用

最终 ErrorBoundary 层级:
- MainLayout → PageTransitionWrapper → ErrorBoundary → 页面内容
- Auth.js → ErrorBoundary → 认证页面

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/providers/AppProviders.js | 26 ++++++++++++--------------
 1 file changed, 12 insertions(+), 14 deletions(-)

diff --git a/src/providers/AppProviders.js b/src/providers/AppProviders.js
index 6e38d5cc..c5050843 100644
--- a/src/providers/AppProviders.js
+++ b/src/providers/AppProviders.js
@@ -15,9 +15,6 @@ import theme from '../theme/theme.js';
 import { AuthProvider } from '../contexts/AuthContext';
 import { NotificationProvider } from '../contexts/NotificationContext';
 
-// Components
-import ErrorBoundary from '../components/ErrorBoundary';
-
 /**
  * AppProviders - 应用的 Provider 容器
  * 集中管理所有 Context Provider,避免 App.js 中层级嵌套过深
@@ -25,11 +22,14 @@ import ErrorBoundary from '../components/ErrorBoundary';
  * Provider 层级顺序 (从外到内):
  * 1. ReduxProvider - 状态管理层
  * 2. ChakraProvider - UI 框架层
- * 3. ErrorBoundary - 错误边界
- * 4. NotificationProvider - 通知系统
- * 5. AuthProvider - 认证系统
+ * 3. NotificationProvider - 通知系统
+ * 4. AuthProvider - 认证系统
  *
- * 注意: AuthModal 已迁移到 Redux (authModalSlice + useAuthModal Hook)
+ * 注意:
+ * - AuthModal 已迁移到 Redux (authModalSlice + useAuthModal Hook)
+ * - ErrorBoundary 在各 Layout 层实现，不在全局层，以实现精细化错误隔离
+ *   - MainLayout: PageTransitionWrapper 包含 ErrorBoundary (页面错误不影响导航栏)
+ *   - Auth.js: 独立 ErrorBoundary (认证页错误隔离)
  *
  * @param {Object} props
  * @param {React.ReactNode} props.children - 子组件
@@ -47,13 +47,11 @@ export function AppProviders({ children }) {
                     }
                 }}
             >
-                <ErrorBoundary>
-                    <NotificationProvider>
-                        <AuthProvider>
-                            {children}
-                        </AuthProvider>
-                    </NotificationProvider>
-                </ErrorBoundary>
+                <NotificationProvider>
+                    <AuthProvider>
+                        {children}
+                    </AuthProvider>
+                </NotificationProvider>
             </ChakraProvider>
         </ReduxProvider>
     );