diff --git a/ui/web/src/components/shared/error-boundary.tsx b/ui/web/src/components/shared/error-boundary.tsx
new file mode 100644
index 00000000..7b6b7946
--- /dev/null
+++ b/ui/web/src/components/shared/error-boundary.tsx
@@ -0,0 +1,45 @@
+import { Component, type ErrorInfo, type ReactNode } from "react";
+import { AlertTriangle, RefreshCw } from "lucide-react";
+import { Button } from "@/components/ui/button";
+
+interface Props {
+  children: ReactNode;
+  fallback?: ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+}
+
+export class ErrorBoundary extends Component<Props, State> {
+  state: State = { hasError: false };
+
+  static getDerivedStateFromError(): State {
+    return { hasError: true };
+  }
+
+  componentDidCatch(error: Error, info: ErrorInfo) {
+    console.error("[ErrorBoundary]", error, info.componentStack);
+  }
+
+  private handleRetry = () => {
+    this.setState({ hasError: false });
+  };
+
+  render() {
+    if (!this.state.hasError) return this.props.children;
+
+    if (this.props.fallback) return this.props.fallback;
+
+    return (
+      <div className="flex flex-col items-center justify-center gap-3 rounded-lg border bg-card p-8 text-center">
+        <AlertTriangle className="h-8 w-8 text-muted-foreground" />
+        <p className="text-sm text-muted-foreground">Something went wrong rendering this section.</p>
+        <Button variant="outline" size="sm" className="gap-1.5" onClick={this.handleRetry}>
+          <RefreshCw className="h-3.5 w-3.5" />
+          Retry
+        </Button>
+      </div>
+    );
+  }
+}
diff --git a/ui/web/src/pages/usage/components/token-area-chart.tsx b/ui/web/src/pages/usage/components/token-area-chart.tsx
index 446fdc8d..3483df2d 100644
--- a/ui/web/src/pages/usage/components/token-area-chart.tsx
+++ b/ui/web/src/pages/usage/components/token-area-chart.tsx
@@ -38,7 +38,7 @@ export function TokenAreaChart({ data, loading, granularity }: TokenAreaChartPro
       emptyText={t("analytics.noData")}
     >
       <ResponsiveContainer width="100%" height={300}>
-        <AreaChart data={chartData} margin={{ top: 4, right: 16, left: 0, bottom: 0 }}>
+        <AreaChart key={chartData.length} data={chartData} margin={{ top: 4, right: 16, left: 0, bottom: 0 }}>
           <defs>
             <linearGradient id="inputGrad" x1="0" y1="0" x2="0" y2="1">
               <stop offset="5%" stopColor="#3b82f6" stopOpacity={0.3} />
diff --git a/ui/web/src/pages/usage/usage-page.tsx b/ui/web/src/pages/usage/usage-page.tsx
index 6105da5a..079ca890 100644
--- a/ui/web/src/pages/usage/usage-page.tsx
+++ b/ui/web/src/pages/usage/usage-page.tsx
@@ -6,6 +6,7 @@ import { Badge } from "@/components/ui/badge";
 import { PageHeader } from "@/components/shared/page-header";
 import { EmptyState } from "@/components/shared/empty-state";
 import { Pagination } from "@/components/shared/pagination";
+import { ErrorBoundary } from "@/components/shared/error-boundary";
 import { formatTokens, formatCost } from "@/lib/format";
 import { useAgents } from "@/pages/agents/hooks/use-agents";
 import { useUsage } from "./hooks/use-usage";
@@ -173,7 +174,9 @@ function AnalyticsDashboard() {
 export function UsagePage() {
   return (
     <UsageFilterProvider>
-      <AnalyticsDashboard />
+      <ErrorBoundary>
+        <AnalyticsDashboard />
+      </ErrorBoundary>
     </UsageFilterProvider>
   );
 }