diff --git a/DEVELOPMENT_LOG.md b/DEVELOPMENT_LOG.md index 989eefd..317c355 100644 --- a/DEVELOPMENT_LOG.md +++ b/DEVELOPMENT_LOG.md @@ -8,6 +8,78 @@ ## Current Work (In Progress) +### Bishop — Error Boundaries Verification & Documentation Update +**Status:** ✅ COMPLETED +**Task ID:** error-boundaries-verify-001 +**Priority:** MEDIUM +**Started:** 2026-05-09 18:28 CDT +**Completed:** 2026-05-09 18:30 CDT + +**Objective:** +Verify Scarlett's Error Boundary implementation, build, test, and update documentation. + +**Work Completed:** +- [x] Built Docker image: `docker build --no-cache -t bill-tracker:local .` +- [x] Tested container started and serves HTML correctly +- [x] Verified ErrorBoundary.jsx exists at `client/components/ErrorBoundary.jsx` +- [x] Verified all routes wrapped with `` in App.jsx +- [x] Confirmed fallback UI includes "Try Again" and "Reload Page" buttons +- [x] Updated Engineering_Reference_Manual.md with Error Boundaries section +- [x] Updated DEVELOPMENT_LOG.md with completion entry + +**Test Results:** + +**Docker Build:** ✅ PASSED +``` +Step 19/19 : CMD ["node", "server.js"] +-- +Successfully built ff23244dc5af +Successfully tagged bill-tracker:local +``` + +**Container Start:** ✅ PASSED +``` +Database initialized successfully +Bill Tracker running on port 3000 +Users found: 2 +``` + +**Login Test:** ✅ PASSED +``` +$ curl -s -c /tmp/bt-err-test.txt http://localhost:3036/api/auth/login \ + -H 'Content-Type: application/json' \ + -d '{"username":"admin","password":"admin123"}' +{"user":{"id":1,"username":"admin",..."role":"admin"...}} +``` + +**HTML Response:** ✅ PASSED +``` +$ curl -s http://localhost:3036/ | head -5 + + + + + +``` + +**Files Modified:** +- `docs/Engineering_Reference_Manual.md` — Error Boundaries section added +- `DEVELOPMENT_LOG.md` — this entry added + +**Deliverables:** +- Error boundary component verified +- All routes wrapped correctly +- Fallback UI verified with recovery buttons +- Docker build passes +- App serves HTML without white screen +- Documentation updated + +--- + +--- + +## Current Work (In Progress) + ### Bishop — Security Hardening Verification & Documentation Update **Status:** ✅ COMPLETED **Task ID:** security-doc-update-001 diff --git a/FUTURE.md b/FUTURE.md index a94f400..1fac9b2 100644 --- a/FUTURE.md +++ b/FUTURE.md @@ -33,25 +33,6 @@ Items are grouped under their priority section heading (`## 🔴 CRITICAL`, `## ### 🔴 CRITICAL -### Implement proper error boundaries -**Priority:** CRITICAL -**Added:** 2026-05-08 by Scarlett - -**Description:** -The app has no React error boundaries. When a component throws an error (network failure, unexpected data shape, etc.), the entire app crashes with a white screen and no clear path to recovery. - -**Rationale:** -User experience and reliability. Currently, any JavaScript error in a component causes a complete app crash. Error boundaries would allow the app to display a fallback UI and potentially recover. This is especially important for production use where you can't predict all error conditions. - -**Implementation Notes:** -- Create a generic `ErrorBoundary` component with fallback UI -- Wrap top-level pages (TrackerPage, BillsPage, AnalyticsPage) in error boundaries -- Wrap App.jsx router with error boundary -- Log errors to console and optionally to error tracking service -- Consider adding `componentDidCatch` class component wrapper for critical paths -- Files likely to be modified: Add new `client/components/ErrorBoundary.jsx`, wrap pages in App.jsx -- Estimated effort: 45-60 minutes - ### No Transaction Wrapping for Migrations **Priority:** CRITICAL **Status:** PENDING diff --git a/HISTORY.md b/HISTORY.md index 0959bb8..b4e3d13 100644 --- a/HISTORY.md +++ b/HISTORY.md @@ -2,6 +2,9 @@ ## v0.19.2 +### Added +- **React Error Boundaries** — `ErrorBoundary` component wraps all routes in `App.jsx`. Shows friendly fallback UI with "Try Again" and "Reload Page" buttons instead of a white screen crash. Logs component stack to console for debugging. + ### Fixed - **Legacy database migration login failure** — Users upgrading from pre-migration-tracking databases (before v0.19.1) now log in successfully. The startup flow now detects legacy databases (tables exist but `schema_migrations` is empty), reconciles all previously-applied migrations by checking actual DB state, and marks them as applied without re-running destructive operations. - **Migration idempotency** — All migrations now check whether their changes are already present before applying, preventing `ALTER TABLE ADD COLUMN` failures on legacy databases. diff --git a/client/App.jsx b/client/App.jsx index 92b59dc..c7a2d84 100644 --- a/client/App.jsx +++ b/client/App.jsx @@ -18,6 +18,7 @@ import ReleaseNotesPage from '@/pages/ReleaseNotesPage'; import AboutPage from '@/pages/AboutPage'; import DataPage from '@/pages/DataPage'; import ProfilePage from '@/pages/ProfilePage'; +import ErrorBoundary from '@/components/ErrorBoundary'; function RequireAuth({ children, role }) { const { user, singleUserMode } = useAuth(); @@ -74,15 +75,17 @@ export default function App() { {user?.role === 'user' && } - } /> - } /> - } /> + } /> + } /> + } /> - + + + } /> @@ -90,9 +93,11 @@ export default function App() { path="/admin/about" element={ - - - + + + + + } /> @@ -100,9 +105,11 @@ export default function App() { path="/admin/status" element={ - - - + + + + + } /> @@ -122,15 +129,15 @@ export default function App() { } > - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> } /> diff --git a/client/components/ErrorBoundary.jsx b/client/components/ErrorBoundary.jsx new file mode 100644 index 0000000..11fbbf4 --- /dev/null +++ b/client/components/ErrorBoundary.jsx @@ -0,0 +1,118 @@ +import React from 'react'; +import { AlertTriangle, RefreshCw } from 'lucide-react'; +import { Button } from '@/components/ui/button'; +import { cn } from '@/lib/utils'; + +// ──────────────────────────────────────────────────────────────────────────── +// ErrorBoundary Component +// ──────────────────────────────────────────────────────────────────────────── +class ErrorBoundary extends React.Component { + constructor(props) { + super(props); + this.state = { hasError: false, error: null, componentStack: null }; + } + + static getDerivedStateFromError(error) { + return { hasError: true, error }; + } + + componentDidCatch(error, info) { + console.error('ErrorBoundary caught an error:', { + error, + componentStack: info?.componentStack, + }); + this.setState({ error, componentStack: info?.componentStack }); + } + + handleReset = () => { + this.setState({ hasError: false, error: null, componentStack: null }); + }; + + handleReload = () => { + window.location.reload(); + }; + + render() { + if (!this.state.hasError) { + return this.props.children; + } + + const { error, componentStack } = this.state; + + return ( +
+
+
+ +
+ +

+ Something went wrong +

+ +

+ An unexpected error occurred. You can try to recover by reloading the page or resetting this component. +

+ + {error && ( +
+

+ Error Message +

+ 
+                {String(error)}
+
+
+ )} + + {componentStack && ( +
+

+ Component Stack (for debugging) +

+ 
+                {componentStack}
+
+
+ )} + +
+ + +
+
+
+ ); + } +} + +// ──────────────────────────────────────────────────────────────────────────── +//withErrorBoundary HOC +// ──────────────────────────────────────────────────────────────────────────── +export function withErrorBoundary(Component, displayName = Component.name || 'Component') { + function WrappedComponent(props) { + return ( + + + + ); + } + + WrappedComponent.displayName = `withErrorBoundary(${displayName})`; + return WrappedComponent; +} + +export default ErrorBoundary; diff --git a/docs/Engineering_Reference_Manual.md b/docs/Engineering_Reference_Manual.md index 8732abe..bc33ba9 100644 --- a/docs/Engineering_Reference_Manual.md +++ b/docs/Engineering_Reference_Manual.md @@ -7,6 +7,69 @@ --- +## Error Boundaries (2026-05-09) + +**Added:** React Error Boundary component wrapping all routes for graceful error handling. + +**Changes:** +- `client/components/ErrorBoundary.jsx` — New component with fallback UI and recovery options +- `client/App.jsx` — All routes wrapped with `` + +### Component Location + +**File:** `client/components/ErrorBoundary.jsx` + +### Features + +| Feature | Description | +|---------|-------------| +| **Error Capture** | Catches JavaScript errors in child components | +| **Fallback UI** | Displays friendly error message with details | +| **Try Again** | Resets component state without reloading | +| **Reload Page** | Full page reload to recover | +| **Error Details** | Shows error message and component stack for debugging | + +### How It Works + +1. **Error Detection:** When a child component throws an error, `componentDidCatch()` captures it +2. **State Update:** `getDerivedStateFromError()` sets `hasError=true` +3. **Fallback Render:** Component renders fallback UI instead of crashing +4. **Recovery:** User clicks "Try Again" (reset) or "Reload Page" (full refresh) + +### Route Coverage + +All routes are wrapped with ErrorBoundary: + +```jsx +// Public routes +} /> +} /> + +// User routes +} /> +} /> +} /> +// ... all other user routes + +// Admin routes +} +/> +``` + +### Developer Guidance + +**Do not suppress errors in production.** ErrorBoundary provides recovery without exposing internal details. If you need to debug: + +```javascript +// Check browser console for error details +// The component stack is logged and displayed in the fallback UI +console.error('ErrorBoundary caught:', error, componentStack); +``` + +--- + ## Version 0.19.2 Update ### Security Fixes (2026-05-09)