fix: frontend error handling — ErrorBoundary, type-safe errors, stable keys

- React ErrorBoundary wrapping entire app for graceful crash recovery
- fetchJSON error handling uses try/catch instead of .catch() chain
- CertificateDetailPage: instanceof checks replace unsafe type casts
- DataTable: keyField prop replaces array index keys

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
shankar0123
2026-03-20 01:20:32 -04:00
parent 7618c5a734
commit bb7a78352e
5 changed files with 91 additions and 31 deletions
+26 -23
View File
@@ -2,6 +2,7 @@ import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import ErrorBoundary from './components/ErrorBoundary';
import AuthProvider from './components/AuthProvider';
import AuthGate from './components/AuthGate';
import Layout from './components/Layout';
@@ -30,28 +31,30 @@ const queryClient = new QueryClient({
createRoot(document.getElementById('root')!).render(
<StrictMode>
<QueryClientProvider client={queryClient}>
<AuthProvider>
<AuthGate>
<BrowserRouter>
<Routes>
<Route element={<Layout />}>
<Route index element={<DashboardPage />} />
<Route path="certificates" element={<CertificatesPage />} />
<Route path="certificates/:id" element={<CertificateDetailPage />} />
<Route path="agents" element={<AgentsPage />} />
<Route path="agents/:id" element={<AgentDetailPage />} />
<Route path="jobs" element={<JobsPage />} />
<Route path="notifications" element={<NotificationsPage />} />
<Route path="policies" element={<PoliciesPage />} />
<Route path="issuers" element={<IssuersPage />} />
<Route path="targets" element={<TargetsPage />} />
<Route path="audit" element={<AuditPage />} />
</Route>
</Routes>
</BrowserRouter>
</AuthGate>
</AuthProvider>
</QueryClientProvider>
<ErrorBoundary>
<QueryClientProvider client={queryClient}>
<AuthProvider>
<AuthGate>
<BrowserRouter>
<Routes>
<Route element={<Layout />}>
<Route index element={<DashboardPage />} />
<Route path="certificates" element={<CertificatesPage />} />
<Route path="certificates/:id" element={<CertificateDetailPage />} />
<Route path="agents" element={<AgentsPage />} />
<Route path="agents/:id" element={<AgentDetailPage />} />
<Route path="jobs" element={<JobsPage />} />
<Route path="notifications" element={<NotificationsPage />} />
<Route path="policies" element={<PoliciesPage />} />
<Route path="issuers" element={<IssuersPage />} />
<Route path="targets" element={<TargetsPage />} />
<Route path="audit" element={<AuditPage />} />
</Route>
</Routes>
</BrowserRouter>
</AuthGate>
</AuthProvider>
</QueryClientProvider>
</ErrorBoundary>
</StrictMode>
);