shishengliang/lingniu-vehicle-ingest
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(web): retry rejected route modules

Browse Source
This commit is contained in:
lingniu
2026-07-16 07:01:34 +08:00
parent ec3071d59b
commit fa886abff9
4 changed files with 61 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
vehicle-data-platform/apps/web/src/v2/AppV2.tsx
View File

@@ -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() {
<Routes>
<Route element={<AppShell />}>
<Route index element={<Navigate to="/monitor" replace />} />
<Route path="/monitor" element={<RoutePage page={RoutePages.Monitor} label="全局监控" />} />
<Route path="/vehicles/:vin?" element={<RoutePage page={RoutePages.Vehicles} label="车辆查询" />} />
<Route path="/tracks" element={<RoutePage page={RoutePages.Tracks} label="轨迹回放" />} />
<Route path="/history" element={<RoutePage page={RoutePages.History} label="历史数据" />} />
<Route path="/statistics" element={<RoutePage page={RoutePages.Statistics} label="里程查询" />} />
<Route path="/access" element={<RoutePage page={RoutePages.Access} label="接入管理" />} />
<Route path="/alerts/*" element={<RoutePage page={RoutePages.Alerts} label="告警中心" />} />
<Route path="/operations" element={<RoutePage page={RoutePages.Operations} label="运维质量" />} />
<Route path="/monitor" element={<RoutePage page={RoutePages.Monitor} recreatePage={RoutePageFactories.Monitor} label="全局监控" />} />
<Route path="/vehicles/:vin?" element={<RoutePage page={RoutePages.Vehicles} recreatePage={RoutePageFactories.Vehicles} label="车辆查询" />} />
<Route path="/tracks" element={<RoutePage page={RoutePages.Tracks} recreatePage={RoutePageFactories.Tracks} label="轨迹回放" />} />
<Route path="/history" element={<RoutePage page={RoutePages.History} recreatePage={RoutePageFactories.History} label="历史数据" />} />
<Route path="/statistics" element={<RoutePage page={RoutePages.Statistics} recreatePage={RoutePageFactories.Statistics} label="里程查询" />} />
<Route path="/access" element={<RoutePage page={RoutePages.Access} recreatePage={RoutePageFactories.Access} label="接入管理" />} />
<Route path="/alerts/*" element={<RoutePage page={RoutePages.Alerts} recreatePage={RoutePageFactories.Alerts} label="告警中心" />} />
<Route path="/operations" element={<RoutePage page={RoutePages.Operations} recreatePage={RoutePageFactories.Operations} label="运维质量" />} />
<Route path="*" element={<Navigate to="/monitor" replace />} />
</Route>
</Routes>

19
vehicle-data-platform/apps/web/src/v2/routing/RouteBoundary.test.tsx
View File

@@ -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(<MemoryRouter future={ROUTER_FUTURE} initialEntries={['/statistics']}><RoutePage page={StaleChunkPage} label="里程查询" /></MemoryRouter>);
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: () => <strong>历史模块已恢复</strong> })));
render(<MemoryRouter future={ROUTER_FUTURE} initialEntries={['/history']}><RoutePage page={failedPage} recreatePage={recreatePage} label="历史数据" /></MemoryRouter>);
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', () => {

18
vehicle-data-platform/apps/web/src/v2/routing/RouteBoundary.tsx
View File

@@ -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
<p>{chunkTimeout ? '系统已等待并尝试恢复，可能是网络暂时不稳定。刷新后会重新加载当前模块，不会丢失服务端数据。' : chunkError ? '通常是发布后旧标签页仍引用上一版本资源。刷新后会恢复，不会丢失服务端数据。' : '页面已被安全隔离，侧栏和其他模块仍可使用。更换筛选条件会自动重试，也可刷新当前页面。'}</p>
<code>{error.message || error.name}</code>
<footer>
<button type="button" onClick={this.props.onRetry}><IconRefresh />重试加载模块</button>
<button type="button" onClick={() => window.location.reload()}><IconRefresh />刷新当前页面</button>
<a href="/monitor"><IconHome />返回全局监控</a>
</footer>
@@ -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 <RecoverableRouteBoundary key={location.pathname} routeKey={routeKey}>
<Suspense fallback={<PageLoading label={`正在加载${label}`} />}><Page /></Suspense>
const [retryKey, setRetryKey] = useState(0);
const Page = useMemo(() => retryKey && recreatePage ? recreatePage() : page, [page, recreatePage, retryKey]);
const retry = useCallback(() => setRetryKey((value) => value + 1), []);
return <RecoverableRouteBoundary key={location.pathname} routeKey={routeKey} retryKey={retryKey} onRetry={retry}>
<Suspense fallback={<PageLoading label={`正在加载${label}`} />}><Page key={retryKey} /></Suspense>
</RecoverableRouteBoundary>;
}

31
vehicle-data-platform/apps/web/src/v2/routing/routeModules.ts
View File

@@ -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;