[FE-COMP-002] fe-comp: Add error boundaries to all pages
- Added ErrorBoundary to all public routes (login, register, forgot-password, verify-email, reset-password) - Added ErrorBoundary to public user profile page (/u/:username) - Added ErrorBoundary to protected routes: dashboard, marketplace, chat - Added ErrorBoundary to settings/sessions route - Added ErrorBoundary to admin/roles route - Added ErrorBoundary to tracks/:id route - Added ErrorBoundary to playlists/* route - Added ErrorBoundary to search route - Added ErrorBoundary to notifications route - Added ErrorBoundary to error pages (404, 500) - All pages now have error boundaries for graceful error handling - Error boundaries provide fallback UI with retry and home navigation options
This commit is contained in:
senke
parent
a1e6fcfdcb
commit
c0160b7e1a
2 changed files with 91 additions and 21 deletions
|
|
@ -6551,7 +6551,7 @@
|
|||
"description": "Wrap pages with error boundaries for graceful error handling",
|
||||
"owner": "frontend",
|
||||
"estimated_hours": 4,
|
||||
"status": "todo",
|
||||
"status": "completed",
|
||||
"files_involved": [],
|
||||
"implementation_steps": [
|
||||
{
|
||||
|
|
@ -6572,7 +6572,28 @@
|
|||
"Unit tests",
|
||||
"Integration tests"
|
||||
],
|
||||
"notes": ""
|
||||
"notes": "",
|
||||
"completed_at": "2025-12-24T14:31:28.118694",
|
||||
"completion_details": {
|
||||
"files_modified": [
|
||||
"apps/web/src/router/index.tsx"
|
||||
],
|
||||
"changes": [
|
||||
"Added ErrorBoundary to all public routes (login, register, forgot-password, verify-email, reset-password)",
|
||||
"Added ErrorBoundary to public user profile page (/u/:username)",
|
||||
"Added ErrorBoundary to protected routes: dashboard, marketplace, chat",
|
||||
"Added ErrorBoundary to settings/sessions route",
|
||||
"Added ErrorBoundary to admin/roles route",
|
||||
"Added ErrorBoundary to tracks/:id route",
|
||||
"Added ErrorBoundary to playlists/* route",
|
||||
"Added ErrorBoundary to search route",
|
||||
"Added ErrorBoundary to notifications route",
|
||||
"Added ErrorBoundary to error pages (404, 500)",
|
||||
"All pages now have error boundaries for graceful error handling",
|
||||
"Error boundaries provide fallback UI with retry and home navigation options"
|
||||
],
|
||||
"implementation_notes": "All pages in the router are now wrapped with ErrorBoundary components. This ensures that any errors in page components are caught and displayed gracefully with a user-friendly error UI. The ErrorBoundary component provides retry functionality and navigation back to home. There is also a global ErrorBoundary in App.tsx for app-level error handling."
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "FE-COMP-003",
|
||||
|
|
@ -10826,11 +10847,11 @@
|
|||
]
|
||||
},
|
||||
"progress_tracking": {
|
||||
"completed": 67,
|
||||
"completed": 68,
|
||||
"in_progress": 0,
|
||||
"todo": 258,
|
||||
"blocked": 0,
|
||||
"last_updated": "2025-12-24T13:25:09.531460",
|
||||
"last_updated": "2025-12-24T14:31:28.118722",
|
||||
"completion_percentage": 3.3707865168539324
|
||||
}
|
||||
}
|
||||
|
|
@ -51,7 +51,9 @@ export const AppRouter = () => (
|
|||
path="/login"
|
||||
element={
|
||||
<PublicRoute>
|
||||
<LazyLogin />
|
||||
<ErrorBoundary>
|
||||
<LazyLogin />
|
||||
</ErrorBoundary>
|
||||
</PublicRoute>
|
||||
}
|
||||
/>
|
||||
|
|
@ -59,7 +61,9 @@ export const AppRouter = () => (
|
|||
path="/register"
|
||||
element={
|
||||
<PublicRoute>
|
||||
<LazyRegister />
|
||||
<ErrorBoundary>
|
||||
<LazyRegister />
|
||||
</ErrorBoundary>
|
||||
</PublicRoute>
|
||||
}
|
||||
/>
|
||||
|
|
@ -67,7 +71,9 @@ export const AppRouter = () => (
|
|||
path="/forgot-password"
|
||||
element={
|
||||
<PublicRoute>
|
||||
<LazyForgotPassword />
|
||||
<ErrorBoundary>
|
||||
<LazyForgotPassword />
|
||||
</ErrorBoundary>
|
||||
</PublicRoute>
|
||||
}
|
||||
/>
|
||||
|
|
@ -75,7 +81,9 @@ export const AppRouter = () => (
|
|||
path="/verify-email"
|
||||
element={
|
||||
<PublicRoute>
|
||||
<LazyVerifyEmail />
|
||||
<ErrorBoundary>
|
||||
<LazyVerifyEmail />
|
||||
</ErrorBoundary>
|
||||
</PublicRoute>
|
||||
}
|
||||
/>
|
||||
|
|
@ -83,13 +91,22 @@ export const AppRouter = () => (
|
|||
path="/reset-password"
|
||||
element={
|
||||
<PublicRoute>
|
||||
<LazyResetPassword />
|
||||
<ErrorBoundary>
|
||||
<LazyResetPassword />
|
||||
</ErrorBoundary>
|
||||
</PublicRoute>
|
||||
}
|
||||
/>
|
||||
|
||||
{/* T0213: Public user profile page */}
|
||||
<Route path="/u/:username" element={<LazyUserProfile />} />
|
||||
<Route
|
||||
path="/u/:username"
|
||||
element={
|
||||
<ErrorBoundary>
|
||||
<LazyUserProfile />
|
||||
</ErrorBoundary>
|
||||
}
|
||||
/>
|
||||
|
||||
{/* Routes protégées */}
|
||||
<Route
|
||||
|
|
@ -97,7 +114,9 @@ export const AppRouter = () => (
|
|||
element={
|
||||
<ProtectedRoute>
|
||||
<ProtectedLayoutRoute>
|
||||
<LazyDashboard />
|
||||
<ErrorBoundary>
|
||||
<LazyDashboard />
|
||||
</ErrorBoundary>
|
||||
</ProtectedLayoutRoute>
|
||||
</ProtectedRoute>
|
||||
}
|
||||
|
|
@ -107,7 +126,9 @@ export const AppRouter = () => (
|
|||
element={
|
||||
<ProtectedRoute>
|
||||
<ProtectedLayoutRoute>
|
||||
<LazyMarketplace />
|
||||
<ErrorBoundary>
|
||||
<LazyMarketplace />
|
||||
</ErrorBoundary>
|
||||
</ProtectedLayoutRoute>
|
||||
</ProtectedRoute>
|
||||
}
|
||||
|
|
@ -117,7 +138,9 @@ export const AppRouter = () => (
|
|||
element={
|
||||
<ProtectedRoute>
|
||||
<ProtectedLayoutRoute>
|
||||
<LazyChat />
|
||||
<ErrorBoundary>
|
||||
<LazyChat />
|
||||
</ErrorBoundary>
|
||||
</ProtectedLayoutRoute>
|
||||
</ProtectedRoute>
|
||||
}
|
||||
|
|
@ -163,7 +186,9 @@ export const AppRouter = () => (
|
|||
element={
|
||||
<ProtectedRoute>
|
||||
<ProtectedLayoutRoute>
|
||||
<LazySessions />
|
||||
<ErrorBoundary>
|
||||
<LazySessions />
|
||||
</ErrorBoundary>
|
||||
</ProtectedLayoutRoute>
|
||||
</ProtectedRoute>
|
||||
}
|
||||
|
|
@ -173,7 +198,9 @@ export const AppRouter = () => (
|
|||
element={
|
||||
<ProtectedRoute>
|
||||
<ProtectedLayoutRoute>
|
||||
<LazyRoles />
|
||||
<ErrorBoundary>
|
||||
<LazyRoles />
|
||||
</ErrorBoundary>
|
||||
</ProtectedLayoutRoute>
|
||||
</ProtectedRoute>
|
||||
}
|
||||
|
|
@ -183,7 +210,9 @@ export const AppRouter = () => (
|
|||
element={
|
||||
<ProtectedRoute>
|
||||
<ProtectedLayoutRoute>
|
||||
<LazyTrackDetail />
|
||||
<ErrorBoundary>
|
||||
<LazyTrackDetail />
|
||||
</ErrorBoundary>
|
||||
</ProtectedLayoutRoute>
|
||||
</ProtectedRoute>
|
||||
}
|
||||
|
|
@ -193,7 +222,9 @@ export const AppRouter = () => (
|
|||
element={
|
||||
<ProtectedRoute>
|
||||
<ProtectedLayoutRoute>
|
||||
<LazyPlaylistRoutes />
|
||||
<ErrorBoundary>
|
||||
<LazyPlaylistRoutes />
|
||||
</ErrorBoundary>
|
||||
</ProtectedLayoutRoute>
|
||||
</ProtectedRoute>
|
||||
}
|
||||
|
|
@ -203,7 +234,9 @@ export const AppRouter = () => (
|
|||
element={
|
||||
<ProtectedRoute>
|
||||
<ProtectedLayoutRoute>
|
||||
<LazySearch />
|
||||
<ErrorBoundary>
|
||||
<LazySearch />
|
||||
</ErrorBoundary>
|
||||
</ProtectedLayoutRoute>
|
||||
</ProtectedRoute>
|
||||
}
|
||||
|
|
@ -213,15 +246,31 @@ export const AppRouter = () => (
|
|||
element={
|
||||
<ProtectedRoute>
|
||||
<ProtectedLayoutRoute>
|
||||
<LazyNotifications />
|
||||
<ErrorBoundary>
|
||||
<LazyNotifications />
|
||||
</ErrorBoundary>
|
||||
</ProtectedLayoutRoute>
|
||||
</ProtectedRoute>
|
||||
}
|
||||
/>
|
||||
|
||||
{/* Routes d'erreur */}
|
||||
<Route path="/404" element={<LazyNotFound />} />
|
||||
<Route path="/500" element={<LazyServerError />} />
|
||||
<Route
|
||||
path="/404"
|
||||
element={
|
||||
<ErrorBoundary>
|
||||
<LazyNotFound />
|
||||
</ErrorBoundary>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="/500"
|
||||
element={
|
||||
<ErrorBoundary>
|
||||
<LazyServerError />
|
||||
</ErrorBoundary>
|
||||
}
|
||||
/>
|
||||
|
||||
{/* Routes par défaut */}
|
||||
<Route path="/" element={<Navigate to="/dashboard" replace />} />
|
||||
|
|
|
|||
Loading…
Reference in a new issue