GEKON-SUITE-VPN/DEBUG.md

🐛 Отладка Gekon

Проблема: Не видно частицы

Возможные причины:

1. Canvas не поддерживается браузером

   • Откройте консоль браузера (F12)
   • Проверьте ошибки JavaScript

2. Частицы за другими элементами

   • Проверьте z-index
   • Убедитесь, что ParticlesBackground рендерится

3. Opacity слишком низкая

   • Частицы имеют opacity: 0.4
   • На светлом фоне могут быть не видны

Быстрая проверка:

1. Откройте http://localhost:5173 (или 8080)
2. Нажмите F12 (DevTools)
3. Перейдите в Console
4. Проверьте ошибки

Типичные ошибки:

Ошибка: "Cannot read property 'getContext' of null"

Решение: Canvas ref не инициализирован

// Проверьте, что canvas монтируется
useEffect(() => {
  const canvas = canvasRef.current;
  if (!canvas) {
    console.error('Canvas not found!');
    return;
  }
  // ...
}, []);

Ошибка: "ResizeObserver loop limit exceeded"

Решение: Это предупреждение, можно игнорировать

Частицы не видны

Решение 1: Увеличьте opacity

// В ParticlesBackground.tsx, строка ~60
ctx.fillStyle = `rgba(16, 185, 129, ${particle.opacity * 2})`; // Увеличили в 2 раза

Решение 2: Увеличьте размер частиц

// В ParticlesBackground.tsx, строка ~40
size: Math.random() * 4 + 2, // Было: * 2 + 1

Решение 3: Увеличьте количество

// В ParticlesBackground.tsx, строка ~35
const particleCount = Math.min(200, ...); // Было: 100

Проверка рендеринга:

Добавьте console.log в ParticlesBackground:

useEffect(() => {
  console.log('ParticlesBackground mounted!');
  const canvas = canvasRef.current;
  if (!canvas) {
    console.error('Canvas not found!');
    return;
  }
  console.log('Canvas found:', canvas.width, 'x', canvas.height);
  console.log('Particles count:', particlesRef.current.length);
  // ...
}, []);

Проверка в браузере:

1. Откройте DevTools (F12)
2. Elements tab
3. Найдите <canvas> элемент
4. Проверьте стили:
   • position: absolute
   • inset: 0
   • opacity: 0.4
   • z-index не перекрыт

Временное решение (для теста):

Сделайте частицы очень заметными:

// В ParticlesBackground.tsx
// Строка ~60 - увеличьте opacity
ctx.fillStyle = `rgba(16, 185, 129, 1)`; // Полная непрозрачность

// Строка ~40 - увеличьте размер
size: Math.random() * 10 + 5, // Большие частицы

// Строка ~35 - больше частиц
const particleCount = 200;

Проверка карты серверов:

Если карта не работает:

1. Откройте консоль (F12)
2. Проверьте ошибки в ServerMap
3. Убедитесь, что hover работает

Типичная проблема: Tooltips не показываются

// Проверьте z-index в ServerMap.tsx
// Tooltip должен иметь z-10
className="... z-10 ..."

Перезапуск с чистого листа:

# Остановите Docker
wsl bash -c "cd gekon-speed-boost-3ba17197-main && docker compose down"

# Удалите volumes
wsl bash -c "cd gekon-speed-boost-3ba17197-main && docker compose down -v"

# Пересоберите
wsl bash -c "cd gekon-speed-boost-3ba17197-main && docker compose up --build"

Проверка портов:

Текущий порт может быть 8080 вместо 5173:

• Попробуйте http://localhost:8080
• Или http://localhost:5173

Логи Docker:

# Смотрите логи в реальном времени
wsl bash -c "cd gekon-speed-boost-3ba17197-main && docker compose logs -f"

Если ничего не помогает:

1. Откройте http://localhost:8080 (или 5173)
2. Нажмите F12
3. Скопируйте все ошибки из Console
4. Проверьте Network tab - все ли файлы загружаются

---

Быстрый тест частиц:

Добавьте в консоль браузера:

// Проверка Canvas API
const canvas = document.querySelector('canvas');
if (canvas) {
  console.log('Canvas found!', canvas.width, canvas.height);
  const ctx = canvas.getContext('2d');
  ctx.fillStyle = 'red';
  ctx.fillRect(100, 100, 200, 200); // Красный квадрат для теста
} else {
  console.error('Canvas NOT found!');
}

Если увидите красный квадрат - Canvas работает, проблема в коде частиц. Если нет - Canvas не рендерится.

---

Текущий статус:

• ✅ Docker запущен
• ✅ Vite работает
• ❓ Частицы - нужна проверка
• ❓ Карта - нужна проверка

Порт: http://localhost:8080 или http://localhost:5173