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 не инициализирован
```typescript
// Проверьте, что canvas монтируется
useEffect(() => {
  const canvas = canvasRef.current;
  if (!canvas) {
    console.error('Canvas not found!');
    return;
  }
  // ...
}, []);
```

#### Ошибка: "ResizeObserver loop limit exceeded"
**Решение:** Это предупреждение, можно игнорировать

#### Частицы не видны
**Решение 1:** Увеличьте opacity
```typescript
// В ParticlesBackground.tsx, строка ~60
ctx.fillStyle = `rgba(16, 185, 129, ${particle.opacity * 2})`; // Увеличили в 2 раза
```

**Решение 2:** Увеличьте размер частиц
```typescript
// В ParticlesBackground.tsx, строка ~40
size: Math.random() * 4 + 2, // Было: * 2 + 1
```

**Решение 3:** Увеличьте количество
```typescript
// В ParticlesBackground.tsx, строка ~35
const particleCount = Math.min(200, ...); // Было: 100
```

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

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

```typescript
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` не перекрыт

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

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

```typescript
// В 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 не показываются
```typescript
// Проверьте z-index в ServerMap.tsx
// Tooltip должен иметь z-10
className="... z-10 ..."
```

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

```bash
# Остановите 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:

```bash
# Смотрите логи в реальном времени
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 - все ли файлы загружаются

---

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

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

```javascript
// Проверка 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