Какие ошибки в DevTools указывают на фронтенд, а какие на бэкенд?

Что проверяют

Умеете ли вы по вкладкам Console и Network определить, на чьей стороне дефект, и завести баг на нужную команду с доказательствами. Следом обычно дают конкретный случай: после отправки формы запрос вернул 500, чья это ошибка?

Как отвечать

Правило «4xx фронт, 5xx бэк» годится как первая гипотеза, но не как вывод. Надёжнее сверить запрос с контрактом API:

• Console: Uncaught TypeError, ReferenceError, SyntaxError, ошибки гидратации указывают на фронтенд. Но Cannot read properties of undefined часто значит, что бэкенд прислал не ту структуру, и это видно по ответу в Network;
• 5xx: 500 это необработанная ошибка сервера, 502 и 504 проблема между прокси и приложением, 503 перегрузка или обслуживание. Всё это бэкенд или инфраструктура;
• 4xx: смотрите, что ушло. 400 и 422 при неверном теле, 401 при отсутствии или истечении токена, 404 при неверном URL, 415 при неверном Content-Type. Если запрос соответствует контракту, а сервер его отвергает, ошибка на бэкенде;
• CORS: blocked by CORS policy появляется в консоли браузера, но исправляется на сервере заголовками Access-Control-Allow-Origin и ответом на preflight OPTIONS;
• сетевые: net::ERR_CONNECTION_REFUSED, ERR_NAME_NOT_RESOLVED, ошибки сертификата указывают на инфраструктуру, blocked:mixed-content на фронтенд;
• 200 и сломанный экран: откройте Response. Данные верные, а показаны неверно, значит фронтенд; неверные уже в ответе, значит бэкенд.

Сильный приём: «Copy as cURL» и повтор запроса в терминале или Postman. Воспроизводится без браузера, значит проблема на сервере.

Где спотыкаются

Применяют правило по кодам буквально. 500 в ответ на кривые данные от фронтенда требует двух исправлений: фронтенд не должен так отправлять, а сервер должен отвечать 400.

Заводят CORS на фронтенд, потому что ошибка видна в браузере. Разрешение на кросс-доменный запрос выдаёт сервер, фронтенд может только сменить адрес или ходить через свой прокси.

Прикладывают к багу скриншот экрана без запроса. Нужны URL, метод, тело, статус, время и идентификатор запроса из заголовков: по нему бэкенд найдёт лог, и баг не будет гулять между командами.