🧩 Помилка в консолі — фронт чи бек? Як зрозуміти тестувальнику?

Класика: відкрив F12, щось червоне в консолі, щось не працює. І ти стоїш із цим error'ом — наче з гарячою картоплиною: кому його передати?

🤯

Розбираємось, як швидко зрозуміти, де причина — фронт чи бекенд 👇🔍 1. Подивись на тип помилки.

TypeError, ReferenceError, Cannot read property...→ Фронт. Це JS-помилки в браузері, часто через поганий рендер, null, неправильну логіку у фронті. Failed to fetch, CORS error, NetworkError, timeout→ Може бути бек або мережа. Часто — бек не відповідає або не віддає правильний CORS-заголовок.

🌐 2. Перевір вкладку Network (в Chrome DevTools).

Запит має статус:▪️ 4xx (наприклад, 404, 403) → часто проблема на фронті: неправильний шлях, відсутній токен.▪️ 5xx (500, 502, 503) → це вже бекенд, сервер не впорався.▪️ 200, але дані дивні або null → можливо, фронт щось не так обробив.

👉 Якщо відповіді взагалі немає — перевір, чи сервер живий, чи є VPN/інтернет.

🧠 3. Читай stack trace.

Якщо в консолі є шлях типу main.js:156 або App.jsx:48 — це фронт. Якщо в response від API є json з полем message, error, stack — часто це бекенд сам передає помилку.

🛠 4. Спробуй повторити запит вручну (Postman або curl).

Якщо помилка повторюється — справа в бекенді. Якщо там все ок, але UI ламається — проблема у фронті.💡 Практика = досвід

З часом ти навчишся за 10 секунд по консолі та Network вкладці розуміти, що зламалось і куди бігти. Не соромся писати в команду уточнення типу:“Отримую 500 при POST на /api/orders. Чи є проблема на бекенді?”📦 Тестувальник, який розбирає консоль — це вже пів девелопера 😉...чи чверть, якщо розробник дуже високий 😂