From f053a3a53b8aa073d95fe3707ae6d995af95ac79 Mon Sep 17 00:00:00 2001
From: Joey Eamigh <55670930+JoeyEamigh@users.noreply.github.com>
Date: Wed, 11 Feb 2026 05:45:26 -0500
Subject: [PATCH] final QA: add error boundaries, run backfill

Add error.tsx files for all route segments (/, /map, /trends,
/demand, /generation) with retry buttons. Backfill script ran
successfully: ~30K electricity demand records, ~253K generation
mix records, and 233 commodity price records across all 7 regions.
---
 src/app/demand/error.tsx     | 30 ++++++++++++++++++++++++++++++
 src/app/error.tsx            | 30 ++++++++++++++++++++++++++++++
 src/app/generation/error.tsx | 30 ++++++++++++++++++++++++++++++
 src/app/map/error.tsx        | 30 ++++++++++++++++++++++++++++++
 src/app/trends/error.tsx     | 30 ++++++++++++++++++++++++++++++
 5 files changed, 150 insertions(+)
 create mode 100644 src/app/demand/error.tsx
 create mode 100644 src/app/error.tsx
 create mode 100644 src/app/generation/error.tsx
 create mode 100644 src/app/map/error.tsx
 create mode 100644 src/app/trends/error.tsx

diff --git a/src/app/demand/error.tsx b/src/app/demand/error.tsx
new file mode 100644
index 0000000..6163727
--- /dev/null
+++ b/src/app/demand/error.tsx
@@ -0,0 +1,30 @@
+'use client';
+
+import { Button } from '@/components/ui/button.js';
+import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@/components/ui/card.js';
+import { AlertCircle } from 'lucide-react';
+
+export default function DemandError({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
+  return (
+    <div className="flex items-center justify-center px-6 py-16">
+      <Card className="max-w-md">
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2 text-destructive">
+            <AlertCircle className="h-5 w-5" />
+            Demand data failed to load
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <p className="text-sm text-muted-foreground">
+            {error.message || 'An unexpected error occurred while loading demand analysis.'}
+          </p>
+        </CardContent>
+        <CardFooter>
+          <Button variant="outline" onClick={reset}>
+            Try again
+          </Button>
+        </CardFooter>
+      </Card>
+    </div>
+  );
+}
diff --git a/src/app/error.tsx b/src/app/error.tsx
new file mode 100644
index 0000000..6eb1a90
--- /dev/null
+++ b/src/app/error.tsx
@@ -0,0 +1,30 @@
+'use client';
+
+import { Button } from '@/components/ui/button.js';
+import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@/components/ui/card.js';
+import { AlertCircle } from 'lucide-react';
+
+export default function DashboardError({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
+  return (
+    <div className="flex items-center justify-center px-6 py-16">
+      <Card className="max-w-md">
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2 text-destructive">
+            <AlertCircle className="h-5 w-5" />
+            Something went wrong
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <p className="text-sm text-muted-foreground">
+            {error.message || 'An unexpected error occurred while loading the dashboard.'}
+          </p>
+        </CardContent>
+        <CardFooter>
+          <Button variant="outline" onClick={reset}>
+            Try again
+          </Button>
+        </CardFooter>
+      </Card>
+    </div>
+  );
+}
diff --git a/src/app/generation/error.tsx b/src/app/generation/error.tsx
new file mode 100644
index 0000000..b197b0b
--- /dev/null
+++ b/src/app/generation/error.tsx
@@ -0,0 +1,30 @@
+'use client';
+
+import { Button } from '@/components/ui/button.js';
+import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@/components/ui/card.js';
+import { AlertCircle } from 'lucide-react';
+
+export default function GenerationError({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
+  return (
+    <div className="flex items-center justify-center px-6 py-16">
+      <Card className="max-w-md">
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2 text-destructive">
+            <AlertCircle className="h-5 w-5" />
+            Generation data failed to load
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <p className="text-sm text-muted-foreground">
+            {error.message || 'An unexpected error occurred while loading generation mix data.'}
+          </p>
+        </CardContent>
+        <CardFooter>
+          <Button variant="outline" onClick={reset}>
+            Try again
+          </Button>
+        </CardFooter>
+      </Card>
+    </div>
+  );
+}
diff --git a/src/app/map/error.tsx b/src/app/map/error.tsx
new file mode 100644
index 0000000..c008a2c
--- /dev/null
+++ b/src/app/map/error.tsx
@@ -0,0 +1,30 @@
+'use client';
+
+import { Button } from '@/components/ui/button.js';
+import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@/components/ui/card.js';
+import { AlertCircle } from 'lucide-react';
+
+export default function MapError({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
+  return (
+    <div className="flex items-center justify-center px-6 py-16">
+      <Card className="max-w-md">
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2 text-destructive">
+            <AlertCircle className="h-5 w-5" />
+            Map failed to load
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <p className="text-sm text-muted-foreground">
+            {error.message || 'An unexpected error occurred while loading the map.'}
+          </p>
+        </CardContent>
+        <CardFooter>
+          <Button variant="outline" onClick={reset}>
+            Try again
+          </Button>
+        </CardFooter>
+      </Card>
+    </div>
+  );
+}
diff --git a/src/app/trends/error.tsx b/src/app/trends/error.tsx
new file mode 100644
index 0000000..ca3b4f2
--- /dev/null
+++ b/src/app/trends/error.tsx
@@ -0,0 +1,30 @@
+'use client';
+
+import { Button } from '@/components/ui/button.js';
+import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@/components/ui/card.js';
+import { AlertCircle } from 'lucide-react';
+
+export default function TrendsError({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
+  return (
+    <div className="flex items-center justify-center px-6 py-16">
+      <Card className="max-w-md">
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2 text-destructive">
+            <AlertCircle className="h-5 w-5" />
+            Trends failed to load
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <p className="text-sm text-muted-foreground">
+            {error.message || 'An unexpected error occurred while loading price trends.'}
+          </p>
+        </CardContent>
+        <CardFooter>
+          <Button variant="outline" onClick={reset}>
+            Try again
+          </Button>
+        </CardFooter>
+      </Card>
+    </div>
+  );
+}