fix: harden stats page rendering and chart data guards

Author: waynesutton

changelog.md

@@ -18,6 +18,9 @@ Format based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
   - Added CSS `100dvh` (dynamic viewport height) fallback for mobile browser compatibility
   - Added `-webkit-overflow-scrolling: touch` for smooth iOS scrolling
   - No changes to desktop UI or features
+- Hardened public stats page rendering
+  - Added a local error boundary so stats failures do not blank the app
+  - Guarded growth chart against invalid data points
 
 ### Added
 

files.md

@@ -57,7 +57,7 @@ React frontend application.
 | File | Description |
 |------|-------------|
 | `Login.tsx` | Public homepage with WorkOS AuthKit integration. Shows "Go to Dashboard" button when logged in (no auto-redirect), "Sign in" when logged out. Includes privacy messaging, "Syncs with" section showing supported CLI tools (OpenCode, Claude Code, Droid, Codex CLI, Cursor with coming soon badge), getting started section with plugin links including codex-sync (mobile-visible), tan mode theme support with footer (theme switcher, Terms/Privacy links), footer icons (GitHub, Discord, Support, Discussions), updated mockup with view tabs and OC/CC source badges (desktop-only), feature list with Sync/Search/Private/Tag/Export/Delete keywords and eval datasets tagline, Watch the demo link, trust message with cloud/local deployment info, real-time Platform Stats leaderboard (Top Models, Top CLI) above Open Source footer link |
-| `Stats.tsx` | Public stats page (/stats) with platform statistics isolated from homepage. Includes MessageMilestoneCounter (real-time message count with dynamic milestones, progress bar), AnimatedGrowthChart (SVG chart with play/reset animation showing cumulative message growth over days, dynamic Y-axis scaling, X-axis date labels). Theme toggle, back link to homepage. No auth required. |
+| `Stats.tsx` | Public stats page (/stats) with platform statistics isolated from homepage. Includes MessageMilestoneCounter (real-time message count with dynamic milestones, progress bar), AnimatedGrowthChart (SVG chart with play/reset animation showing cumulative message growth over days, dynamic Y-axis scaling, X-axis date labels), plus a local error boundary and data guards so chart failures do not blank the app. Theme toggle, back link to homepage. No auth required. |
 | `Dashboard.tsx` | Main dashboard with custom themed source filter dropdown (filters by user's enabled agents from Settings, dark/tan mode support, click-outside close, escape key close), source badges (CC/OC/FD), eval toggle button, Context link with search icon, setup banner for new users with 3-column plugin cards (OpenCode, Claude Code, Factory Droid), mobile-optimized header/filters/session rows, URL param support for deep linking from Context search (?session=id), Cmd/Ctrl+K shortcut to open Context search, MessageBubble with content normalization helpers (getPartTextContent, getToolName) for multi-plugin format support, flash-free session transitions using lastValidSessionRef cache (shows cached content until new data loads, subtle corner spinner), and five views: Overview (responsive stat grids), Sessions (mobile-friendly list with stacked layout), Evals (eval-ready sessions with export modal), Analytics (responsive breakdowns with collapsible filters), Wrapped (Daily Sync Wrapped visualization) |
 | `Settings.tsx` | Tabbed settings: API Access (two-column layout with Plugin Setup and AI Coding Agents sections, keys, endpoints with plugin links including codex-sync), Profile (collapsible section for privacy, account info, Legal section with Terms/Privacy links, Danger Zone with delete data/account options). AI Coding Agents section lets users enable/disable CLI tools for the source filter dropdown (OpenCode, Claude Code, Factory Droid, Codex CLI with supported status, Cursor, Continue, Amp, Aider, Goose, Mentat, Cline, Kilo Code). Back link navigates to /dashboard |
 | `Docs.tsx` | Comprehensive documentation page with instant typeahead search (Cmd/Ctrl+K shortcut), left sidebar navigation (hidden scrollbar) with npm links (opencode-sync-plugin, claude-code-sync, codex-sync), right table of contents, anchor tags, copy/view as markdown buttons, mobile responsive, works with both dark/tan themes. Search indexes all sections with keywords for quick navigation to any topic via hash anchor. Covers use hosted version (with features, 3-plugin install cards with OC/CC/CX badges, login/sync for all three plugins), self-hosting requirements with cloud and 100% local deployment options, quick start (3-plugin cards), dashboard features, OpenCode plugin, Claude Code plugin, Codex CLI plugin with full documentation sections, API reference, search types, authentication, hosting, fork guide, troubleshooting, and FAQ. Links to opencode.ai, claude.ai, and openai.com/codex in hero and plugin sections. |

src/pages/Stats.tsx

@@ -1,8 +1,8 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, Component, type ReactNode } from "react";
 import { useQuery } from "convex/react";
 import { api } from "../../convex/_generated/api";
 import { Link } from "react-router-dom";
-import { useTheme } from "../lib/theme";
+import { useTheme, type Theme } from "../lib/theme";
 import {
   Sun,
   Moon,
@@ -127,9 +127,15 @@ function AnimatedGrowthChart({ isDark }: { isDark: boolean }) {
 
   // Get data points - limit to last 60 days for readability
   const dataPoints = growthData?.slice(-60) ?? [];
-  const maxCumulative = dataPoints.length > 0
-    ? Math.max(...dataPoints.map(d => d.cumulative))
-    : 100;
+  // Guard against invalid data so the chart never crashes
+  const safePoints = dataPoints.filter((point) =>
+    Number.isFinite(point.cumulative),
+  );
+  const chartPoints = safePoints.length > 0 ? safePoints : [];
+  const maxCumulative =
+    chartPoints.length > 0
+      ? Math.max(...chartPoints.map((point) => point.cumulative))
+      : 100;
 
   // Calculate Y-axis scale
   const getNiceMax = (value: number): number => {
@@ -172,23 +178,45 @@ function AnimatedGrowthChart({ isDark }: { isDark: boolean }) {
   const innerWidth = chartWidth - padding.left - padding.right;
   const innerHeight = chartHeight - padding.top - padding.bottom;
 
-  const pathData = dataPoints.length >= 1
-    ? dataPoints.map((d, i) => {
-        const x = padding.left + (dataPoints.length === 1 ? innerWidth : (i / (dataPoints.length - 1)) * innerWidth);
-        const y = padding.top + innerHeight - (d.cumulative / yAxisMax) * innerHeight;
-        return i === 0 ? `M ${padding.left} ${padding.top + innerHeight} L ${x} ${y}` : `L ${x} ${y}`;
-      }).join(' ')
-    : '';
-
-  const areaPath = pathData && dataPoints.length >= 1
-    ? `M ${padding.left} ${padding.top + innerHeight} ` +
-      dataPoints.map((d, i) => {
-        const x = padding.left + (dataPoints.length === 1 ? innerWidth : (i / (dataPoints.length - 1)) * innerWidth);
-        const y = padding.top + innerHeight - (d.cumulative / yAxisMax) * innerHeight;
-        return `L ${x} ${y}`;
-      }).join(' ') +
-      ` L ${padding.left + (dataPoints.length === 1 ? innerWidth : innerWidth)} ${padding.top + innerHeight} Z`
-    : '';
+  const pathData =
+    chartPoints.length >= 1
+      ? chartPoints
+          .map((point, i) => {
+            const x =
+              padding.left +
+              (chartPoints.length === 1
+                ? innerWidth
+                : (i / (chartPoints.length - 1)) * innerWidth);
+            const y =
+              padding.top +
+              innerHeight -
+              (point.cumulative / yAxisMax) * innerHeight;
+            return i === 0
+              ? `M ${padding.left} ${padding.top + innerHeight} L ${x} ${y}`
+              : `L ${x} ${y}`;
+          })
+          .join(" ")
+      : "";
+
+  const areaPath =
+    pathData && chartPoints.length >= 1
+      ? `M ${padding.left} ${padding.top + innerHeight} ` +
+        chartPoints
+          .map((point, i) => {
+            const x =
+              padding.left +
+              (chartPoints.length === 1
+                ? innerWidth
+                : (i / (chartPoints.length - 1)) * innerWidth);
+            const y =
+              padding.top +
+              innerHeight -
+              (point.cumulative / yAxisMax) * innerHeight;
+            return `L ${x} ${y}`;
+          })
+          .join(" ") +
+        ` L ${padding.left + innerWidth} ${padding.top + innerHeight} Z`
+      : "";
 
   const formatDateLabel = (dateStr: string) => {
     try {
@@ -200,17 +228,23 @@ function AnimatedGrowthChart({ isDark }: { isDark: boolean }) {
     }
   };
 
-  const xLabels = dataPoints.length >= 1
-    ? dataPoints.length === 1
-      ? [formatDateLabel(dataPoints[0].date)]
-      : dataPoints.length === 2
-        ? [formatDateLabel(dataPoints[0].date), formatDateLabel(dataPoints[1].date)]
-        : [
-            formatDateLabel(dataPoints[0].date),
-            formatDateLabel(dataPoints[Math.floor(dataPoints.length / 2)].date),
-            formatDateLabel(dataPoints[dataPoints.length - 1].date),
-          ]
-    : [];
+  const xLabels =
+    chartPoints.length >= 1
+      ? chartPoints.length === 1
+        ? [formatDateLabel(chartPoints[0].date)]
+        : chartPoints.length === 2
+          ? [
+              formatDateLabel(chartPoints[0].date),
+              formatDateLabel(chartPoints[1].date),
+            ]
+          : [
+              formatDateLabel(chartPoints[0].date),
+              formatDateLabel(
+                chartPoints[Math.floor(chartPoints.length / 2)].date,
+              ),
+              formatDateLabel(chartPoints[chartPoints.length - 1].date),
+            ]
+      : [];
 
   return (
     <div
@@ -263,7 +297,7 @@ function AnimatedGrowthChart({ isDark }: { isDark: boolean }) {
       </div>
 
       <div className="relative" style={{ height: chartHeight + 20 }}>
-        {dataPoints.length === 0 ? (
+        {chartPoints.length === 0 ? (
           <div
             className={`flex items-center justify-center h-full text-sm ${
               isDark ? "text-zinc-600" : "text-[#8b7355]"
@@ -345,10 +379,15 @@ function AnimatedGrowthChart({ isDark }: { isDark: boolean }) {
                 clipPath={isPlaying ? `url(#clipPath-${animationKey})` : undefined}
               />
 
-              {dataPoints.length > 0 && !isPlaying && (
+              {chartPoints.length > 0 && !isPlaying && (
                 <circle
                   cx={padding.left + innerWidth}
-                  cy={padding.top + innerHeight - (dataPoints[dataPoints.length - 1].cumulative / yAxisMax) * innerHeight}
+                  cy={
+                    padding.top +
+                    innerHeight -
+                    (chartPoints[chartPoints.length - 1].cumulative / yAxisMax) *
+                      innerHeight
+                  }
                   r="3"
                   fill={isDark ? "#10b981" : "#059669"}
                 />
@@ -369,15 +408,15 @@ function AnimatedGrowthChart({ isDark }: { isDark: boolean }) {
         )}
       </div>
 
-      {dataPoints.length > 0 && (
+      {chartPoints.length > 0 && (
         <div
           className={`mt-3 pt-3 border-t flex justify-between text-xs ${
             isDark ? "border-zinc-800 text-zinc-500" : "border-[#e6e4e1] text-[#8b7355]"
           }`}
         >
           <span>
             Total: <span className={isDark ? "text-zinc-300" : "text-[#1a1a1a]"}>
-              {dataPoints[dataPoints.length - 1].cumulative.toLocaleString()}
+              {chartPoints[chartPoints.length - 1].cumulative.toLocaleString()}
             </span>
           </span>
           <span>
@@ -390,8 +429,81 @@ function AnimatedGrowthChart({ isDark }: { isDark: boolean }) {
 }
 
 // Main Stats page component
-export function StatsPage() {
-  const { theme, setTheme } = useTheme();
+class StatsErrorBoundary extends Component<
+  { children: ReactNode; isDark: boolean },
+  { hasError: boolean }
+> {
+  state = { hasError: false };
+
+  static getDerivedStateFromError() {
+    return { hasError: true };
+  }
+
+  componentDidCatch(error: unknown) {
+    console.error("Stats page crashed", error);
+  }
+
+  render() {
+    if (!this.state.hasError) {
+      return this.props.children;
+    }
+
+    const { isDark } = this.props;
+    return (
+      <div
+        className={`min-h-screen ${
+          isDark ? "bg-[#0a0a0a] text-zinc-100" : "bg-[#f8f6f3] text-[#1a1a1a]"
+        }`}
+      >
+        <div className="max-w-4xl mx-auto px-4 py-16 text-center">
+          <h1
+            className={`text-lg font-semibold ${
+              isDark ? "text-zinc-100" : "text-[#1a1a1a]"
+            }`}
+          >
+            Stats failed to load
+          </h1>
+          <p
+            className={`mt-2 text-sm ${
+              isDark ? "text-zinc-500" : "text-[#8b7355]"
+            }`}
+          >
+            We hit an error while loading metrics. Refresh to try again.
+          </p>
+          <div className="mt-6 flex items-center justify-center gap-3">
+            <Link
+              to="/"
+              className={`text-sm ${
+                isDark
+                  ? "text-zinc-400 hover:text-zinc-200"
+                  : "text-[#8b7355] hover:text-[#1a1a1a]"
+              }`}
+            >
+              Back
+            </Link>
+            <button
+              onClick={() => window.location.reload()}
+              className={`px-3 py-1.5 rounded-md text-xs font-medium transition-colors ${
+                isDark
+                  ? "bg-zinc-800 text-zinc-300 hover:bg-zinc-700"
+                  : "bg-[#ebe9e6] text-[#1a1a1a] hover:bg-[#e6e4e1]"
+              }`}
+            >
+              Reload
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+type StatsPageContentProps = {
+  theme: Theme;
+  setTheme: (theme: Theme) => void;
+};
+
+function StatsPageContent({ theme, setTheme }: StatsPageContentProps) {
   const isDark = theme === "dark";
 
   return (
@@ -464,3 +576,14 @@ export function StatsPage() {
     </div>
   );
 }
+
+export function StatsPage() {
+  const { theme, setTheme } = useTheme();
+  const isDark = theme === "dark";
+
+  return (
+    <StatsErrorBoundary isDark={isDark}>
+      <StatsPageContent theme={theme} setTheme={setTheme} />
+    </StatsErrorBoundary>
+  );
+}

task.md

@@ -33,6 +33,9 @@ OpenSync supports two AI coding tools: **OpenCode** and **Claude Code**.
   - Dark/tan theme support with toggle
   - Back link to homepage
   - No auth required (public page)
+- [x] Stabilized public stats page rendering
+  - Added local error boundary to prevent full app blanking
+  - Guarded growth chart against invalid data points
 - [x] Added new Convex queries in analytics.ts
   - publicMessageCount: returns total message documents (no auth)
   - publicMessageGrowth: returns daily counts with cumulative totals (no auth)