fix: Admin Insights actual crash — function props across server/client boundary (v0.55.3)
Server logs (thanks to the user pulling them) showed the real error:
"Functions cannot be passed directly to Client Components" — the server
component page was passing formatShortDate/formatMonth as a `formatDate`
prop into TimeSeriesChart ("use client"). Functions aren't serializable
across the RSC boundary; the two previous fixes (query hardening,
Promise.allSettled) were real improvements but not the actual cause of
the reported crash.
TimeSeriesChart now takes a plain `dateFormat: "day" | "month"` string
and formats internally — BarChart was never affected (its formatValue
prop is only ever used via its own default, never passed from the page).
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
@@ -5,22 +5,36 @@ import { cn } from "@/lib/utils";
|
||||
|
||||
export type TimeSeriesPoint = { date: string; value: number };
|
||||
|
||||
/** "day" expects "YYYY-MM-DD", "month" expects "YYYY-MM" — kept as a plain
|
||||
* string enum rather than a formatter function prop, since this chart is
|
||||
* a "use client" component and functions passed from a server component
|
||||
* parent aren't serializable across that boundary (React throws: "Functions
|
||||
* cannot be passed directly to Client Components"). */
|
||||
function formatPoint(date: string, kind: "day" | "month"): string {
|
||||
if (kind === "month") {
|
||||
const [y, m] = date.split("-");
|
||||
return new Date(Number(y), Number(m) - 1, 1).toLocaleDateString(undefined, { month: "short", year: "2-digit" });
|
||||
}
|
||||
return new Date(`${date}T00:00:00Z`).toLocaleDateString(undefined, { month: "short", day: "numeric", timeZone: "UTC" });
|
||||
}
|
||||
|
||||
/** Single-series area/line chart with a hover crosshair+tooltip and a
|
||||
* table-view fallback — hand-rolled SVG, no charting lib. */
|
||||
export function TimeSeriesChart({
|
||||
data,
|
||||
formatValue = (n) => String(n),
|
||||
formatDate = (d) => d,
|
||||
dateFormat = "day",
|
||||
height = 200,
|
||||
}: {
|
||||
data: TimeSeriesPoint[];
|
||||
formatValue?: (n: number) => string;
|
||||
formatDate?: (d: string) => string;
|
||||
dateFormat?: "day" | "month";
|
||||
height?: number;
|
||||
}) {
|
||||
const [hovered, setHovered] = useState<number | null>(null);
|
||||
const [showTable, setShowTable] = useState(false);
|
||||
const svgRef = useRef<SVGSVGElement>(null);
|
||||
const formatDate = (d: string) => formatPoint(d, dateFormat);
|
||||
|
||||
const width = 600;
|
||||
const paddingBottom = 24;
|
||||
|
||||
Reference in New Issue
Block a user