Коды ответа в spa
Семь из десяти приложений неправильно обрабатывают code ответа от сервера в интернет-протоколе HTTP. Результат: 30% пользователей не возвращаются в приложение вовсе. Пользователь кликает в SPA приложении, отправляет запрос на сервер, и сервер возвращает ответ сервера c кодом состояния — приложение просто не знает, что делать с полученным ответом. Белый экран, крах или ничего не происходит. Юзер уходит и больше не возвращается никогда. Любой ответ на запрос от сервера содержит определенный важный код: 200 OK (успешно обработан), 404 Not Found (удалено), 500 Internal Server Error (ошибка сервера). Эти коды ответа в spa — язык данного протокола между браузером и сервером. Обрабатываете неправильно, приложение упадет. В этой статье разберемся, что означает каждый код состояния HTTP в вариантов ответов, и как правильно обрабатывать запрос в SPA для достижения успеха.
Четыре категории кодов состояния
Любой полученный ответ от сервера содержит определенный код состояния, который указывает на результат обработки запроса клиента. Каждый ответа по протоколу интернета — это сигнал браузеру о том, что произошло на стороне сервера. Коды состояния HTTP поделены на четыре основные категории и варианты:
2xx — запрос успешно обработан
Браузер отправляет запрос на сервер, и сервер выполнил его без ошибок и проблем. Требуемые данные получены, новый ресурс создан или существующий обновлён. Приложение получает полученную информацию из теле ответа и может продолжать работу согласно плану.
3xx — перенаправление на другой адрес и переадресации
Запрошенный ресурс находится в другом месте на стороне сервера. Сервер указывает браузеру отправить новый запрос по другому адресу или URL адресу с помощью заголовка ответа Location. Обычно браузер делает эту переадресацию автоматически без участия приложения в процессе обработки.
4xx — ошибка на стороне клиента и проблемы с запросом
Приложение отправляет неправильный запрос к серверу (bad request) или плохой запрос от клиента. Возможно, синтаксис некорректный, отсутствуют необходимые параметры или поля заголовка запроса, или у пользователя просто нет доступа к запрашиваемому ресурсу и определенных прав.
5xx — ошибка на стороне сервера и внутренняя проблема
При обработке запроса произошла внутренняя ошибка на стороне сервера. Это означает, что сервер отказывается успешно обработать даже правильный запрос из-за технического сбоя, перегрузки сервера или внутренней проблемы системы.
Топ кодов ответа и практическая обработка
200 OK — самый частый код состояния ответа и стандартный успешный результат. Запрос выполнен успешно, и ответ 200 содержит все запрошенные данные в теле ответа. Когда вы открываете страницу товара в e-commerce, браузер отправляет метод GET запроса с ID товара, сервер находит ресурс в своей базе данных и возвращает ответ со статусом 200 с полной информацией. Приложение отображает полученные данные и информацию пользователю без дополнительных проверок.
201 Created — используется при успешном создании нового ресурса на сервере с нового объекта. Отличие от ответа 200 OK в том, что этот код означает не просто успешную обработку, а конкретное создание нового объекта в базе данных. Часто в заголовке ответа содержится Location с адресом нового ресурса. Пример: вы отправляете POST запрос с данными нового товара — сервер создаёт товар и возвращает код ответа 201 Created со ссылкой. Приложение перенаправляет пользователя на страницу товара.
204 No Content — запрос выполнен успешно, но отсутствует содержимое в теле ответа и данных. Используется при удалении ресурса или при обновлении, когда сервер просто подтверждает действие пользователя. Приложение должна обновить интерфейс без ожидания новых данных от сервера. Например, при DELETE запросе пользователь удаляет комментарий — сервер возвращает 204 No Content, и приложение убирает комментарий со страницы.
301 Moved Permanently и 302 Found — перенаправления на другой адрес и переадресация. 301 Moved Permanently указывает на постоянное перемещение — браузер должен помнить новый адрес ресурса. 302 Found — временная переадресация. Заголовок запроса содержит Location с новым URL адресом, браузер автоматически отправляет новый запрос. Обычно это работает без участия приложения и требуемой конфигурации.
400 Bad Request — неправильный формат запроса к серверу или ошибка на стороне клиента при передачи данных. Вы отправили данные с ошибками: обязательные поля заголовка отсутствуют, неверный синтаксис или неправильный тип данных в теле запроса. Приложение должна проверить все поля перед отправкой и показать понятное сообщение об ошибке пользователю в виде сообщения. Пример: форма регистрация с пустым email — сервер возвращает 400 Bad Request, приложение подсвечивает поле красным.
401 Unauthorized — требуется аутентификация и валидные учётные данные (authentication required). Пользователь не авторизован, или сессия истекла и требует повторной проверки. В социальной сети после неактивности сессия истекает — ответ 401 Unauthorized переадресует пользователя на страницу входа для аутентификации. Это критично для security — запрос требует валидных данных и определенных прав.
403 Forbidden — доступ к запрошенному ресурсу запрещён или ограничен на текущем уровне доступа. Пользователь авторизован, но у него нет прав доступа к этому контенту или ресурсу. Например, вы не можете открыть приватный профиль или удалить чужой комментарий. Сервер вернёт 403 Forbidden, и приложение показывает сообщение: «у вас нет доступа к ресурсу». Это отличается от 401 — пользователь авторизован, но доступ закрыт.
404 Not Found — запрошенный ресурс не существует или был удален из базы данных и упразднен. Один из распространённых кодов ответа на практике в интернете. Когда ищете товар, удалённый из каталога, сервер вернёт 404 Not Found. Приложение показывает дружелюбную страницу с предложением поискать другой товар или вернуться в каталог. «Товар снят с продажи» — результат для пользователя.
429 Too Many Requests — превышен лимит на количество запросов, отправлено слишком много запросов одновременно к серверу. API ограничевает количество запросов в единицу времени, чтобы защитить сервер от перегрузки и перегрузки ресурсов. Если приложение отправляет слишком много запросов в секунду, сервер вернёт ответ 429. Заголовок ответа содержит Retry-After с информацией о времени повтора. Приложение должна замедлить отправку запроса или показать сообщение пользователю.
500 Internal Server Error — внутренняя ошибка на стороне сервера, критический server error и отказ сервера. Это опасная ошибка, потому что неизвестно состояние данных и текущим состоянием системы. При переводе денег в банке может случиться 500 Internal Server Error — деньги списаны, но не поступили. Приложение должна дать возможность повторить действие и предложить контакты поддержки при повторении ошибки.
502 Bad Gateway — промежуточный прокси сервер не получил ответ от основного сервера и не смог обработать запрос. Когда между браузером и основным сервером находится промежуточный сервер-шлюз и он не может обработать запрос, возникает 502 Bad Gateway. Обычно это временная проблема с соединением между серверами в сети.
503 Service Unavailable — сервис недоступен и не готов обрабатывать запросы пользователя. Сервер перегружен, идёт техническое обслуживание, или произошла внутренняя ошибка, требующая остановки. Приложение показывает пользователю: «сервис временно недоступен» и предлагает повторить попытку позже в будущем.
Влияние на user experience
Каждый ответ на запрос требует разной реакции приложения. При ответе 2xx просто покажите результат. При кодах состояния 3xx пустите перенаправление. При 4xx выведите понятную ошибку с подсказкой в виде сообщения на языке, понятном пользователю. При 5xx предложите повторить попытку и дайте контакты поддержки и информационные материалы.
Неправильная обработка убивает опыт пользователя совсем. Не показывайте технические ошибки — переведите их на понятный язык, который поймет обычный пользователь. Юзер не знает, что означает 401 или 429. Он просто видит: «что-то не работает». Если приложение правильно обрабатывает каждый код ответа от сервера, люди остаются, если нет — уходят в конкурентов.