157 lines
5.5 KiB
Markdown
157 lines
5.5 KiB
Markdown
# Исправление: Пустой экран после верификации
|
||
|
||
## 🔴 Проблема
|
||
После успешной верификации UI открывается, но моментально пропадает (полностью пустой экран).
|
||
|
||
---
|
||
|
||
## ✅ Что исправлено
|
||
|
||
### 1. **Улучшена обработка ошибок**
|
||
- Добавлено подробное логирование в консоль браузера
|
||
- Теперь видно, на каком этапе происходит ошибка
|
||
|
||
### 2. **Исправлен пустой экран**
|
||
- Вместо `return null` теперь показывается сообщение с кнопкой перезагрузки
|
||
- Это помогает понять, что происходит
|
||
|
||
### 3. **Отложен запуск initDataChecker**
|
||
- `initDataChecker` теперь запускается только после успешной загрузки пользователя
|
||
- Это предотвращает преждевременную перезагрузку страницы
|
||
|
||
### 4. **Улучшена валидация данных**
|
||
- Проверяется, что `userData` действительно получен
|
||
- Если `null` или `undefined` - показывается ошибка
|
||
|
||
---
|
||
|
||
## 🔍 Как диагностировать
|
||
|
||
### Шаг 1: Откройте консоль браузера
|
||
|
||
1. В Telegram откройте приложение
|
||
2. Нажмите **F12** или **Cmd+Option+I** (Mac)
|
||
3. Перейдите на вкладку **Console**
|
||
|
||
### Шаг 2: Посмотрите логи
|
||
|
||
**Должны увидеть:**
|
||
```
|
||
[App] Начало инициализации...
|
||
[App] Telegram WebApp найден, initData: есть
|
||
[API] verifyAuth: отправка запроса...
|
||
[API] verifyAuth: получен ответ: { hasUser: true, userId: "...", username: "..." }
|
||
[App] verifyAuth вернул: данные пользователя
|
||
[App] Пользователь установлен, ID: ...
|
||
[App] Инициализация завершена, loading: false
|
||
```
|
||
|
||
**Если видите ошибку:**
|
||
```
|
||
[API] verifyAuth: ошибка: { message: "...", status: 401/500 }
|
||
[App] Ошибка инициализации: ...
|
||
```
|
||
|
||
---
|
||
|
||
## 🐛 Возможные причины
|
||
|
||
### 1. **Ошибка 401 (Unauthorized)**
|
||
**Причина:** `initData` невалиден или истек
|
||
|
||
**Решение:**
|
||
- Перезагрузите приложение в Telegram
|
||
- Убедитесь, что используете официальный клиент Telegram
|
||
|
||
### 2. **Ошибка 500 (Server Error)**
|
||
**Причина:** Проблема на backend
|
||
|
||
**Решение:**
|
||
```bash
|
||
# Проверьте логи backend
|
||
docker logs nakama-backend --tail 100
|
||
|
||
# Ищите ошибки:
|
||
# - "Ошибка verify"
|
||
# - "MongoDB connection"
|
||
# - "MinIO connection"
|
||
```
|
||
|
||
### 3. **userData = null/undefined**
|
||
**Причина:** Backend не вернул данные пользователя
|
||
|
||
**Решение:**
|
||
- Проверьте маршрут `/api/auth/verify` на backend
|
||
- Убедитесь, что пользователь существует в БД
|
||
- Проверьте, что `respondWithUser` работает правильно
|
||
|
||
### 4. **Ошибка в компонентах Feed/Layout**
|
||
**Причина:** Компонент падает при рендеринге
|
||
|
||
**Решение:**
|
||
- В консоли браузера будет **красная ошибка** с указанием файла и строки
|
||
- Проверьте, что все данные пользователя присутствуют (`user.settings`, `user.photoUrl`, etc.)
|
||
|
||
---
|
||
|
||
## 🔧 Быстрое решение
|
||
|
||
### 1. Перезагрузите приложение
|
||
```javascript
|
||
// В консоли браузера
|
||
window.location.reload()
|
||
```
|
||
|
||
### 2. Проверьте backend
|
||
```bash
|
||
# Проверьте, что backend работает
|
||
curl http://your-backend-url/api/health
|
||
|
||
# Проверьте логи
|
||
docker logs nakama-backend -f
|
||
```
|
||
|
||
### 3. Проверьте MongoDB
|
||
```bash
|
||
# Подключитесь к MongoDB
|
||
docker exec -it nakama-mongodb mongosh
|
||
|
||
# Проверьте пользователей
|
||
use nakama
|
||
db.users.find().limit(5)
|
||
```
|
||
|
||
---
|
||
|
||
## 📋 Контрольный список
|
||
|
||
- [ ] Консоль браузера открыта (F12)
|
||
- [ ] Видны логи `[App]` и `[API]`
|
||
- [ ] Нет красных ошибок в консоли
|
||
- [ ] Backend доступен (`/api/health`)
|
||
- [ ] MongoDB подключена
|
||
- [ ] Пользователь существует в БД
|
||
- [ ] `initData` валиден (не истек)
|
||
|
||
---
|
||
|
||
## 💡 Если все еще не работает
|
||
|
||
### Отправьте мне:
|
||
1. **Логи из консоли браузера** (скопируйте все сообщения)
|
||
2. **Логи backend** (`docker logs nakama-backend --tail 200`)
|
||
3. **Скриншот пустого экрана**
|
||
4. **Ошибки из консоли** (красные сообщения)
|
||
|
||
---
|
||
|
||
## ✅ После исправления
|
||
|
||
После применения исправлений вы должны видеть:
|
||
- ✅ Логи в консоли на каждом этапе
|
||
- ✅ Сообщение об ошибке вместо пустого экрана
|
||
- ✅ Кнопку "Перезагрузить" если что-то пошло не так
|
||
|
||
**Теперь откройте приложение и посмотрите консоль браузера!** 🔍
|
||
|