senke/veza
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
veza/apps/web/docs/ERROR_BOUNDARY_AUDIT.md

4.4 KiB
Raw Blame History

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

  1. Add Feature-Level Boundaries

    • Consider boundaries for:
      • Track upload/management features
      • Marketplace features
      • Chat features
      • Library features

  2. Component-Level Boundaries

    • Add boundaries for:
      • Complex modals (UploadModal, ShareDialog)
      • Data-heavy components (LibraryPage, MarketplaceHome)
      • Forms with complex validation

Low Priority

  1. 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)