Add error handling and fallbacks for API failures

- Add try-catch blocks to all page components
- Provide empty data fallbacks when API calls fail
- Use optional chaining for safer property access
- Log errors for debugging

Fixes 'Cannot read properties of undefined' errors.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

nextjs-app/app/rankings/page.tsx

@@ -30,29 +30,45 @@ export default async function RankingsPage({ searchParams }: RankingsPageProps)
   const metric = metricParam || 'rwm_expected_pct';
   const year = yearParam ? parseInt(yearParam) : undefined;
 
-  // Fetch rankings data
-  const [rankingsResponse, filtersResponse, metricsResponse] = await Promise.all([
-    fetchRankings({
-      metric,
-      local_authority,
-      year,
-      limit: 100,
-    }),
-    fetchFilters(),
-    fetchMetrics(),
-  ]);
+  // Fetch rankings data with error handling
+  try {
+    const [rankingsResponse, filtersResponse, metricsResponse] = await Promise.all([
+      fetchRankings({
+        metric,
+        local_authority,
+        year,
+        limit: 100,
+      }),
+      fetchFilters(),
+      fetchMetrics(),
+    ]);
 
-  // Convert metrics object to array
-  const metricsArray = Object.values(metricsResponse.metrics);
+    // Convert metrics object to array
+    const metricsArray = Object.values(metricsResponse?.metrics || {});
 
-  return (
-    <RankingsView
-      rankings={rankingsResponse.rankings}
-      filters={filtersResponse.filters}
-      metrics={metricsArray}
-      selectedMetric={metric}
-      selectedArea={local_authority}
-      selectedYear={year}
-    />
-  );
+    return (
+      <RankingsView
+        rankings={rankingsResponse?.rankings || []}
+        filters={filtersResponse?.filters || { local_authorities: [], school_types: [], years: [] }}
+        metrics={metricsArray}
+        selectedMetric={metric}
+        selectedArea={local_authority}
+        selectedYear={year}
+      />
+    );
+  } catch (error) {
+    console.error('Error fetching data for rankings page:', error);
+
+    // Return error state with empty data
+    return (
+      <RankingsView
+        rankings={[]}
+        filters={{ local_authorities: [], school_types: [], years: [] }}
+        metrics={[]}
+        selectedMetric={metric}
+        selectedArea={local_authority}
+        selectedYear={year}
+      />
+    );
+  }
 }