Fix: aplicar logger, rate limit a peticiones a firestore, corregir useEffect loop

Author: leodev182

package-lock.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@sentry/react": "^10.22.0",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
     "firebase": "^12.4.0",

package.json

@@ -17,6 +17,7 @@ import type { GamePhase, Hypothesis } from "./types";
 import { Phase1Collider } from "./components/Games/Phase1Collider/Phase1Collider";
 import { Phase2Equation } from "./components/Games/Phase2Equation/Phase2Equation";
 import { Phase3Synthesis } from "./components/Games/Phase3Synthesis/Phase3Synthesis";
+import { logger } from "@/utils/logger";
 
 function App() {
   const [currentPhase, setCurrentPhase] = useState<GamePhase>("intro");
@@ -35,9 +36,9 @@ function App() {
   useEffect(() => {
     if (!hasDraft()) {
       initializeDraft();
-      console.log("🆕 Nuevo draft inicializado");
+      logger.log("🆕 Nuevo draft inicializado");
     } else {
-      console.log("📋 Draft existente encontrado");
+      logger.log("📋 Draft existente encontrado");
     }
     setIsInitialized(true);
   }, []);
@@ -49,14 +50,14 @@ function App() {
   const handleHypothesisSelect = (hypothesis: Hypothesis) => {
     // Sobrescribir hipótesis en localStorage (permite cambiar de opinión)
     updateHypothesis(hypothesis);
-    console.log(`✅ Hipótesis ${hypothesis} guardada en draft`);
+    logger.log(`✅ Hipótesis ${hypothesis} guardada en draft`);
 
     // Navegar a InputScreen
     setCurrentPhase("input");
   };
 
   const handleInputSubmit = async (data: InputData) => {
-    console.log("📝 Datos de input guardados en draft:", data);
+    logger.log("📝 Datos de input guardados en draft:", data);
 
     // Verificar si el draft está listo para enviar
     const draft = getDraft();
@@ -66,7 +67,7 @@ function App() {
       // Ir a los juegos primero
       setCurrentPhase("collider");
 
-      console.log("🎮 Navegando a juegos. Draft completo:", draft);
+      logger.log("🎮 Navegando a juegos. Draft completo:", draft);
     } else {
       alert("Faltan datos. Por favor completa el formulario.");
     }
@@ -84,13 +85,13 @@ function App() {
     try {
       const draft = getDraft();
 
-      console.log("🚀 Enviando predicción completa a Firebase...");
-      console.log("📦 Draft final:", draft);
+      logger.log("🚀 Enviando predicción completa a Firebase...");
+      logger.log("📦 Draft final:", draft);
 
       // Enviar a Firebase
       await submitPrediction(draft);
 
-      console.log("✅ Predicción enviada exitosamente");
+      logger.log("✅ Predicción enviada exitosamente");
 
       // IMPORTANTE: NO limpiar el draft todavía
       // SuccessScreen lo necesita para mostrar los datos
@@ -99,7 +100,7 @@ function App() {
       // Navegar a pantalla de éxito
       setCurrentPhase("submitted");
     } catch (error) {
-      console.error("❌ Error al enviar predicción:", error);
+      logger.error("❌ Error al enviar predicción:", error);
       alert("Error al enviar tu predicción. Por favor intenta de nuevo.");
     } finally {
       setIsSaving(false);
@@ -108,19 +109,19 @@ function App() {
 
   // Handlers para los juegos
   const handleColliderComplete = (score: number) => {
-    console.log(`🎮 Collider completado: ${score} pts`);
+    logger.log(`🎮 Collider completado: ${score} pts`);
     // updateGameScore("collider", score) ya se llama dentro del juego
     setCurrentPhase("equation");
   };
 
   const handleEquationComplete = (score: number) => {
-    console.log(`🎮 Equation completado: ${score} pts`);
+    logger.log(`🎮 Equation completado: ${score} pts`);
     // updateGameScore("equation", score) ya se llama dentro del juego
     setCurrentPhase("synthesis");
   };
 
   const handleSynthesisComplete = async (score: number) => {
-    console.log(`🎮 Synthesis completado: ${score} pts`);
+    logger.log(`🎮 Synthesis completado: ${score} pts`);
     // updateGameScore("synthesis", score) ya se llama dentro del juego
 
     // Después del último juego, enviar TODO a Firebase

src/App.tsx

@@ -4,6 +4,7 @@ import { db } from "@/lib/firebase";
 import { AdminStats } from "./AdminStats";
 import { AdminWall } from "./AdminWall";
 import type { PredictionDraft } from "@/services/localStorageService";
+import { logger } from "@/utils/logger";
 
 type Tab = "stats" | "wall";
 
@@ -28,9 +29,9 @@ export const AdminPanel = () => {
       })) as PredictionDraft[];
 
       setPredictions(data);
-      console.log("📊 Predicciones cargadas:", data.length);
+      logger.log("📊 Predicciones cargadas:", data.length);
     } catch (error) {
-      console.error("❌ Error cargando predicciones:", error);
+      logger.error("❌ Error cargando predicciones:", error);
     } finally {
       setIsLoading(false);
     }

src/components/Admin/AdminPanel.tsx

@@ -36,8 +36,10 @@ export function ParticleBackground() {
       "rgba(168, 85, 247, ", // purple-500 (química)
     ];
 
-    // Crear partículas
-    const particleCount = 60;
+    // Detectar móvil y optimizar
+    const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
+    const particleCount = isMobile ? 20 : 60;
+    const maxDistance = isMobile ? 80 : 120;
     const particles: Particle[] = [];
 
     for (let i = 0; i < particleCount; i++) {
@@ -54,7 +56,7 @@ export function ParticleBackground() {
 
     // Función de animación
     const animate = () => {
-      ctx.clearRect(0, 0, canvas.width, canvas.height); // Limpiar completamente en vez de trail
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
 
       // Actualizar y dibujar partículas
       particles.forEach((particle) => {
@@ -84,12 +86,12 @@ export function ParticleBackground() {
           const dy = particles[i].y - particles[j].y;
           const distance = Math.sqrt(dx * dx + dy * dy);
 
-          if (distance < 120) {
+          if (distance < maxDistance) {
             ctx.beginPath();
             ctx.moveTo(particles[i].x, particles[i].y);
             ctx.lineTo(particles[j].x, particles[j].y);
             ctx.strokeStyle = `rgba(100, 200, 255, ${
-              0.15 * (1 - distance / 120)
+              0.15 * (1 - distance / maxDistance)
             })`;
             ctx.lineWidth = 0.5;
             ctx.stroke();

src/components/Intro/ParticleBackground.tsx

@@ -1,3 +1,4 @@
+import { useMemo } from "react";
 import { useCountdown } from "../../hooks/useCountdown";
 import { useEventConfig } from "../../hooks/useEventConfig";
 import type { GamePhase } from "../../types";
@@ -7,8 +8,16 @@ interface SpaceComputerProps {
 }
 
 export function SpaceComputer({ currentPhase }: SpaceComputerProps) {
-  const { config } = useEventConfig(); // Removemos el loading check
-  const countdown = useCountdown(config?.revealDate || Date.now());
+  const { config } = useEventConfig();
+
+  // ✅ FIX: Memorizar la fecha target para evitar que cambie en cada render
+  const targetDate = useMemo(() => {
+    return (
+      config?.revealDate || new Date("2025-10-26T19:00:00-03:00").getTime()
+    );
+  }, [config?.revealDate]);
+
+  const countdown = useCountdown(targetDate);
 
   // Calcular progreso de gestación
   // FPP: 29 enero 2026

src/components/Layout/SpaceComputer.tsx

@@ -2,39 +2,61 @@ import { useState, useEffect } from "react";
 import { doc, getDoc } from "firebase/firestore";
 import { db } from "../lib/firebase";
 import type { EventConfig } from "../types";
+import { logger } from "../utils/logger";
+import { rateLimiter, RATE_LIMITS } from "../utils/rateLimiters";
 
 export function useEventConfig() {
   const [config, setConfig] = useState<EventConfig | null>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
+    let isMounted = true;
+
     const fetchConfig = async () => {
+      // ✅ Verificar rate limit ANTES de hacer la petición
+      if (!rateLimiter.isAllowed("fetchConfig", RATE_LIMITS.CONFIG_FETCH)) {
+        logger.warn("⚠️ Rate limit: fetchConfig bloqueado temporalmente");
+        return;
+      }
+
       try {
         setLoading(true);
         setError(null);
 
         const docRef = doc(db, "config", "event");
         const docSnap = await getDoc(docRef);
 
+        // Solo actualizar si el componente sigue montado
+        if (!isMounted) return;
+
         if (docSnap.exists()) {
           setConfig(docSnap.data() as EventConfig);
-          console.log("✅ Configuración cargada desde Firestore");
+          logger.log("✅ Configuración cargada desde Firestore");
         } else {
           setError("No se encontró la configuración del evento en Firestore");
-          console.error("❌ Documento config/event no existe");
+          logger.error("❌ Documento config/event no existe");
         }
       } catch (err) {
+        if (!isMounted) return;
+
         const errorMessage =
           err instanceof Error ? err.message : "Error desconocido";
         setError(`Error al cargar configuración: ${errorMessage}`);
-        console.error("❌ Error en useEventConfig:", err);
+        logger.error("❌ Error en useEventConfig:", err);
       } finally {
-        setLoading(false);
+        if (isMounted) {
+          setLoading(false);
+        }
       }
     };
 
     fetchConfig();
+
+    // Cleanup: marcar componente como desmontado
+    return () => {
+      isMounted = false;
+    };
   }, []);
 
   return { config, loading, error };