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/compare/page.tsx

@@ -29,29 +29,43 @@ export default async function ComparePage({ searchParams }: ComparePageProps) {
   const urns = urnsParam?.split(',').map(Number).filter(Boolean) || [];
   const selectedMetric = metricParam || 'rwm_expected_pct';
 
-  // Fetch comparison data if URNs provided
-  let comparisonData = null;
-  if (urns.length > 0) {
-    try {
-      const response = await fetchComparison(urnsParam!);
-      comparisonData = response.comparison;
-    } catch (error) {
-      console.error('Failed to fetch comparison:', error);
+  try {
+    // Fetch comparison data if URNs provided
+    let comparisonData = null;
+    if (urns.length > 0) {
+      try {
+        const response = await fetchComparison(urnsParam!);
+        comparisonData = response.comparison;
+      } catch (error) {
+        console.error('Failed to fetch comparison:', error);
+      }
     }
+
+    // Fetch available metrics
+    const metricsResponse = await fetchMetrics();
+
+    // Convert metrics object to array
+    const metricsArray = Object.values(metricsResponse?.metrics || {});
+
+    return (
+      <ComparisonView
+        initialData={comparisonData}
+        initialUrns={urns}
+        metrics={metricsArray}
+        selectedMetric={selectedMetric}
+      />
+    );
+  } catch (error) {
+    console.error('Error fetching data for compare page:', error);
+
+    // Return error state with empty metrics
+    return (
+      <ComparisonView
+        initialData={null}
+        initialUrns={urns}
+        metrics={[]}
+        selectedMetric={selectedMetric}
+      />
+    );
   }
-
-  // Fetch available metrics
-  const metricsResponse = await fetchMetrics();
-
-  // Convert metrics object to array
-  const metricsArray = Object.values(metricsResponse.metrics);
-
-  return (
-    <ComparisonView
-      initialData={comparisonData}
-      initialUrns={urns}
-      metrics={metricsArray}
-      selectedMetric={selectedMetric}
-    />
-  );
 }

nextjs-app/app/page.tsx

@@ -30,24 +30,36 @@ export default async function HomePage({ searchParams }: HomePageProps) {
   const page = parseInt(searchParams.page || '1');
   const radius = searchParams.radius ? parseInt(searchParams.radius) : undefined;
 
-  // Fetch data on server
-  const [schoolsData, filtersData] = await Promise.all([
-    fetchSchools({
-      search: searchParams.search,
-      local_authority: searchParams.local_authority,
-      school_type: searchParams.school_type,
-      postcode: searchParams.postcode,
-      radius,
-      page,
-      page_size: 50,
-    }),
-    fetchFilters(),
-  ]);
+  // Fetch data on server with error handling
+  try {
+    const [schoolsData, filtersData] = await Promise.all([
+      fetchSchools({
+        search: searchParams.search,
+        local_authority: searchParams.local_authority,
+        school_type: searchParams.school_type,
+        postcode: searchParams.postcode,
+        radius,
+        page,
+        page_size: 50,
+      }),
+      fetchFilters(),
+    ]);
 
-  return (
-    <HomeView
-      initialSchools={schoolsData}
-      filters={filtersData.filters}
-    />
-  );
+    return (
+      <HomeView
+        initialSchools={schoolsData}
+        filters={filtersData?.filters || { local_authorities: [], school_types: [], years: [] }}
+      />
+    );
+  } catch (error) {
+    console.error('Error fetching data for home page:', error);
+
+    // Return error state with empty data
+    return (
+      <HomeView
+        initialSchools={{ schools: [], pagination: { page: 1, page_size: 50, total: 0, pages: 0 } }}
+        filters={{ local_authorities: [], school_types: [], years: [] }}
+      />
+    );
+  }
 }

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}
+      />
+    );
+  }
 }