From 00549b5dfe3e8874eb330a1ab49240caee7214b0 Mon Sep 17 00:00:00 2001
From: Aryanshravan <aryanshravanchouti123@gmail.com>
Date: Thu, 21 May 2026 00:06:08 +0530
Subject: [PATCH] Feat implement centralized error handling for API routes

---
 CODEBASE_ISSUES.md                       | 708 +++++++++++++++++++++++
 package-lock.json                        |  67 +--
 src/app/api/badge/commits/route.ts       |   9 +-
 src/app/api/badge/streak-shield/route.ts |   9 +-
 src/app/api/webhooks/github/route.ts     |  11 +-
 src/lib/error-handler.ts                 |  92 +++
 6 files changed, 828 insertions(+), 68 deletions(-)
 create mode 100644 CODEBASE_ISSUES.md
 create mode 100644 src/lib/error-handler.ts

diff --git a/CODEBASE_ISSUES.md b/CODEBASE_ISSUES.md
new file mode 100644
index 00000000..66d7f497
--- /dev/null
+++ b/CODEBASE_ISSUES.md
@@ -0,0 +1,708 @@
+# DevTrack Codebase Analysis Report
+**Generated:** May 20, 2026  
+**Total Issues Found:** 15 intermediate-level issues  
+
+---
+
+## 🔴 Issue #1: Missing Input Validation in Goal Creation Form
+
+**Title:** Goal title input lacks validation constraints (length limits, special characters)
+
+**Description:**  
+The goal creation form in `GoalTracker.tsx` accepts any string as a title without validation. There are no:
+- Maximum length limits (could cause DB storage issues or UI overflow)
+- Minimum length validation (empty string after trim check could be submitted)
+- Sanitization of special characters (potential XSS or SQL injection vectors)
+- Required field indicators for users
+
+Users can create goals with titles that are excessively long or contain problematic characters.
+
+**Location:** [src/components/GoalTracker.tsx](src/components/GoalTracker.tsx#L60-L75)
+
+**Code Context:**
+```typescript
+async function handleCreate(e: React.FormEvent) {
+  // ...
+  const response = await fetch("/api/goals", {
+    method: "POST",
+    body: JSON.stringify({ title, target, unit, recurrence }),
+  });
+  // Only checks if title exists, no length/content validation
+}
+```
+
+**Difficulty:** Intermediate
+
+**Why It Matters:**
+- Could lead to UI layout issues with extremely long titles
+- Database might enforce limits that aren't reflected in UI (poor UX)
+- Special characters could cause rendering issues or security vulnerabilities
+- Users get no feedback about constraints before submission
+
+**Suggested Approach:**
+1. Add client-side validation in `handleCreate()`: check title length (2-100 chars recommended)
+2. Add HTML5 `maxLength` attribute to the input field
+3. Validate target is a positive integer
+4. Show error messages for invalid inputs before submit
+5. Add required field indicators with asterisks
+6. Sanitize title on the server (POST `/api/goals`) as backup
+
+**Impact:** Medium - affects usability and data quality
+
+---
+
+## 🔴 Issue #2: Missing Error Boundary on Dashboard Page
+
+**Title:** No error boundary wrapper for dashboard components
+
+**Description:**  
+The dashboard page renders 17+ complex components (ContributionGraph, PRMetrics, etc.) but has no error boundary to catch component errors. If any single component throws an uncaught error, the entire dashboard becomes unusable with a blank screen or cryptic browser error.
+
+**Location:** [src/app/dashboard/page.tsx](src/app/dashboard/page.tsx#L1-L70)
+
+**Current State:**
+- Only the app-level `error.tsx` exists
+- Dashboard components can fail independently
+- No fallback UI for individual widget failures
+- Users can't identify which component failed
+
+**Difficulty:** Intermediate
+
+**Why It Matters:**
+- Improves resilience - one broken widget doesn't crash the entire dashboard
+- Better error reporting - can log which specific component failed
+- Better UX - users see partial dashboard instead of blank page
+- Easier debugging - error boundaries show stack traces
+
+**Suggested Approach:**
+1. Create a `DashboardErrorBoundary.tsx` wrapper component
+2. Wrap each major section (StreakTracker, PRMetrics, GoalTracker, etc.) or use a grid-level boundary
+3. Show error UI with "Try again" button and error message per widget
+4. Log errors to monitoring service (if available)
+5. Add `ErrorBoundary` from a library like `react-error-boundary` if not already imported
+
+**Impact:** High - affects user experience during failures
+
+---
+
+## 🔴 Issue #3: Incomplete Error Handling with Empty Catch Blocks
+
+**Title:** Multiple catch blocks silently swallow errors without logging
+
+**Description:**  
+Several components use `.catch(() => {})` patterns that swallow errors completely without any logging, fallback, or user notification. This makes debugging difficult and hides potential issues.
+
+**Location:** Multiple files
+- [src/components/GoalTracker.tsx](src/components/GoalTracker.tsx#L48-L52) - `loadGoals().catch(() => {})`
+- [src/components/StreakAtRiskBanner.tsx](src/components/StreakAtRiskBanner.tsx#L33) - `.catch(() => {})`
+- [src/components/ContributionHeatmap.tsx](src/components/ContributionHeatmap.tsx#L71-L100)
+
+**Code Example:**
+```typescript
+// Bad: Silently fails
+loadGoals()
+  .catch(() => {})
+  .finally(() => { setLoading(false); });
+
+// Better: Log error
+loadGoals()
+  .catch((err) => {
+    console.error("Failed to load goals:", err);
+    setError("Failed to load goals. Please try again.");
+  })
+```
+
+**Difficulty:** Intermediate
+
+**Why It Matters:**
+- Errors are hidden from developers - makes debugging nearly impossible
+- Users don't know something failed
+- Can mask data corruption or API issues
+- Makes monitoring and alerting ineffective
+
+**Suggested Approach:**
+1. Add error logging to console: `console.error(error)`
+2. Set error state to show user feedback: `setError("Failed to load data")`
+3. Consider adding error tracking service (Sentry, etc.)
+4. Create a shared `logError()` utility function for consistency
+5. Show toast/banner notifications for recoverable errors
+
+**Impact:** Medium - affects debugging and monitoring
+
+---
+
+## 🔴 Issue #4: Race Condition in Goal Period Reset
+
+**Title:** Concurrent requests can cause goal progress to be lost during period reset
+
+**Description:**  
+The `/api/goals` GET endpoint has a race condition where concurrent requests checking period_start can both see the old value and attempt to reset. While there's a `.lt()` condition to prevent double-updates, if two requests race, the second one might not see the reset goal before returning.
+
+**Location:** [src/app/api/goals/route.ts](src/app/api/goals/route.ts#L50-L80)
+
+**Code Context:**
+```typescript
+// Two concurrent requests both see period_start < periodStart
+// Request 1 updates: current = 0, period_start = new
+// Request 2 sees .lt() fails, tries to fetch again
+// But there's a window where both see stale data
+```
+
+**Difficulty:** Intermediate
+
+**Why It Matters:**
+- Goal progress could be lost if reset happens at the same time as fetch
+- Users might not see accurate goal progress
+- Edge case that's hard to reproduce and debug
+- Could cause frustration if users' goal progress mysteriously resets
+
+**Suggested Approach:**
+1. Use server-side caching with a cache key including period to prevent multiple resets
+2. Add optimistic locking with version numbers to goals table
+3. Use database transactions if Supabase supports them
+4. Consider moving period reset logic to a scheduled job rather than on GET
+5. Add a debounce on the frontend to prevent multiple concurrent API calls
+
+**Impact:** Medium - affects data consistency
+
+---
+
+## 🔴 Issue #5: Missing Null Safety Checks in Contribution Graph
+
+**Title:** Potential null/undefined errors in `mergeContributionData()` function
+
+**Description:**  
+The `mergeContributionData()` function doesn't validate input arrays before processing them. If the API returns null or undefined, the code will throw an error.
+
+**Location:** [src/components/ContributionGraph.tsx](src/components/ContributionGraph.tsx#L40-L65)
+
+**Code:**
+```typescript
+function mergeContributionData(
+  myData: DayData[],
+  friendData: DayData[]
+): GraphPoint[] {
+  const map = new Map<string, GraphPoint>();
+
+  myData.forEach(d => {  // ❌ myData could be null
+    map.set(d.day, { date: d.day, you: d.commits, friend: 0 });
+  });
+  // No null checks
+}
+```
+
+**Difficulty:** Intermediate
+
+**Why It Matters:**
+- Unhandled errors crash the component
+- Defensive programming catches API inconsistencies
+- Better error messages help debugging
+- Improves component reliability
+
+**Suggested Approach:**
+1. Add null checks: `if (!myData?.length || !friendData?.length) return [];`
+2. Add type guards for expected data shape
+3. Return early with fallback value if data is invalid
+4. Log warning if data shape is unexpected
+5. Add unit tests for edge cases
+
+**Impact:** Medium - affects component reliability
+
+---
+
+## 🔴 Issue #6: Missing Accessibility Labels on Form Inputs
+
+**Title:** Goal tracker form inputs missing associated labels and ARIA attributes
+
+**Description:**  
+The goal creation form inputs (`title`, `target`, `unit`, `recurrence`) lack proper `<label>` elements associated via `htmlFor`. Screen readers cannot properly identify form fields.
+
+**Location:** [src/components/GoalTracker.tsx](src/components/GoalTracker.tsx#L290-L340)
+
+**Current State:**
+```tsx
+<input
+  type="text"
+  value={title}
+  onChange={(e) => setTitle(e.target.value)}
+  placeholder="Goal title"  // ❌ No label, only placeholder
+  className="..."
+/>
+```
+
+**Difficulty:** Intermediate
+
+**Why It Matters:**
+- Screen reader users cannot identify form fields
+- Violates WCAG accessibility guidelines
+- Reduces usability for keyboard navigation
+- Better UX for all users, not just disabled users
+
+**Suggested Approach:**
+1. Add `<label htmlFor="goal-title">Goal Title</label>` before each input
+2. Add `id="goal-title"` to corresponding input
+3. Add `required` attribute to required fields
+4. Add `aria-required="true"` for screen readers
+5. Consider using Tailwind's sr-only class for hidden labels if space is constrained
+6. Add `aria-describedby` for helper text
+
+**Impact:** Medium - affects accessibility
+
+---
+
+## 🔴 Issue #7: Memory Leak in ContributionHeatmap Interval
+
+**Title:** Interval not properly cleaned up if component unmounts during data fetch
+
+**Description:**  
+The `ContributionHeatmap` component sets up an interval for updating "minutes ago" but the cleanup function might not execute properly if the component unmounts while the fetch is still pending.
+
+**Location:** [src/components/ContributionHeatmap.tsx](src/components/ContributionHeatmap.tsx#L95-L115)
+
+**Code:**
+```typescript
+useEffect(() => {
+  let active = true;
+  setLoading(true);
+  setError(null);
+
+  fetch(`/api/metrics/contributions?days=${days}`)
+    .then((response) => {
+      if (!active) return;  // ✓ Cleanup check
+      setData(result.data ?? {});
+    })
+    // ...
+    .finally(() => {
+      if (!active) return;
+      setLoading(false);
+      setLastUpdated(new Date());
+      setMinutesAgo(0);
+    });
+
+  // ✓ Cleanup effect
+  return () => {
+    active = false;
+  };
+}, [days]);
+
+// ❌ BUT: The "minutes ago" interval in a separate useEffect
+useEffect(() => {
+  if (!lastUpdated) return;
+  const interval = setInterval(() => {
+    setMinutesAgo(Math.floor((Date.now() - lastUpdated.getTime()) / 60000));
+  }, 60000);
+  return () => clearInterval(interval);
+}, [lastUpdated]);
+```
+
+**Difficulty:** Intermediate
+
+**Why It Matters:**
+- Intervals can continue running after component unmounts
+- Multiple intervals can accumulate if component mounts/unmounts repeatedly
+- Can cause memory leaks over time in SPAs
+- Could cause console warnings in development
+
+**Suggested Approach:**
+1. Ensure interval cleanup is robust
+2. Add check for component mounted before calling setState in interval
+3. Consider using a library like `useMountedState()` hook
+4. Test with React DevTools Profiler to verify cleanup
+5. Consider moving "minutes ago" calculation to a separate component
+
+**Impact:** Low-Medium - subtle memory issue
+
+---
+
+## 🔴 Issue #8: No Validation of Target Value in Goal Creation
+
+**Title:** Goal target field accepts non-positive or non-numeric values
+
+**Description:**  
+The goal `target` input doesn't validate that the value is:
+- A positive number (> 0)
+- Not NaN
+- Reasonable range (not 1000000+)
+
+**Location:** [src/components/GoalTracker.tsx](src/components/GoalTracker.tsx#L314-L325)
+
+**Current HTML:**
+```tsx
+<input
+  type="number"
+  value={target}
+  onChange={(e) => setTarget(Number(e.target.value))}
+  min="1"  // ✓ HTML5 validation helps
+  placeholder="e.g., 7"
+/>
+```
+
+**Issue:** Even with `min="1"`, users can submit invalid values with JavaScript, and the form doesn't show error messages.
+
+**Difficulty:** Intermediate
+
+**Why It Matters:**
+- Invalid goals (target=0) make no sense
+- Could break goal progress percentage calculations (division by zero)
+- Poor UX - no feedback on why submission might fail
+- Data quality issues
+
+**Suggested Approach:**
+1. Add JavaScript validation before submit: `if (target < 1 || target > 10000) { setError(...) }`
+2. Show error message if invalid
+3. Add max attribute to HTML: `max="10000"`
+4. Disable submit button if `target < 1 || !Number.isFinite(target)`
+5. Add feedback text showing goal limits (e.g., "Target: 1-10,000")
+
+**Impact:** Medium - affects data quality and UX
+
+---
+
+## 🔴 Issue #9: XSS Risk in CSV Export with Unescaped User Input
+
+**Title:** Goal titles not escaped in CSV export, potential XSS/formula injection
+
+**Description:**  
+The `ExportButton.tsx` CSV export includes goal titles directly without escaping. While CSV files are mostly safe from XSS, they can trigger formula injection attacks in Excel/Sheets if titles start with `=`, `+`, `-`, or `@`.
+
+**Location:** [src/components/ExportButton.tsx](src/components/ExportButton.tsx#L61-L75)
+
+**Code:**
+```typescript
+csv += `"${g.label}",${g.current},${g.target},${pct}%\n`;
+// If g.label = "=1+1", Excel will evaluate it as a formula
+```
+
+**Difficulty:** Intermediate
+
+**Why It Matters:**
+- Formula injection can be exploited for data exfiltration
+- Malicious goal titles could execute code in spreadsheet applications
+- Security best practice to sanitize all user input
+
+**Suggested Approach:**
+1. Add escape function for CSV values:
+   ```typescript
+   function escapeCSV(value: string): string {
+     if (value.match(/^[=+\-@]/)) {
+       return `'${value}`;  // Prepend apostrophe to prevent formula
+     }
+     return value.replace(/"/g, '""');  // Escape quotes
+   }
+   ```
+2. Use library like `csv-stringify` if available
+3. Add sanitization on the client side for all user-provided fields
+4. Document security consideration in code
+
+**Impact:** Low-Medium - requires specific exploit conditions
+
+---
+
+## 🔴 Issue #10: Incomplete Error Handling in Settings Page
+
+**Title:** Multiple setState calls without error state management on settings page
+
+**Description:**  
+The `settings/page.tsx` has multiple async operations (loading settings, loading accounts, saving) but error handling is incomplete. If a save fails, the error is logged but not propagated to the UI beyond `removeError`.
+
+**Location:** [src/app/dashboard/settings/page.tsx](src/app/dashboard/settings/page.tsx#L190-L230)
+
+**Code:**
+```typescript
+async function saveSettings() {
+  // ...
+  try {
+    // ... update logic
+  } catch (error) {
+    console.error("Error updating settings:", error);
+    setSettings(previousSettings);  // ✓ Rollback
+    // ❌ But no error toast/banner shown to user
+  }
+}
+```
+
+**Difficulty:** Intermediate
+
+**Why It Matters:**
+- Users don't know if their settings saved successfully
+- No feedback for network errors or validation failures
+- Could lead to data loss if user doesn't realize save failed
+- Poor UX - silent failures
+
+**Suggested Approach:**
+1. Add `settingError` state for error messages
+2. Show error toast/banner when save fails: `setSettingError("Failed to save settings")`
+3. Add success notification when save succeeds
+4. Add retry button in error message
+5. Add loading indicator during save
+6. Show which specific setting failed (if possible)
+
+**Impact:** Medium - affects UX and data loss risks
+
+---
+
+## 🔴 Issue #11: Race Condition in Dashboard Header Public Flag Check
+
+**Title:** `isPublic` state can become stale if session changes during fetch
+
+**Description:**  
+The `DashboardHeader` fetches `is_public` flag on mount, but if the session changes while the fetch is pending, the component might use stale data.
+
+**Location:** [src/components/DashboardHeader.tsx](src/components/DashboardHeader.tsx#L12-L35)
+
+**Code:**
+```typescript
+useEffect(() => {
+  if (!session) {
+    setIsPublic(null);
+    return;
+  }
+
+  async function loadSettings() {
+    try {
+      const res = await fetch("/api/user/settings");
+      // ❌ If session changes here, stale data still gets set
+      if (res.ok) {
+        const data = await res.json();
+        setIsPublic(data.is_public === true);
+      }
+    } catch (error) {
+      console.error("Failed to load settings:", error);
+      setIsPublic(false);  // ❌ Assumes false on error
+    }
+  }
+
+  loadSettings();
+}, [session]);
+```
+
+**Difficulty:** Intermediate
+
+**Why It Matters:**
+- Could show wrong "Share Profile" button state if user logs out
+- Component doesn't have cleanup for pending requests
+- Race condition that only manifests under specific timing
+
+**Suggested Approach:**
+1. Add `let isMounted = true` flag to prevent setState after unmount
+2. Add cleanup function: `return () => { isMounted = false; }`
+3. Check `if (!isMounted) return;` before setState
+4. Consider using `AbortController` for fetch cancellation
+5. Use React 18's `useOptimistic` hook if target version supports it
+
+**Impact:** Low-Medium - edge case race condition
+
+---
+
+## 🔴 Issue #12: Missing Loading State on PRBreakdownChart Pie Chart
+
+**Title:** No loading indicator while PR breakdown data is being fetched
+
+**Description:**  
+The `PRBreakdownChart` component has a loading state but doesn't show a loading skeleton for the pie chart itself. Users see a blank space while data loads.
+
+**Location:** [src/components/PRBreakdownChart.tsx](src/components/PRBreakdownChart.tsx#L32-L50)
+
+**Current State:**
+```typescript
+if (loading) {
+  return (
+    <div className="rounded-xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-sm">
+      {/* Shows title, but no skeleton for chart area */}
+      <h2>PR Breakdown</h2>
+      {/* ❌ Blank space where chart will be */}
+    </div>
+  );
+}
+```
+
+**Difficulty:** Intermediate
+
+**Why It Matters:**
+- Poor UX - users don't know data is loading
+- Looks like a broken component
+- Inconsistent with other components that show loading skeletons
+- Better perceived performance with placeholders
+
+**Suggested Approach:**
+1. Create loading skeleton that mimics pie chart layout
+2. Show placeholder circles/bars while loading
+3. Use `animate-pulse` Tailwind class for shimmer effect
+4. Add `aria-busy="true"` and `role="status"` for accessibility
+5. Match the dimensions of the actual chart for smooth transition
+
+**Impact:** Low-Medium - affects UX and perceived performance
+
+---
+
+## 🔴 Issue #13: No Debouncing on Friend Comparison Input
+
+**Title:** FriendComparison component makes API call for every character typed
+
+**Description:**  
+When users type a friend's username to compare, the component likely makes an API request for each keystroke instead of debouncing the input. This causes excessive API calls.
+
+**Location:** [src/components/FriendComparison.tsx](src/components/FriendComparison.tsx) - likely in onChange handler
+
+**Expected Issue Pattern:**
+```typescript
+// Bad: API call on every keystroke
+const [friendUsername, setFriendUsername] = useState("");
+
+const handleInputChange = (e: string) => {
+  setFriendUsername(e);
+  // ❌ Likely calls API immediately or in useEffect
+  fetchFriendData(e);  // 100 requests per 5-letter name!
+};
+```
+
+**Difficulty:** Intermediate
+
+**Why It Matters:**
+- Wastes API quota and server resources
+- Increases latency due to rate limiting
+- Poor user experience with flickering results
+- Increases costs if API calls are metered
+
+**Suggested Approach:**
+1. Add debounce hook: `useDebounce(friendUsername, 500)`
+2. Only fetch when debounced value changes
+3. Use `useMemo` or custom debounce hook from library
+4. Show "searching..." state while debounce timer is active
+5. Clear previous results if user clears input
+
+**Impact:** Medium - affects performance and costs
+
+---
+
+## 🔴 Issue #14: No Validation of Recurrence Value in Goal Creation
+
+**Title:** Recurrence dropdown doesn't prevent invalid values from being sent
+
+**Description:**  
+The `recurrence` field should only allow "none", "weekly", or "monthly", but if the component state is somehow set to an invalid value, the POST request doesn't validate on the client before sending.
+
+**Location:** [src/components/GoalTracker.tsx](src/components/GoalTracker.tsx#L320-L335)
+
+**Difficulty:** Intermediate
+
+**Why It Matters:**
+- Defense in depth - server validation is good but client validation is better UX
+- Users see validation errors immediately instead of waiting for server response
+- Prevents malicious requests if someone tampers with component state
+- Better error messaging experience
+
+**Suggested Approach:**
+1. Create constant for valid recurrence values: `const VALID_RECURRENCES = ["none", "weekly", "monthly"]`
+2. Validate before POST: `if (!VALID_RECURRENCES.includes(recurrence)) { setError(...); return; }`
+3. Use `<select>` dropdown instead of free-form input if not already
+4. Add TypeScript type: `type Recurrence = "none" | "weekly" | "monthly"`
+5. Use Zod/Yup schema for form validation
+
+**Impact:** Low-Medium - mostly defensive programming
+
+---
+
+## 🔴 Issue #15: Unclear Error Messages in Goal Creation
+
+**Title:** Generic error messages don't help users understand what went wrong
+
+**Description:**  
+When goal creation fails, the error message is simply "Failed to create goal. Please try again." This doesn't indicate if it's:
+- Network error
+- Validation error (title too long, invalid target)
+- Server error
+- Database error
+- Quota exceeded
+
+**Location:** [src/components/GoalTracker.tsx](src/components/GoalTracker.tsx#L70-L76)
+
+**Code:**
+```typescript
+.catch({
+  setCreateError("Failed to create goal. Please try again.");
+  // ❌ Too generic - users don't know what went wrong
+})
+```
+
+**Difficulty:** Intermediate
+
+**Why It Matters:**
+- Users can't take corrective action
+- Frustrating UX
+- Debugging is harder for support
+- Reduces trust in the app
+
+**Suggested Approach:**
+1. Parse error response to provide specific messages:
+   ```typescript
+   if (!response.ok) {
+     const error = await response.json();
+     if (response.status === 400) {
+       setCreateError(error.details || "Invalid goal data");
+     } else if (response.status === 413) {
+       setCreateError("Goal title is too long");
+     } else {
+       setCreateError("Failed to save goal. Please try again.");
+     }
+   }
+   ```
+2. Show error details: "Title too long (max 100 chars)"
+3. Add help text: "Ensure target is 1-10,000"
+4. Log full error for debugging
+5. Add error code reference for users to share with support
+
+**Impact:** Low-Medium - affects UX and supportability
+
+---
+
+## Summary Table
+
+| # | Issue | File(s) | Severity | Category |
+|---|-------|---------|----------|----------|
+| 1 | Missing Goal Input Validation | GoalTracker.tsx | Medium | Validation |
+| 2 | No Error Boundary on Dashboard | dashboard/page.tsx | High | Error Handling |
+| 3 | Empty Catch Blocks | Multiple | Medium | Error Handling |
+| 4 | Goal Reset Race Condition | api/goals/route.ts | Medium | Data Consistency |
+| 5 | Missing Null Safety in Graph | ContributionGraph.tsx | Medium | Type Safety |
+| 6 | Missing Form Labels | GoalTracker.tsx | Medium | Accessibility |
+| 7 | Memory Leak in Heatmap | ContributionHeatmap.tsx | Low-Medium | Performance |
+| 8 | No Target Validation | GoalTracker.tsx | Medium | Validation |
+| 9 | CSV Formula Injection | ExportButton.tsx | Low-Medium | Security |
+| 10 | Incomplete Settings Error Handling | settings/page.tsx | Medium | UX |
+| 11 | Header Public Flag Race Condition | DashboardHeader.tsx | Low-Medium | Race Condition |
+| 12 | Missing Loading State | PRBreakdownChart.tsx | Low-Medium | UX |
+| 13 | No Input Debouncing | FriendComparison.tsx | Medium | Performance |
+| 14 | No Recurrence Validation | GoalTracker.tsx | Low-Medium | Validation |
+| 15 | Generic Error Messages | GoalTracker.tsx | Low-Medium | UX |
+
+---
+
+## Recommendations for Prioritization
+
+**High Priority (Implement First):**
+- Issue #2: Error Boundary (prevents dashboard crashes)
+- Issue #1: Goal Input Validation (affects data quality)
+- Issue #3: Error Handling (affects debugging)
+
+**Medium Priority (Next Sprint):**
+- Issue #4: Race Condition (affects data consistency)
+- Issue #6: Accessibility (WCAG compliance)
+- Issue #10: Settings Error Handling (UX)
+
+**Low Priority (Polish):**
+- Issue #7: Memory Leak (edge case)
+- Issue #9: CSV Injection (specific use case)
+- Issue #15: Error Messages (UX improvement)
+
+---
+
+## Notes for Contributors
+
+These issues are NOT tracked in GitHub issues to allow contributors to discover and work on them. They range from beginner-friendly (adding validation) to intermediate (fixing race conditions).
+
+When fixing these issues:
+1. Create a PR with a clear title referencing this document
+2. Add tests where applicable
+3. Update any related documentation
+4. Consider edge cases mentioned in each issue description
diff --git a/package-lock.json b/package-lock.json
index e887dbb2..ce0b55ff 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,7 +22,7 @@
         "recharts": "^2.12.7"
       },
       "devDependencies": {
-        "@playwright/test": "^1.49.1",
+        "@playwright/test": "1.49.1",
         "@types/node": "^20",
         "@types/react": "^18",
         "@types/react-dom": "^18",
@@ -31,8 +31,7 @@
         "eslint-config-next": "14.2.3",
         "postcss": "^8.4.38",
         "tailwindcss": "^3.4.1",
-        "typescript": "^5",
-        "@playwright/test": "1.49.1"
+        "typescript": "^5"
       }
     },
     "node_modules/@alloc/quick-lru": {
@@ -524,7 +523,6 @@
       "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.49.1.tgz",
       "integrity": "sha512-Ky+BVzPz8pL6PQxHqNRW1k3mIyv933LML7HktS8uik0bUXNCdPhoS/kLihiO1tMf/egaJb4IutXd7UywvXEW+g==",
       "devOptional": true,
-      "license": "Apache-2.0",
       "dependencies": {
         "playwright": "1.49.1"
       },
@@ -766,7 +764,6 @@
       "integrity": "sha512-z9VXpC7MWrhfWipitjNdgCauoMLRdIILQsAEV+ZesIzBq/oUlxk0m3ApZuMFCXdnS4U7KrI+l3WRUEGQ8K1QKw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/prop-types": "*",
         "csstype": "^3.2.2"
@@ -1214,7 +1211,6 @@
       "integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -1667,7 +1663,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.10.12",
         "caniuse-lite": "^1.0.30001782",
@@ -2537,7 +2532,6 @@
       "deprecated": "This version is no longer supported. Please see https://eslint.org/version-support for other options.",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.6.1",
@@ -2706,7 +2700,6 @@
       "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@rtsao/scc": "^1.1.0",
         "array-includes": "^3.1.9",
@@ -4152,7 +4145,6 @@
       "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "jiti": "bin/jiti.js"
       }
@@ -4224,7 +4216,6 @@
       "resolved": "https://registry.npmjs.org/jspdf/-/jspdf-4.2.1.tgz",
       "integrity": "sha512-YyAXyvnmjTbR4bHQRLzex3CuINCDlQnBqoSYyjJwTP2x9jDLuKDzy7aKUl0hgx3uhcl7xzg32agn5vlie6HIlQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.28.6",
         "fast-png": "^6.2.0",
@@ -5042,7 +5033,6 @@
       "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.49.1.tgz",
       "integrity": "sha512-VYL8zLoNTBxVOrJBbDuRgDWa3i+mfQgDTrL8Ah9QXZ7ax4Dsj0MSq5bYgytRnDVVe+njoKnfsYkH3HzqVj5UZA==",
       "devOptional": true,
-      "license": "Apache-2.0",
       "dependencies": {
         "playwright-core": "1.49.1"
       },
@@ -5061,7 +5051,6 @@
       "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.49.1.tgz",
       "integrity": "sha512-BzmpVcs4kE2CH15rWfzpjzVGhWERJfmnXmniSyKeRZUs9Ws65m+RGIi7mjJK/euCegfn3i7jvqWeWyHe9y3Vgg==",
       "devOptional": true,
-      "license": "Apache-2.0",
       "bin": {
         "playwright-core": "cli.js"
       },
@@ -5073,7 +5062,6 @@
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
       "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
-      "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
       "optional": true,
@@ -5114,7 +5102,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
@@ -5285,7 +5272,6 @@
       "resolved": "https://registry.npmjs.org/preact/-/preact-10.29.1.tgz",
       "integrity": "sha512-gQCLc/vWroE8lIpleXtdJhTFDogTdZG9AjMUpVkDf2iTCNwYNWA+u16dL41TqUDJO4gm2IgrcMv3uTpjd4Pwmg==",
       "license": "MIT",
-      "peer": true,
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/preact"
@@ -5376,7 +5362,6 @@
       "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
       "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0"
       },
@@ -5389,7 +5374,6 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
       "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0",
         "scheduler": "^0.23.2"
@@ -6443,7 +6427,6 @@
       "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -6613,7 +6596,6 @@
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -7020,51 +7002,6 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
-    },
-    "node_modules/@playwright/test": {
-      "version": "1.49.1",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.49.1.tgz",
-      "integrity": "sha512-Ky+BVzPz8pL6PQxHqNRW1k3mIyv933LML7HktS8uik0bUXNCdPhoS/kLihiO1tMf/egaJb4IutXd7UywvXEW+g==",
-      "dev": true,
-      "dependencies": {
-        "playwright": "1.49.1"
-      },
-      "bin": {
-        "playwright": "cli.js"
-      },
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/playwright": {
-      "version": "1.49.1",
-      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.49.1.tgz",
-      "integrity": "sha512-VYL8zLoNTBxVOrJBbDuRgDWa3i+mfQgDTrL8Ah9QXZ7ax4Dsj0MSq5bYgytRnDVVe+njoKnfsYkH3HzqVj5UZA==",
-      "dev": true,
-      "dependencies": {
-        "playwright-core": "1.49.1"
-      },
-      "bin": {
-        "playwright": "cli.js"
-      },
-      "engines": {
-        "node": ">=18"
-      },
-      "optionalDependencies": {
-        "fsevents": "2.3.2"
-      }
-    },
-    "node_modules/playwright-core": {
-      "version": "1.49.1",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.49.1.tgz",
-      "integrity": "sha512-BzmpVcs4kE2CH15rWfzpjzVGhWERJfmnXmniSyKeRZUs9Ws65m+RGIi7mjJK/euCegfn3i7jvqWeWyHe9y3Vgg==",
-      "dev": true,
-      "bin": {
-        "playwright-core": "cli.js"
-      },
-      "engines": {
-        "node": ">=18"
-      }
     }
   }
 }
diff --git a/src/app/api/badge/commits/route.ts b/src/app/api/badge/commits/route.ts
index 7c9b3538..88e805c2 100644
--- a/src/app/api/badge/commits/route.ts
+++ b/src/app/api/badge/commits/route.ts
@@ -1,5 +1,6 @@
 import { NextRequest, NextResponse } from "next/server";
 import { generateBadgeSVG } from "../badge-utils";
+import { logError } from "@/lib/error-handler";
 
 export const dynamic = "force-dynamic";
 
@@ -96,7 +97,13 @@ export async function GET(req: NextRequest) {
       },
     });
   } catch (error) {
-    console.error("Error generating commits badge:", error);
+    logError(error, {
+      endpoint: "/api/badge/commits",
+      operation: "generate_badge",
+      additionalContext: {
+        username: req.nextUrl.searchParams.get("user"),
+      },
+    });
 
     // Return error badge
     const svg = generateBadgeSVG({
diff --git a/src/app/api/badge/streak-shield/route.ts b/src/app/api/badge/streak-shield/route.ts
index e89a07d7..2e4d0e3d 100644
--- a/src/app/api/badge/streak-shield/route.ts
+++ b/src/app/api/badge/streak-shield/route.ts
@@ -1,5 +1,6 @@
 import { NextRequest, NextResponse } from "next/server";
 import { generateBadgeSVG } from "../badge-utils";
+import { logError } from "@/lib/error-handler";
 
 export const dynamic = "force-dynamic";
 
@@ -167,7 +168,13 @@ export async function GET(req: NextRequest) {
       },
     });
   } catch (error) {
-    console.error("Error generating streak badge:", error);
+    logError(error, {
+      endpoint: "/api/badge/streak-shield",
+      operation: "generate_badge",
+      additionalContext: {
+        username: req.nextUrl.searchParams.get("user"),
+      },
+    });
 
     // Return error badge
     const svg = generateBadgeSVG({
diff --git a/src/app/api/webhooks/github/route.ts b/src/app/api/webhooks/github/route.ts
index d63ffa7e..165bec03 100644
--- a/src/app/api/webhooks/github/route.ts
+++ b/src/app/api/webhooks/github/route.ts
@@ -2,6 +2,7 @@ import { createHmac, timingSafeEqual } from "crypto";
 import { revalidatePath } from "next/cache";
 import { NextRequest, NextResponse } from "next/server";
 import { supabaseAdmin } from "@/lib/supabase";
+import { logError } from "@/lib/error-handler";
 
 export const dynamic = "force-dynamic";
 
@@ -138,7 +139,15 @@ export async function POST(req: NextRequest) {
   try {
     staleResult = await markUserMetricsStale(githubLogin);
   } catch (error) {
-    console.error("Failed to mark GitHub metrics stale:", error);
+    logError(error, {
+      endpoint: "/api/webhooks/github",
+      operation: "mark_metrics_stale",
+      userId: githubLogin,
+      additionalContext: {
+        repository: payload.repository?.full_name,
+        commitCount: payload.commits?.length,
+      },
+    });
     return NextResponse.json(
       { error: "Failed to trigger metric refresh" },
       { status: 500 }
diff --git a/src/lib/error-handler.ts b/src/lib/error-handler.ts
new file mode 100644
index 00000000..96a56db6
--- /dev/null
+++ b/src/lib/error-handler.ts
@@ -0,0 +1,92 @@
+/**
+ * Centralized error handling and logging utility for API routes
+ * Provides consistent error logging with context and error responses
+ */
+
+interface ErrorLogContext {
+  endpoint: string;
+  operation: string;
+  userId?: string;
+  additionalContext?: Record<string, unknown>;
+}
+
+/**
+ * Log an error with context information
+ * @param error - The error object or message
+ * @param context - Context about where/why the error occurred
+ */
+export function logError(error: unknown, context: ErrorLogContext): void {
+  const errorMessage =
+    error instanceof Error ? error.message : String(error);
+  const errorStack = error instanceof Error ? error.stack : undefined;
+
+  const logEntry = {
+    timestamp: new Date().toISOString(),
+    endpoint: context.endpoint,
+    operation: context.operation,
+    userId: context.userId,
+    error: errorMessage,
+    stack: errorStack,
+    ...context.additionalContext,
+  };
+
+  // Log to console in development
+  if (process.env.NODE_ENV === "development") {
+    console.error(
+      `[${logEntry.timestamp}] ${logEntry.endpoint} - ${logEntry.operation}:`,
+      logEntry
+    );
+  } else {
+    // In production, you can send to external logging service (e.g., Sentry, LogRocket)
+    console.error(JSON.stringify(logEntry));
+  }
+}
+
+interface ErrorResponse {
+  error: string;
+  timestamp: string;
+  requestId?: string;
+}
+
+/**
+ * Create a standardized error response
+ * @param message - User-friendly error message
+ * @param requestId - Optional request ID for tracking
+ * @returns Standardized error response object
+ */
+export function createErrorResponse(
+  message: string,
+  requestId?: string
+): ErrorResponse {
+  return {
+    error: message,
+    timestamp: new Date().toISOString(),
+    ...(requestId && { requestId }),
+  };
+}
+
+/**
+ * Handle API errors with logging and response
+ * @param error - The error object
+ * @param context - Context about the error
+ * @param statusCode - HTTP status code to return
+ * @returns Response object ready to return from API route
+ */
+export function handleAPIError(
+  error: unknown,
+  context: ErrorLogContext,
+  statusCode: number = 500
+): Response {
+  logError(error, context);
+
+  const userMessage =
+    statusCode === 400
+      ? "Invalid request"
+      : statusCode === 401
+        ? "Unauthorized"
+        : statusCode === 404
+          ? "Not found"
+          : "An error occurred processing your request";
+
+  return Response.json(createErrorResponse(userMessage), { status: statusCode });
+}