qyyfw/qihuaiflow
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

#963 safeLazy 包裹 React.lazy 防 chunk 加载失败导致 element undefined

Browse Source 
App.tsx 所有 React.lazy 改为 safeLazy(loader).catch(...) 保证 chunk load 失败时 element 有 fallback 不会是 undefined. 防 React error #231.
This commit is contained in:
qihu-bot committed 2026-08-11 13:06:42 +08:00
1 parent 420e0f6603
commit 679f23ff93
1 file changed
+64 -51
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/App.tsx
+64 -51
View File
@@ -10,58 +10,71 @@ import AdminLayout from '@/components/layout/AdminLayout';
// 路由级代码分割：每个页面独立打包成 chunk，首屏只加载外壳与公共依赖， // 路由级代码分割：每个页面独立打包成 chunk，首屏只加载外壳与公共依赖，
// 访问具体页面时才按需加载对应 chunk，显著加快首屏渲染与路由切换速度。 // 访问具体页面时才按需加载对应 chunk，显著加快首屏渲染与路由切换速度。
const LandingPage = React.lazy(() => import('@/pages/front/LandingPage')); // #963: lazy() + .catch() fallback so element never undefined
const LoginPage = React.lazy(() => import('@/pages/front/LoginPage')); const safeLazy = (loader: () => Promise<{ default: React.ComponentType<any> }>) =>
const ChatPage = React.lazy(() => import('@/pages/front/ChatPage')); React.lazy(() =>
const KnowledgePage = React.lazy(() => import('@/pages/front/KnowledgePage')); loader().catch((err) => {
const MarketPage = React.lazy(() => import('@/pages/front/MarketPage')); console.error('[qihu-lazy-load-failed]', err);
const TokenDashboardPage = React.lazy(() => import('@/pages/front/TokenDashboardPage')); return { default: () => (
const PricingPage = React.lazy(() => import('@/pages/front/PricingPage')); React.createElement('div', { style: { padding: 20, color: '#dc2626' } },
const ProfilePage = React.lazy(() => import('@/pages/front/ProfilePage')); 'Chunk load failed: ' + String((err as Error)?.message || err))
const NotificationPage = React.lazy(() => import('@/pages/front/NotificationPage')); ) } as any;
const AssetsPage = React.lazy(() => import('@/pages/front/AssetsPage')); })
const NovelPreviewPage = React.lazy(() => import('@/pages/front/NovelPreviewPage')); );
const AgentCanvas = React.lazy(() => import('@/pages/front/AgentCanvas'));
const EvolutionDashboard = React.lazy(() => import('@/pages/front/EvolutionDashboard'));
const AdminDashboard = React.lazy(() => import('@/pages/admin/Dashboard')); const LandingPage = safeLazy(() => import('@/pages/front/LandingPage'));
const AdminUsers = React.lazy(() => import('@/pages/admin/Users')); const LoginPage = safeLazy(() => import('@/pages/front/LoginPage'));
const AdminModels = React.lazy(() => import('@/pages/admin/Models')); const ChatPage = safeLazy(() => import('@/pages/front/ChatPage'));
const AdminSiteSettings = React.lazy(() => import('@/pages/admin/SiteSettings')); const KnowledgePage = safeLazy(() => import('@/pages/front/KnowledgePage'));
const AdminSmsConfig = React.lazy(() => import('@/pages/admin/SmsConfig')); const MarketPage = safeLazy(() => import('@/pages/front/MarketPage'));
const AdminPayment = React.lazy(() => import('@/pages/admin/Payment')); const TokenDashboardPage = safeLazy(() => import('@/pages/front/TokenDashboardPage'));
const AdminServices = React.lazy(() => import('@/pages/admin/Services')); const PricingPage = safeLazy(() => import('@/pages/front/PricingPage'));
const AdminMembership = React.lazy(() => import('@/pages/admin/Membership')); const ProfilePage = safeLazy(() => import('@/pages/front/ProfilePage'));
const AdminAds = React.lazy(() => import('@/pages/admin/Ads')); const NotificationPage = safeLazy(() => import('@/pages/front/NotificationPage'));
const AdminMarket = React.lazy(() => import('@/pages/admin/Market')); const AssetsPage = safeLazy(() => import('@/pages/front/AssetsPage'));
const AdminLogs = React.lazy(() => import('@/pages/admin/Logs')); const NovelPreviewPage = safeLazy(() => import('@/pages/front/NovelPreviewPage'));
const AdminSkills = React.lazy(() => import('@/pages/admin/Skills')); const AgentCanvas = safeLazy(() => import('@/pages/front/AgentCanvas'));
const AdminAgents = React.lazy(() => import('@/pages/admin/Agents')); const EvolutionDashboard = safeLazy(() => import('@/pages/front/EvolutionDashboard'));
const AdminCodeExec = React.lazy(() => import('@/pages/admin/CodeExec'));
const DistributionBuilder = React.lazy(() => import('@/pages/admin/DistributionBuilder')); const AdminDashboard = safeLazy(() => import('@/pages/admin/Dashboard'));
const ImBots = React.lazy(() => import('@/pages/admin/ImBots')); const AdminUsers = safeLazy(() => import('@/pages/admin/Users'));
const PrivacySettings = React.lazy(() => import('@/pages/admin/PrivacySettings')); const AdminModels = safeLazy(() => import('@/pages/admin/Models'));
const Promotion = React.lazy(() => import('@/pages/admin/Promotion')); const AdminSiteSettings = safeLazy(() => import('@/pages/admin/SiteSettings'));
const Achievement = React.lazy(() => import('@/pages/admin/Achievement')); const AdminSmsConfig = safeLazy(() => import('@/pages/admin/SmsConfig'));
const Tenant = React.lazy(() => import('@/pages/admin/Tenant')); const AdminPayment = safeLazy(() => import('@/pages/admin/Payment'));
const Billing = React.lazy(() => import('@/pages/admin/Billing')); const AdminServices = safeLazy(() => import('@/pages/admin/Services'));
const Analytics = React.lazy(() => import('@/pages/admin/Analytics')); const AdminMembership = safeLazy(() => import('@/pages/admin/Membership'));
const AdminKnowledge = React.lazy(() => import('@/pages/admin/Knowledge')); const AdminAds = safeLazy(() => import('@/pages/admin/Ads'));
const AdminWorkflow = React.lazy(() => import('@/pages/admin/Workflow')); const AdminMarket = safeLazy(() => import('@/pages/admin/Market'));
const AdminStorage = React.lazy(() => import('@/pages/admin/Storage')); const AdminMarketProducts = safeLazy(() => import('@/pages/admin/MarketProductsAdmin'));
const AdminDeveloper = React.lazy(() => import('@/pages/admin/Developer')); const AdminLogs = safeLazy(() => import('@/pages/admin/Logs'));
const AdminDeveloperTools = React.lazy(() => import('@/pages/admin/DeveloperTools')); const AdminSkills = safeLazy(() => import('@/pages/admin/Skills'));
const AdminAutomation = React.lazy(() => import('@/pages/admin/Automation')); const AdminAgents = safeLazy(() => import('@/pages/admin/Agents'));
const AdminMcp = React.lazy(() => import('@/pages/admin/Mcp')); const AdminCodeExec = safeLazy(() => import('@/pages/admin/CodeExec'));
const AdminApps = React.lazy(() => import('@/pages/admin/Apps')); const DistributionBuilder = safeLazy(() => import('@/pages/admin/DistributionBuilder'));
const AssetCenter = React.lazy(() => import('@/pages/admin/AssetCenter')); const ImBots = safeLazy(() => import('@/pages/admin/ImBots'));
const UserPortal = React.lazy(() => import('@/pages/UserPortal')); const PrivacySettings = safeLazy(() => import('@/pages/admin/PrivacySettings'));
const WechatBot = React.lazy(() => import('@/pages/front/WechatBot')); const Promotion = safeLazy(() => import('@/pages/admin/Promotion'));
const ImBotHub = React.lazy(() => import('@/pages/front/ImBotHub')); const Achievement = safeLazy(() => import('@/pages/admin/Achievement'));
const AppServices = React.lazy(() => import('@/pages/front/AppServices')); const Tenant = safeLazy(() => import('@/pages/admin/Tenant'));
const MarketProducts = React.lazy(() => import('@/pages/front/MarketProducts')); const Billing = safeLazy(() => import('@/pages/admin/Billing'));
const MarketProductDetail = React.lazy(() => import('@/pages/front/MarketProductDetail')); const Analytics = safeLazy(() => import('@/pages/admin/Analytics'));
const MarketProductsAdmin = React.lazy(() => import('@/pages/admin/MarketProductsAdmin')); const AdminKnowledge = safeLazy(() => import('@/pages/admin/Knowledge'));
const AdminWorkflow = safeLazy(() => import('@/pages/admin/Workflow'));
const AdminStorage = safeLazy(() => import('@/pages/admin/Storage'));
const AdminDeveloper = safeLazy(() => import('@/pages/admin/Developer'));
const AdminDeveloperTools = safeLazy(() => import('@/pages/admin/DeveloperTools'));
const AdminAutomation = safeLazy(() => import('@/pages/admin/Automation'));
const AdminMcp = safeLazy(() => import('@/pages/admin/Mcp'));
const AdminApps = safeLazy(() => import('@/pages/admin/Apps'));
const AssetCenter = safeLazy(() => import('@/pages/admin/AssetCenter'));
const UserPortal = safeLazy(() => import('@/pages/UserPortal'));
const WechatBot = safeLazy(() => import('@/pages/front/WechatBot'));
const ImBotHub = safeLazy(() => import('@/pages/front/ImBotHub'));
const AppServices = safeLazy(() => import('@/pages/front/AppServices'));
const MarketProducts = safeLazy(() => import('@/pages/front/MarketProducts'));
const MarketProductDetail = safeLazy(() => import('@/pages/front/MarketProductDetail'));
const MarketProductsAdmin = safeLazy(() => import('@/pages/admin/MarketProductsAdmin'));
const pageFallback = <div className="loading-screen">加载中...</div>; const pageFallback = <div className="loading-screen">加载中...</div>;