Address code review feedback: improve error handling and performance

Co-authored-by: ankurrera <186232326+ankurrera@users.noreply.github.com>

Author: Copilot

src/components/system/RadarChart.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState, useCallback } from "react";
+import { useEffect, useRef, useState, useCallback, useMemo } from "react";
 import { useCoreMetrics } from "@/hooks/useCoreMetrics";
 import { MAX_METRIC_XP, CoreMetricName } from "@/lib/coreMetrics";
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
@@ -103,6 +103,16 @@ const RadarChart = () => {
   // radarData is computed from Skills and Characteristics XP
   // It automatically updates when skill XP changes, attendance is marked, or time is edited
   const data = radarData;
+  
+  // Memoize total contributing skills count to avoid recalculating on every render
+  const totalContributingSkills = useMemo(() => {
+    return coreMetrics.reduce((sum, m) => sum + m.contributions.length, 0);
+  }, [coreMetrics]);
+  
+  // Memoize non-zero metrics count
+  const nonZeroMetricsCount = useMemo(() => {
+    return coreMetrics.filter(m => m.xp > 0).length;
+  }, [coreMetrics]);
 
   // Handle canvas click to detect which axis was clicked
   const handleCanvasClick = useCallback((event: React.MouseEvent<HTMLCanvasElement>) => {
@@ -311,8 +321,8 @@ const RadarChart = () => {
           <div className="space-y-1 text-blue-700">
             <div>Radar Points: {data.length}</div>
             <div>Core Metrics: {coreMetrics.length}</div>
-            <div>Total Contributing Skills: {coreMetrics.reduce((sum, m) => sum + m.contributions.length, 0)}</div>
-            <div>Non-Zero Metrics: {coreMetrics.filter(m => m.xp > 0).length}</div>
+            <div>Total Contributing Skills: {totalContributingSkills}</div>
+            <div>Non-Zero Metrics: {nonZeroMetricsCount}</div>
             <div className="text-blue-500 text-[10px] mt-2">
               Click metrics to see contributors
             </div>

src/hooks/useCoreMetrics.ts

@@ -182,10 +182,15 @@ export function useCoreMetrics(): UseCoreMetricsResult {
 
       // Assert that radar data length matches core metrics length
       if (data.length !== coreMetrics.length) {
-        console.error('[CRITICAL] Radar data length mismatch!', {
+        const error = `[CRITICAL] Radar data length mismatch! Expected ${coreMetrics.length}, got ${data.length}`;
+        console.error(error, {
           expected: coreMetrics.length,
           actual: data.length,
         });
+        // In development, throw error to catch issues immediately
+        if (process.env.NODE_ENV === 'development') {
+          throw new Error(error);
+        }
       }
     }
 

src/test/radarIntegration.test.ts

@@ -261,9 +261,9 @@ describe("Radar Integration - Full CRUD Flow", () => {
     // Raw metric should have full XP
     expect(metrics.find(m => m.name === 'Programming')?.xp).toBe(5000);
 
-    // Radar should clamp to MAX_METRIC_XP
+    // Radar should clamp to MAX_METRIC_XP (2000)
     expect(radarData.find(d => d.label === 'Programming')?.value).toBe(MAX_METRIC_XP);
-    expect(radarData.find(d => d.label === 'Programming')?.value).toBe(2000);
+    expect(MAX_METRIC_XP).toBe(2000); // Verify constant value
   });
 
   it("CRITICAL: verifies skill with 0 XP contributes 0 to all metrics", () => {