first commit

ui/app/workspace/dashboard/components/charts/chartErrorBoundary.tsx

@@ -0,0 +1,60 @@
+import { Component, type ErrorInfo, type ReactNode } from "react";
+import { BarChart, CartesianGrid, ResponsiveContainer, XAxis, YAxis } from "recharts";
+
+// Empty chart placeholder when data fails to render
+function EmptyChart() {
+	return (
+		<ResponsiveContainer width="100%" height="100%">
+			<BarChart
+				data={[
+					{ name: "", value: 0 },
+					{ name: " ", value: 0 },
+				]}
+			>
+				<CartesianGrid strokeDasharray="3 3" vertical={false} className="stroke-zinc-200 dark:stroke-zinc-700" />
+				<XAxis dataKey="name" tick={{ fontSize: 13, className: "fill-zinc-500", dy: 5 }} tickLine={false} axisLine={false} />
+				<YAxis tick={{ fontSize: 13, className: "fill-zinc-500" }} tickLine={false} axisLine={false} width={40} domain={[0, 1]} />
+			</BarChart>
+		</ResponsiveContainer>
+	);
+}
+
+interface ChartErrorBoundaryProps {
+	children: ReactNode;
+	resetKey?: string;
+}
+
+interface ChartErrorBoundaryState {
+	hasError: boolean;
+	prevResetKey?: string;
+}
+
+export class ChartErrorBoundary extends Component<ChartErrorBoundaryProps, ChartErrorBoundaryState> {
+	constructor(props: ChartErrorBoundaryProps) {
+		super(props);
+		this.state = { hasError: false };
+	}
+
+	static getDerivedStateFromError(_: Error) {
+		return { hasError: true };
+	}
+
+	static getDerivedStateFromProps(props: ChartErrorBoundaryProps, state: ChartErrorBoundaryState) {
+		// Reset error state when resetKey changes
+		if (props.resetKey !== state.prevResetKey) {
+			return { hasError: false, prevResetKey: props.resetKey };
+		}
+		return null;
+	}
+
+	componentDidCatch(error: Error, _errorInfo: ErrorInfo) {
+		console.warn("Chart rendering error:", error.message);
+	}
+
+	render() {
+		if (this.state.hasError) {
+			return <EmptyChart />;
+		}
+		return this.props.children;
+	}
+}