refactor: 移除 AppProviders 中的全局 ErrorBoundary,避免重复嵌套

问题:
- 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>
This commit is contained in:
zdl
2025-10-30 15:27:18 +08:00
parent 9b23149f1c
commit ed2837bf56

View File

@@ -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>
</ChakraProvider>
</ReduxProvider>
);