112 lines
4.1 KiB
Markdown
112 lines
4.1 KiB
Markdown
# Инструкция по проверке консоли браузера
|
||
|
||
## ✅ Что видно в вашей консоли:
|
||
|
||
1. **Предупреждения React Router** (желтые) - не критично
|
||
- Это предупреждения о будущих изменениях в React Router v7
|
||
- Не влияют на работу приложения
|
||
- Можно игнорировать
|
||
|
||
2. **Нет красных ошибок** - это хорошо!
|
||
|
||
## 🔍 Дальнейшая проверка:
|
||
|
||
### Шаг 1: Проверьте вкладку Network
|
||
|
||
1. В консоли разработчика перейдите на вкладку **Network** (Сеть)
|
||
2. Обновите страницу (F5 или Cmd+R)
|
||
3. Найдите запросы:
|
||
- `GET /api/v1/aircraft` - для загрузки ВС
|
||
- `GET /api/v1/users` - для загрузки пользователей
|
||
|
||
4. Для каждого запроса проверьте:
|
||
- **Status**: должен быть `200 OK` (зеленый)
|
||
- **Response**: нажмите на запрос → вкладка Response → проверьте, что данные есть
|
||
|
||
### Шаг 2: Проверьте данные в Response
|
||
|
||
Для запроса `/api/v1/aircraft` в Response должно быть:
|
||
```json
|
||
[
|
||
{
|
||
"registration_number": "RA-12345",
|
||
"operator_name": "Аэрофлот - Российские авиалинии",
|
||
"serial_number": "08-001",
|
||
...
|
||
}
|
||
]
|
||
```
|
||
|
||
### Шаг 3: Проверьте вкладку Application/Storage
|
||
|
||
1. Перейдите на вкладку **Application** (Chrome) или **Storage** (Firefox)
|
||
2. Проверьте **Local Storage** → `http://localhost:8080`
|
||
3. Должен быть ключ `token` со значением `dev`
|
||
|
||
## 🐛 Если данные не отображаются:
|
||
|
||
### Проверка 1: Данные приходят, но не отображаются
|
||
|
||
В консоли выполните:
|
||
```javascript
|
||
// Проверка загруженных данных
|
||
fetch('/api/v1/aircraft', {
|
||
headers: { 'Authorization': 'Bearer dev' }
|
||
})
|
||
.then(r => r.json())
|
||
.then(data => {
|
||
console.log('Данные ВС:', data);
|
||
console.log('Первое ВС:', data[0]);
|
||
console.log('operator_name:', data[0]?.operator_name);
|
||
console.log('serial_number:', data[0]?.serial_number);
|
||
});
|
||
```
|
||
|
||
### Проверка 2: Проверка состояния React компонента
|
||
|
||
В консоли выполните (если есть доступ к React DevTools):
|
||
```javascript
|
||
// Проверка состояния компонента
|
||
// (требует установки React DevTools)
|
||
```
|
||
|
||
### Проверка 3: Очистка кэша
|
||
|
||
1. Откройте DevTools (F12)
|
||
2. Правой кнопкой на кнопку обновления страницы
|
||
3. Выберите "Очистить кэш и жесткая перезагрузка"
|
||
|
||
Или в терминале:
|
||
```bash
|
||
# Очистка кэша Docker
|
||
docker compose down
|
||
docker compose up -d
|
||
```
|
||
|
||
## 📊 Ожидаемые результаты:
|
||
|
||
✅ **API работает**: Status 200, данные в Response
|
||
✅ **Нет ошибок**: Нет красных сообщений в консоли
|
||
✅ **Данные загружаются**: Видны запросы к API
|
||
✅ **Токен есть**: В Local Storage есть `token`
|
||
|
||
## ❌ Возможные проблемы:
|
||
|
||
1. **CORS ошибка**: `Access-Control-Allow-Origin`
|
||
- Решение: Проверьте настройки CORS в backend
|
||
|
||
2. **401 Unauthorized**: Не авторизован
|
||
- Решение: Проверьте токен в Local Storage
|
||
|
||
3. **404 Not Found**: API не найден
|
||
- Решение: Проверьте, что backend запущен
|
||
|
||
4. **Данные пустые**: `[]` в Response
|
||
- Решение: Проверьте базу данных
|
||
|
||
## 🎯 Следующие шаги:
|
||
|
||
1. Проверьте вкладку Network
|
||
2. Проверьте Response для запросов к API
|
||
3. Пришлите скриншот вкладки Network или текст ошибок (если есть)
|