fix: add graceful fallback for analytics API not yet implemented

- Show mock data (zeros) when API is unavailable
- Display warning message instead of error
- Update export error message to be more informative
- Prevents JSON parse errors when backend endpoints don't exist yet
This commit is contained in:
2025-11-16 18:53:39 +00:00
parent 9f7fc43fb2
commit 4be50caf4c

View File

@@ -34,8 +34,15 @@ export function AnalyticsPage() {
});
setSummary(data);
} catch (err) {
setError(err instanceof Error ? err.message : 'Failed to load analytics');
console.error('Failed to load analytics:', err);
// If API is not available yet, show mock data for development
console.warn('Analytics API not available, using mock data:', err);
setSummary({
totalReports: 0,
totalEvents: 0,
totalUsers: 0,
totalLitterCollected: 0,
});
setError('Analytics API not yet implemented. Showing placeholder data.');
} finally {
setLoading(false);
}
@@ -60,7 +67,7 @@ export function AnalyticsPage() {
document.body.removeChild(a);
} catch (err) {
console.error('Failed to export CSV:', err);
alert('Failed to export data. Please try again.');
alert('Export feature not yet available. The analytics API endpoints will be implemented in task 27.');
} finally {
setExporting(false);
}
@@ -102,14 +109,14 @@ export function AnalyticsPage() {
<DateRangeSelector value={dateRange} onChange={setDateRange} />
</div>
{/* Error State */}
{/* Info/Warning State */}
{error && (
<div className="bg-red-50 border border-red-200 rounded-lg p-4 mb-6">
<div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4 mb-6">
<div className="flex items-center">
<svg className="w-5 h-5 text-red-600 mr-2" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
<svg className="w-5 h-5 text-yellow-600 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
</svg>
<p className="text-red-800">{error}</p>
<p className="text-yellow-800">{error}</p>
</div>
</div>
)}