diff --git a/vehicle-data-platform/apps/web/src/v2/AppV2.tsx b/vehicle-data-platform/apps/web/src/v2/AppV2.tsx
index 38527861..c60f6cfd 100644
--- a/vehicle-data-platform/apps/web/src/v2/AppV2.tsx
+++ b/vehicle-data-platform/apps/web/src/v2/AppV2.tsx
@@ -4,7 +4,7 @@ import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
import { AppShell } from './layout/AppShell';
import { AuthGate } from './auth/AuthGate';
import { PlatformErrorBoundary, RoutePage } from './routing/RouteBoundary';
-import { RoutePages } from './routing/routeModules';
+import { RoutePageFactories, RoutePages } from './routing/routeModules';
import { ROUTER_FUTURE } from './routing/routerConfig';
import { QUERY_MEMORY } from './queryPolicy';
@@ -44,14 +44,14 @@ export function AppV2() {
}>
} />
- } />
- } />
- } />
- } />
- } />
- } />
- } />
- } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
} />
diff --git a/vehicle-data-platform/apps/web/src/v2/routing/RouteBoundary.test.tsx b/vehicle-data-platform/apps/web/src/v2/routing/RouteBoundary.test.tsx
index 7f4fe86f..03c25e67 100644
--- a/vehicle-data-platform/apps/web/src/v2/routing/RouteBoundary.test.tsx
+++ b/vehicle-data-platform/apps/web/src/v2/routing/RouteBoundary.test.tsx
@@ -1,4 +1,4 @@
-import { cleanup, fireEvent, render, screen } from '@testing-library/react';
+import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react';
import { afterEach, describe, expect, it, vi } from 'vitest';
import { lazy, useEffect, useState } from 'react';
import { MemoryRouter, useSearchParams } from 'react-router-dom';
@@ -46,6 +46,23 @@ describe('route recovery boundary', () => {
render();
expect(screen.getByRole('alert')).toHaveTextContent('检测到页面版本更新');
expect(screen.getByText(/旧标签页仍引用上一版本资源/)).toBeInTheDocument();
+ expect(screen.getByRole('button', { name: /重试加载模块/ })).toBeInTheDocument();
+ });
+
+ it('recreates a rejected lazy route when the operator retries without a full reload', async () => {
+ vi.spyOn(console, 'error').mockImplementation(() => undefined);
+ window.sessionStorage.setItem('vehicle-platform:route-chunk-reload', JSON.stringify({ routeKey: '/history', at: Date.now() }));
+ const failedPage = lazy(() => Promise.reject(new TypeError('Failed to fetch dynamically imported module: /assets/History-old.js')));
+ const recreatePage = vi.fn(() => lazy(() => Promise.resolve({ default: () => 历史模块已恢复 })));
+
+ render();
+
+ expect(await screen.findByRole('alert')).toHaveTextContent('检测到页面版本更新');
+ fireEvent.click(screen.getByRole('button', { name: /重试加载模块/ }));
+
+ await waitFor(() => expect(screen.getByText('历史模块已恢复')).toBeInTheDocument());
+ expect(recreatePage).toHaveBeenCalledTimes(1);
+ expect(screen.queryByRole('alert')).not.toBeInTheDocument();
});
it('explains a bounded route timeout instead of leaving the loading skeleton forever', () => {
diff --git a/vehicle-data-platform/apps/web/src/v2/routing/RouteBoundary.tsx b/vehicle-data-platform/apps/web/src/v2/routing/RouteBoundary.tsx
index 64d10dfe..9a8b9bef 100644
--- a/vehicle-data-platform/apps/web/src/v2/routing/RouteBoundary.tsx
+++ b/vehicle-data-platform/apps/web/src/v2/routing/RouteBoundary.tsx
@@ -1,5 +1,5 @@
import { IconAlertTriangle, IconHome, IconRefresh } from '@douyinfe/semi-icons';
-import { Component, type ElementType, type ErrorInfo, type ReactNode, Suspense } from 'react';
+import { Component, type ElementType, type ErrorInfo, type ReactNode, Suspense, useCallback, useMemo, useState } from 'react';
import { useLocation } from 'react-router-dom';
import { PageLoading } from '../shared/AsyncState';
@@ -32,7 +32,7 @@ function rememberAutoReload(routeKey: string) {
}
}
-class RecoverableRouteBoundary extends Component<{ children: ReactNode; routeKey: string }, { error?: Error }> {
+class RecoverableRouteBoundary extends Component<{ children: ReactNode; routeKey: string; retryKey: number; onRetry: () => void }, { error?: Error }> {
state: { error?: Error } = {};
static getDerivedStateFromError(error: Error) {
@@ -46,8 +46,8 @@ class RecoverableRouteBoundary extends Component<{ children: ReactNode; routeKey
}
}
- componentDidUpdate(previous: Readonly<{ children: ReactNode; routeKey: string }>) {
- if (this.state.error && previous.routeKey !== this.props.routeKey) {
+ componentDidUpdate(previous: Readonly<{ children: ReactNode; routeKey: string; retryKey: number; onRetry: () => void }>) {
+ if (this.state.error && (previous.routeKey !== this.props.routeKey || previous.retryKey !== this.props.retryKey)) {
this.setState({ error: undefined });
}
}
@@ -65,6 +65,7 @@ class RecoverableRouteBoundary extends Component<{ children: ReactNode; routeKey
{chunkTimeout ? '系统已等待并尝试恢复,可能是网络暂时不稳定。刷新后会重新加载当前模块,不会丢失服务端数据。' : chunkError ? '通常是发布后旧标签页仍引用上一版本资源。刷新后会恢复,不会丢失服务端数据。' : '页面已被安全隔离,侧栏和其他模块仍可使用。更换筛选条件会自动重试,也可刷新当前页面。'}
{error.message || error.name}
@@ -99,10 +100,13 @@ export class PlatformErrorBoundary extends Component<{ children: ReactNode }, {
}
}
-export function RoutePage({ page: Page, label }: { page: ElementType; label: string }) {
+export function RoutePage({ page, recreatePage, label }: { page: ElementType; recreatePage?: () => ElementType; label: string }) {
const location = useLocation();
const routeKey = `${location.pathname}${location.search}`;
- return
- }>
+ const [retryKey, setRetryKey] = useState(0);
+ const Page = useMemo(() => retryKey && recreatePage ? recreatePage() : page, [page, recreatePage, retryKey]);
+ const retry = useCallback(() => setRetryKey((value) => value + 1), []);
+ return
+ }>
;
}
diff --git a/vehicle-data-platform/apps/web/src/v2/routing/routeModules.ts b/vehicle-data-platform/apps/web/src/v2/routing/routeModules.ts
index 865a9bf1..d1780520 100644
--- a/vehicle-data-platform/apps/web/src/v2/routing/routeModules.ts
+++ b/vehicle-data-platform/apps/web/src/v2/routing/routeModules.ts
@@ -82,6 +82,10 @@ function loadRoute(section: RouteSection) {
return next;
}
+export function createRouteComponent(section: RouteSection) {
+ return lazy(() => loadRoute(section));
+}
+
export function routeSectionForPath(pathname: string): RouteSection | undefined {
const section = pathname.split('?')[0].split('#')[0].split('/').filter(Boolean)[0] as RouteSection | undefined;
return section && section in importers ? section : undefined;
@@ -184,12 +188,23 @@ export function scheduleIdleRoutePreloads({
}
export const RoutePages = {
- Monitor: lazy(() => loadRoute('monitor')),
- Vehicles: lazy(() => loadRoute('vehicles')),
- Tracks: lazy(() => loadRoute('tracks')),
- History: lazy(() => loadRoute('history')),
- Statistics: lazy(() => loadRoute('statistics')),
- Access: lazy(() => loadRoute('access')),
- Alerts: lazy(() => loadRoute('alerts')),
- Operations: lazy(() => loadRoute('operations'))
+ Monitor: createRouteComponent('monitor'),
+ Vehicles: createRouteComponent('vehicles'),
+ Tracks: createRouteComponent('tracks'),
+ History: createRouteComponent('history'),
+ Statistics: createRouteComponent('statistics'),
+ Access: createRouteComponent('access'),
+ Alerts: createRouteComponent('alerts'),
+ Operations: createRouteComponent('operations')
+} as const;
+
+export const RoutePageFactories = {
+ Monitor: () => createRouteComponent('monitor'),
+ Vehicles: () => createRouteComponent('vehicles'),
+ Tracks: () => createRouteComponent('tracks'),
+ History: () => createRouteComponent('history'),
+ Statistics: () => createRouteComponent('statistics'),
+ Access: () => createRouteComponent('access'),
+ Alerts: () => createRouteComponent('alerts'),
+ Operations: () => createRouteComponent('operations')
} as const;