feat: Add comprehensive error boundaries for graceful error handling
Implemented React error boundaries to catch and handle errors gracefully: **Core Error Handling Components:** - Created ErrorBoundary class component with error catching and logging - Created specialized fallback UIs (MinimalErrorFallback, DataErrorFallback, ComponentErrorFallback, FormErrorFallback, ChartErrorFallback, ImageErrorFallback) - Added withErrorBoundary HOC for easy component wrapping - Created errorLogger service with Sentry integration placeholder **Error Logging Service (errorLogger.ts):** - Centralized error logging with severity levels (FATAL, ERROR, WARNING, INFO, DEBUG) - Context enrichment (URL, userAgent, timestamp, environment) - Local storage of last 10 errors in sessionStorage for debugging - User context management (setUser, clearUser) - Breadcrumb support for debugging trails **App Integration:** - Wrapped root layout with top-level ErrorBoundary for catastrophic errors - Added NetworkStatusIndicator to main page for offline sync visibility - Wrapped daily summary section with isolated DataErrorFallback - Added error boundary to AI assistant page with ComponentErrorFallback - Wrapped feeding tracking form with FormErrorFallback using withErrorBoundary HOC - Protected analytics charts with isolated ChartErrorFallback boundaries **Error Recovery Features:** - Isolated error boundaries prevent cascade failures - Retry buttons on all fallback UIs - Error count tracking with user warnings - Development-mode error details display - Automatic error logging to service (when Sentry integrated) Next: Integration with Sentry for production error tracking 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -16,6 +16,8 @@ import {
|
||||
} from '@mui/material';
|
||||
import { AppShell } from '@/components/layouts/AppShell/AppShell';
|
||||
import { ProtectedRoute } from '@/components/common/ProtectedRoute';
|
||||
import { ErrorBoundary } from '@/components/common/ErrorBoundary';
|
||||
import { ChartErrorFallback } from '@/components/common/ErrorFallbacks';
|
||||
import {
|
||||
TrendingUp,
|
||||
Hotel,
|
||||
@@ -232,21 +234,27 @@ export default function AnalyticsPage() {
|
||||
</Box>
|
||||
|
||||
<TabPanel value={tabValue} index={0}>
|
||||
<Box sx={{ p: 3 }}>
|
||||
<WeeklySleepChart />
|
||||
</Box>
|
||||
<ErrorBoundary isolate fallback={<ChartErrorFallback />}>
|
||||
<Box sx={{ p: 3 }}>
|
||||
<WeeklySleepChart />
|
||||
</Box>
|
||||
</ErrorBoundary>
|
||||
</TabPanel>
|
||||
|
||||
<TabPanel value={tabValue} index={1}>
|
||||
<Box sx={{ p: 3 }}>
|
||||
<FeedingFrequencyGraph />
|
||||
</Box>
|
||||
<ErrorBoundary isolate fallback={<ChartErrorFallback />}>
|
||||
<Box sx={{ p: 3 }}>
|
||||
<FeedingFrequencyGraph />
|
||||
</Box>
|
||||
</ErrorBoundary>
|
||||
</TabPanel>
|
||||
|
||||
<TabPanel value={tabValue} index={2}>
|
||||
<Box sx={{ p: 3 }}>
|
||||
<GrowthCurve />
|
||||
</Box>
|
||||
<ErrorBoundary isolate fallback={<ChartErrorFallback />}>
|
||||
<Box sx={{ p: 3 }}>
|
||||
<GrowthCurve />
|
||||
</Box>
|
||||
</ErrorBoundary>
|
||||
</TabPanel>
|
||||
|
||||
<TabPanel value={tabValue} index={3}>
|
||||
|
||||
Reference in New Issue
Block a user