error-propagation: audit existing ErrorBoundary usage

EXHAUSTIVE_TODO_LIST.md

@@ -771,11 +771,11 @@ Critical path dependencies:
   - **Validation**: 401 errors redirect ✅
   - **Rollback**: Remove redirect logic
 
-- [ ] **Action 3.2.1.5**: Server errors show request ID + support link
+- [x] **Action 3.2.1.5**: Server errors show request ID + support link
   - **Scope**: `apps/web/src/components/ui/ErrorDisplay.tsx` - Show request ID, add "Report Issue" button
-  - **Dependencies**: Action 3.1.1.2 complete
+  - **Dependencies**: Action 3.1.1.2 complete ✅
   - **Risk**: LOW
-  - **Validation**: Request ID visible, support link works
+  - **Validation**: Request ID visible, support link works ✅
   - **Rollback**: Remove request ID display
 
 - [x] **Action 3.2.1.6**: Create support issue reporting utility
@@ -795,11 +795,11 @@ Critical path dependencies:
 ### Sub-Epic 3.3: Error Boundaries 🟢
 
 #### Task 3.3.1: Wrap Routes in Error Boundaries
-- [ ] **Action 3.3.1.1**: Audit existing ErrorBoundary usage
+- [x] **Action 3.3.1.1**: Audit existing ErrorBoundary usage
   - **Scope**: `apps/web/src/components/ErrorBoundary.tsx` - Check where used
-  - **Dependencies**: None
+  - **Dependencies**: None ✅
   - **Risk**: LOW
-  - **Validation**: List of routes without boundaries
+  - **Validation**: List of routes without boundaries ✅
   - **Rollback**: N/A (read-only)
 
 - [ ] **Action 3.3.1.2**: Wrap all routes in ErrorBoundary

apps/web/docs/ERROR_BOUNDARY_AUDIT.md

@@ -0,0 +1,130 @@
+# Error Boundary Usage Audit
+
+**Date**: 2026-01-11  
+**Action**: 3.3.1.1 - Audit existing ErrorBoundary usage  
+**Status**: ✅ Complete
+
+## Summary
+
+This document audits the current usage of ErrorBoundary components across the application to identify coverage gaps and areas for improvement.
+
+## ErrorBoundary Components Found
+
+### 1. Main ErrorBoundary Component
+**File**: `apps/web/src/components/ErrorBoundary.tsx`
+- **Type**: Class component extending React.Component
+- **Features**:
+  - Logs errors to structured logger
+  - Sends errors to Sentry
+  - Custom fallback UI support
+  - Reset functionality
+  - Dev mode error details display
+- **Current Usage**: Wraps entire app in `App.tsx` (line 122)
+
+### 2. PlaylistErrorBoundary Component
+**File**: `apps/web/src/features/playlists/components/PlaylistErrorBoundary.tsx`
+- **Type**: Class component extending React.Component
+- **Features**:
+  - Specialized for playlist components
+  - Uses ErrorDisplay component for fallback UI (already updated per Action 3.1.1.10)
+  - Reset functionality
+  - Custom fallback support
+- **Current Usage**: Wraps playlist-specific components
+
+### 3. LazyErrorBoundary Component
+**File**: `apps/web/src/components/ui/LazyComponent.tsx`
+- **Type**: Class component extending React.Component
+- **Features**:
+  - Specialized for lazy-loaded components
+  - Custom fallback UI (LazyErrorFallback)
+  - Retry functionality
+- **Current Usage**: Wraps lazy-loaded page components
+
+## Current Coverage
+
+### ✅ Covered Areas
+
+1. **App-Level Coverage**
+   - `App.tsx` wraps entire application with `ErrorBoundary`
+   - Catches all unhandled React errors at the top level
+
+2. **Playlist Components**
+   - `PlaylistErrorBoundary` wraps playlist-specific components
+   - Provides specialized error handling for playlist operations
+
+3. **Lazy-Loaded Components**
+   - `LazyErrorBoundary` wraps lazy-loaded page components
+   - Handles code-splitting errors
+
+### ❌ Gaps Identified
+
+1. **Route-Level Coverage**
+   - **Issue**: No ErrorBoundary wrapping individual routes
+   - **Impact**: If one route crashes, entire app may become unusable
+   - **Recommendation**: Wrap each route with ErrorBoundary (Action 3.3.1.2)
+
+2. **Feature-Level Coverage**
+   - **Issue**: Only playlists have feature-specific error boundary
+   - **Impact**: Other features (tracks, library, marketplace, chat) lack isolated error handling
+   - **Recommendation**: Consider feature-specific boundaries for critical features
+
+3. **Component-Level Coverage**
+   - **Issue**: No boundaries around individual components that might fail
+   - **Impact**: Component failures can propagate up to route/app level
+   - **Recommendation**: Add boundaries for complex components (modals, forms, data-heavy components)
+
+## Router Structure
+
+**File**: `apps/web/src/router/index.tsx`
+- Uses React Router for routing
+- Routes are defined but not individually wrapped with ErrorBoundary
+- All routes are currently protected by app-level ErrorBoundary only
+
+## Recommendations
+
+### High Priority
+
+1. **Wrap Individual Routes** (Action 3.3.1.2)
+   - Add ErrorBoundary to each route definition
+   - Prevents one route crash from affecting entire app
+   - Allows route-specific error recovery
+
+2. **Update ErrorBoundary UI** (Action 3.3.1.3)
+   - Replace custom fallback UI with ErrorDisplay component
+   - Provides consistent error presentation
+   - Already done for PlaylistErrorBoundary
+
+### Medium Priority
+
+3. **Add Feature-Level Boundaries**
+   - Consider boundaries for:
+     - Track upload/management features
+     - Marketplace features
+     - Chat features
+     - Library features
+
+4. **Component-Level Boundaries**
+   - Add boundaries for:
+     - Complex modals (UploadModal, ShareDialog)
+     - Data-heavy components (LibraryPage, MarketplaceHome)
+     - Forms with complex validation
+
+### Low Priority
+
+5. **Error Boundary Logging** (Action 3.3.1.4)
+   - Enhance logging with more context
+   - Add user action tracking
+   - Improve error correlation
+
+## Files Requiring Updates
+
+1. `apps/web/src/router/index.tsx` - Add ErrorBoundary to routes
+2. `apps/web/src/components/ErrorBoundary.tsx` - Update to use ErrorDisplay (Action 3.3.1.3)
+3. Feature components - Consider adding feature-specific boundaries
+
+## Next Steps
+
+1. ✅ Complete: Audit existing ErrorBoundary usage
+2. ⏭️ Next: Wrap all routes in ErrorBoundary (Action 3.3.1.2)
+3. ⏭️ Next: Update ErrorBoundary to use ErrorDisplay (Action 3.3.1.3)
+4. ⏭️ Next: Add error boundary logging (Action 3.3.1.4)