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