Определить проблему: клиент или сервер?

Решение: Диагностика проблемы клиент или сервер

Систематический алгоритм диагностики

Когда ничего не происходит при нажатии кнопки, нужно проверить всё: от клиента до сервера. Ниже — пошаговый процесс.

Шаг 1: Проверка на клиенте (Browser DevTools)

1.1 Console вкладка

Открыть DevTools (F12) → Console и нажать на кнопку:

// Смотрим на ошибки:
- Uncaught TypeError
- Uncaught ReferenceError
- CORS errors
- Network errors

// Признаки проблемы на клиенте:
❌ console.error() сообщения
❌ Красные сообщения об ошибках
❌ JavaScript не выполняется

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

// Ошибка 1: button не найден
Uncaught TypeError: Cannot read property 'click' of null

// Ошибка 2: обработчик события не зарегистрирован
Button clicked, but handler is undefined

// Ошибка 3: CORS
Access to XMLHttpRequest at 'http://api.example.com' from origin 
'http://localhost:3000' has been blocked by CORS policy

1.2 Network вкладка

Открыть DevTools → Network, затем нажать на кнопку:

Записываем все запросы и смотрим:

✅ Был ли отправлен HTTP запрос?
   - Если НЕТ запроса → проблема на КЛИЕНТЕ (JavaScript не отправил)
   - Если ДА запрос → может быть проблема на СЕРВЕРЕ

✅ Какой статус ответа?
   - 2xx (200, 201) - успех ✓
   - 3xx (301, 302) - redirect ⚠️
   - 4xx (400, 401, 403, 404) - ошибка клиента ❌
   - 5xx (500, 502, 503) - ошибка сервера ❌
   - (pending) - запрос не получил ответ ❌

Фильтрация по типам:

Network → Filter → XHR (для AJAX запросов)
                  → Fetch (для современных запросов)
                  → All (все запросы)

1.3 Elements/Inspector вкладка

Проверить HTML элемент кнопки:

<!-- Проверяем наличие обработчика события -->
<button id="submit-btn" onclick="handleSubmit()">Отправить</button>

<!-- Или в DevTools —> Elements, найти button, смотрим справа —> Event Listeners -->
Если Event Listeners пусто или нет click обработчика
→ Проблема на клиенте

1.4 Application вкладка

Application → LocalStorage / SessionStorage
- Проверяем, сохранены ли необходимые данные (токены, user ID)
- Если токена нет → может быть не авторизован пользователь

Шаг 2: Определение границы клиент-сервер

Если в Network tab НЕТ запроса:

Проблема на КЛИЕНТЕ (Frontend)

Проверяем:

1. Есть ли обработчик события на кнопке?
2. Выполняется ли JavaScript код?
3. Нет ли ошибок в консоли?

// Диагностируем проблему
document.querySelector('#submit-btn').addEventListener('click', () => {
  console.log('Button clicked!')  // Срабатывает ли это?
  
  // Или проверяем оригинальный обработчик
  console.log(document.querySelector('#submit-btn').onclick)
})

Если в Network tab ЕСТЬ запрос, но:

Проблема на СЕРВЕРЕ (Backend)

Смотрим на:

1. Статус код ответа (5xx, 4xx, timeout)
2. Response body (текст ошибки)
3. Время ответа (если очень долго → performance issue)

Примеры:
- 404 Not Found → неверный endpoint
- 500 Internal Server Error → ошибка в коде сервера
- 401 Unauthorized → не авторизован
- 403 Forbidden → нет прав
- 408 Request Timeout → сервер не ответил

Шаг 3: Детальный анализ Network запроса

Кликаем на запрос в Network tab и смотрим разделы:

Headers

Request URL: https://api.example.com/submit
Request Method: POST / GET
Status Code: 200 OK (или ошибка)

Request Headers:
  - Authorization: Bearer {token} ✓ (проверяем, есть ли токен)
  - Content-Type: application/json ✓
  - User-Agent, Accept, Accept-Language

Response Headers:
  - Content-Type: application/json
  - Set-Cookie (если требуется сохранить сессию)

Payload (или Request body)

{
  "email": "user@example.com",
  "message": "Hello"
}
// Проверяем:
// ✓ Отправились ли нужные данные?
// ✓ Правильный ли формат (JSON, Form data)?
// ✓ Все ли поля заполнены?

Response

{
  "success": true,
  "message": "Message sent"
}
// Или ошибка:
{
  "error": "Validation failed",
  "details": "Email is required"
}
// Читаем сообщение об ошибке → понимаем, что не так

Timing

Queueing: 5ms (время в очереди)
DNS Lookup: 20ms (разрешение имени домена)
Initial Connection: 50ms (установка соединения)
SSL: 30ms (TLS handshake)
Request sent: 2ms
Waiting (TTFB): 500ms ← ЭТО ВАЖНО!
Content Download: 10ms

ТОТАЛО: ~617ms

❌ Если TTFB (Time To First Byte) > 5 сек
   → Проблема на сервере (медленно обрабатывает запрос)

Шаг 4: Проверка конкретных сценариев

Сценарий 1: Запрос отправляется, но UI не обновляется

// Проверяем JavaScript код обработки ответа
fetch('/api/submit', {
  method: 'POST',
  body: JSON.stringify(data)
})
.then(res => res.json())
.then(data => {
  console.log('Response:', data)  // Видим ли мы ответ?
  document.querySelector('#result').textContent = data.message  // Обновляется ли DOM?
})
.catch(err => console.error('Error:', err))

// Проверяем:
// 1. Видим ли сообщение в консоли?
// 2. Элемент #result существует в HTML?
// 3. CSS скрывает ли элемент (display: none)?

Сценарий 2: Запрос выглядит успешным (200), но данные не сохранились

Проверяем:
1. Server отправил 200 ОК, но на самом деле ошибка? (неправильный JSON)
2. Response body содержит ошибку, но статус 200? (плохой API дизайн)
3. Данные сохранились, но клиент не перезагружает страницу?

Срок:
- Если запрос выглядит успешным, но нет результата
  → Проверяем Response body в Network tab
  → Там может быть "success": false с объяснением

Сценарий 3: CORS ошибка

Ошибка: Access to XMLHttpRequest at 'http://api.example.com' 
from origin 'http://localhost:3000' has been blocked by CORS policy

Проверяем в Network tab → Response Headers:
  Access-Control-Allow-Origin: http://localhost:3000 (должна быть эта заголовка)

Если заголовка нет → сервер не разрешает запросы с этого домена

Шаг 5: Сбор информации для баг-репорта

Создавая баг-репорт, включи:

## Описание проблемы
При нажатии кнопки "Отправить" ничего не происходит.

## Шаги воспроизведения
1. Перейти на страницу https://example.com/form
2. Заполнить форму данными
3. Нажать кнопку "Отправить"
4. Ожидаемый результат: сообщение об успехе
5. Реальный результат: ничего не происходит

## Диагностика

### Frontend (клиент)
- Console вкладка DevTools: 
  [вставить скриншот или текст ошибок]
- Network запросов отправлено?: 
  ДА / НЕТ
- Если ДА, какой URL?: 
  POST https://api.example.com/submit

### Network
- HTTP статус: 
  200 / 404 / 500 / [другой]
- Response body: 
  {
    "error": "..."
  }
- CORS ошибка?: 
  ДА / НЕТ
- Время ответа (TTFB): 
  1500ms

### Возможная причина
- Проблема на КЛИЕНТЕ
  (ошибка JavaScript, обработчик события не зарегистрирован)
- Проблема на СЕРВЕРЕ
  (HTTP 500, запрос не обработан, медленный ответ)
- Проблема с сетью
  (CORS, timeout, offline)

## Окружение
- Браузер: Chrome 120
- ОС: Windows 11
- Версия приложения: 2.1.0

Чеклист для быстрой диагностики

❌ Ничего не происходит?

1. Открыть DevTools (F12)
2. Перейти на вкладку Console
3. Нажать на кнопку
4. Есть ли красные ошибки в консоли?
   ✅ ДА → Проблема на КЛИЕНТЕ
   ❌ НЕТ → Идти дальше

5. Открыть вкладку Network
6. Нажать на кнопку ещё раз
7. Появился ли HTTP запрос?
   ✅ ДА → Идти дальше
   ❌ НЕТ → Проблема на КЛИЕНТЕ

8. Кликнуть на запрос, смотрим Response
9. Статус 2xx (200, 201)?
   ✅ ДА → Проблема может быть в обработке ответа на КЛИЕНТЕ
   ❌ НЕТ → Проблема на СЕРВЕРЕ (смотрим код ошибки и Response body)

10. Если статус 2xx, но UI не обновилась
    → Смотрим Console на ошибки после запроса
    → Проверяем, обновляется ли DOM
    → Проблема на КЛИЕНТЕ (обработка ответа)

Инструменты для диагностики

Вывод

Систематическая диагностика через DevTools позволяет быстро понять, где проблема:

• Console + отсутствие запроса → клиент
• Network запрос отправлен + 5xx статус → сервер
• Network запрос + 2xx статус + нет обновления UI → обработка ответа на клиенте

Этот подход работает для 99% проблем с отправкой форм и AJAX запросов.