Ошибка 404 иллюстрации

Ошибки при работе сайта разделяются на 2 большие группы: ошибки на стороне клиента и ошибки на стороне сервера. Ошибки клиентской стороны имеют коды ответа протокола HTTP из серии 4xx, ошибки сервера — 5xx.  Коды ответов сгруппированы логически на несколько неформальных групп для упрощения восприятия. Итак, какие же ошибки подстерегают нас при серфинге в Интернет?

Ресурс не найден (код ошибки 404)

Самая распространенная и простая в обработке ошибка, которая возникает, когда некоторый ресурс на сайте меняет свое расположение.

Причины:

• страница сайта была удалена или перемещена;
• заголовок страницы был изменен, и система управления сайтом автоматически изменила ее URI (универсальный идентификатор ресурса);
• запрошенный ресурс действительно отсутствует, т.к. его адрес был введен пользователем вручную неверно;
• нарушена целостность сайта в результате проблем с программным или аппаратным обеспечением, например, стерт или недоступен индексный файл, картинка, видеоролик и т.д.

Что делать:

• обязательно создать пользовательскую страницу для данного типа ошибки и дать в ней ссылку на главную страницу сайта и/или поисковую форму;
• при переименовании страниц и изменении их URI создать 301-ый редирект на новый адрес;
• периодически проверять сайт на наличие так называемых «битых» ссылок и исправлять их;
• периодически создавать резервные копии файлов сайта, чтобы при обнаружении «битой» ссылки на существовавший ранее файл можно было его восстановить.

Также есть понятие «программной» 404-ой ошибки (soft 404 error), которая возникает в случае, если программист по незнанию при отсутствии некоторого ресурса возвращает код успеха 200 и сообщение о том, что такая страница не найдена. Ситуация крайне неприятная, т.к. поисковые системы могут расценить это как большое количество задвоенных страниц, а найти «программные» ошибки с помощью ПО для обнаружения «битых» ссылок без дополнительных действий нельзя. Здесь совет один: если ресурс не найден, должен возвращаться именно код 404.

Внутренняя ошибка сервера (код 500)

Это зачастую довольно сложная техническая проблема, для решения которой без глубоких знаний в веб-разработке не обойтись. Код 500 возвращается, если есть проблема на стороне сервера, для которой не предусмотрен никакой другой код из группы 5xx.

Причины:

• ошибки в программном коде сайта;
• проблемы с настройкой веб-сервера.

Что делать:

• не менять без крайней необходимости и соответствующих знаний код системы управления сайтом и настройки веб-сервера;
• тестировать код сайта перед публикацией в Сети, тестировать функциональность сайта после публикации.

Сервис недоступен (код ошибки 503)

Причины:

• проблемы с серверным программным обеспечение: веб-сервер, базы данных, кеширующие прокси-сервера, акселераторы выполнения кода;
• сервер действительно отсутствует в Сети из-за проблем с его аппаратурой, питанием, сетью, в которой он находится.

Что делать:

• следить за состоянием сервера и сайта с помощью соответствующего ПО и своевременно исправлять нештатные ситуации.

Ошибка при маршрутизации запроса (код ошибки 502)

Причины:

• проблемы с сетью на участке между клиентом и сервером;
• проблемы в работе одного из связанных с работой сайта серверов.

Что делать:

• проверить, что у Вас точно работает Интернет или локальная сеть, если целевой сайт находится во внутренней сети организации (Интранет);
• проверить работоспособность сайта, подключившись к другому провайдеру или через другой прокси-сервер;
• веб-мастеру следует проверить, что все сервера, на которых работает сайт, нормально работают.

Ошибки, связанные со временем ожидания ответа (коды ошибок 408, 504, 522)

Причины:

• сервер не дождался запроса от клиента (код 408);
• не получил ответ от следующего в цепочке сервера (код 504);
• соединение клиента с сервером вообще не было установлено (код 522).

В таком случае клиенту также есть смысл повторить свой запрос через некоторое время, больше от него ничего не зависит. Веб-мастеру нужно проверить связь между серверами, которые принимают участие в работе его сайта, и их работоспособность в принципе.

Ошибки авторизации (коды 401, 403, 407, 511)

Причины:

• для доступа к странице сайта требуется авторизация на нем самом (код 401) либо в прокси-сервере (коды 407 и 511);
• авторизация успешна, но для данного пользователя доступ запрещен (код 403).

Что делать:

• ввести правильные имя пользователя и пароль, если их запрашивает сайт через специальное окно в браузере (для кода 401);
• при настройке соединения через прокси-сервер указать действующие имя пользователя и пароль (коды 407 и 511);
• в случае получения кода ответа 403 нужно использовать другие имя пользователя  и пароль, если они известны, либо же ничего не делать, если 403-й код получен в ответ на попытку просмотреть список содержимого каталога на веб-сервере, отображение которого запрещено серверными настройкам.

Ошибки запроса к серверу (коды 400, 405, 406, 409, 411-417, 501, 505, 510 и многие другие)

Данные ошибки возвращаются в случае, если запрос получен, не может быть обработан сервером. Причины могут быть очень разными и не всегда могут быть правильно интерпретированы со стороны клиента.

Что делать:

• повторить запрос, который не был выполнен с первого раза (например, повторно отправить форму в браузере);
• поменять клиентское приложение, если это возможно (например, выполнить действия в другом браузере);
• повторить свой запрос позже;
• если ничего не помогает, нужно обратиться в службу поддержки того ресурса, при работе с которым возникают проблемы.

Редактируем страницы ошибок в CPanel

Если система управления сайтом не позволяет управлять страницами ошибок, которые возникают на сайте, используйте панель управления хостингом. Как это сделать, будет показано на примере широко распространенной системы CPanel.

В CPanel отредактировать страницы ошибок можно зайдя по соответствующей ссылке в секции «Дополнительно».

Здесь по умолчанию открывается вкладка с наиболее распространенными кодами ошибок: неверный запрос (ошибка 400), проблемы с доступом (ошибки 401 и 403), страницы не найдена (ошибка 404) и внутренняя ошибка сервера (ошибка 500). Если нужны дополнительные коды, то выбираем вкладку справа.

Для редактирования страницы с ошибкой выбираем соответствующий код, например, 404 и вводим текст, который будет отображаться вместо стандартной страницы с ошибкой, которую выводит веб-сервер.

Создание пользовательских страниц с описанием ошибок через панель управления хостингом – не самый лучший вариант. Предпочтительнее, если система управления сайтом позволяет создать такую страницу в едином дизайне с основным сайтом. Рассмотрим эту  возможность на примере некоторых распространенных бесплатных CMS (систем управления сайтом).

Управление ошибками в Joomla

Система управления сайтом Joomla 3.1.5 по умолчанию обрабатывает ошибку 404 и показывает страницу, которая описана в файле error.php в каталоге с темой.

Кроме встроенной возможности CMS, веб-разработчик может предоставить пользователю настраиваемую страницу для ошибки 404, которая будет полностью повторять дизайн сайта с заголовком, боковыми панелями, меню и подвалом. Нужно создать эту страницу в административной панели сайта и немного изменить код стандартного файла error.php. Вот такой результат может получиться в этом случае:  контент данной страницы настраивается в админ-панели любым уполномоченным пользователем, и при этом возвращается правильный код ответа протокола HTTP – 404.

Управление ошибками в WordPress

В самой популярной системе для создания блогов встроить страницу с 404-ой ошибкой в дизайн сайта совсем не трудно. Достаточно создать файл 404.php в каталоге с темой и внести в него рекомендованный в документации код. Ниже представлен пример создания такой страницы в дизайне сайта.

Важность управления ошибками для веб-мастера

Постоянный мониторинг и грамотная обработка ошибок на сайте очень важны, т.к. это напрямую влияет на удобство его использования посетителями и отношение к нему поисковых систем. Одна ошибка за раз может перечеркнуть месяцы работы SEO-оптимизаторов, поэтому обязательно правильно возвращайте код ошибки при проблемах на сайте и уделите время для настройки страницы ошибок через панель управления хостингом или, что предпочтительнее, используйте возможности CMS, на которой работает сайт.

Материалы по теме

1. Краткое описание HTTP-кодов ответа.
2. Спецификация протокола HTTP версии 1.1 — RFC 2616.
3. Описание кода ошибки 404.
4. Описание и примеры дизайна страницы с 404-ой ошибкой.
5. Описание и причины ошибки 502 (ссылки, http://www.wikireality.ru/wiki/502_Bad_Gateway, http://blog.pcmag.ru/node/601)
6. Описание и причины ошибки 503.
7. Создание собственной страницы для 404-ой ошибки в Joomla.
8. Руководство по созданию страницы для ошибки 404 в Joomla.
9. Создание собственной страницы для 404-ой ошибки в WordPress.

5 инструментов, которые помогут найти ошибки на сайте

Традиционно ошибки, обратная связь от клиентов и запросы на нововведения и правки обсуждаются в длинных переписках или встречах, на которых инициируется следующая фаза разработки, в которой реализуются поднятые вопросы.

Но последовательность «намылить, сполоснуть, повторить» работает медленно: отчёты об ошибке надо обработать, задокументировать, сделать скриншоты, принять решение, что делать, и затем поставить задачу.

Гораздо более эффективно — как можно раньше получить обратную связь и обработать её параллельно с процессом разработки. Prostobiz предлагает вам рассмотреть варианты.

Современный путь отчёта об ошибках

Сейчас доступны отличные решения, такие как встроенные интерфейсы, позволяющие заказчикам, тестировщикам и пользователям отправлять отчёты об ошибках, давать обратную связь касательно дизайна и предлагать нововведения прямо из браузера. Нет необходимости вручную делать снимки экрана, сохранять какие-либо данные и т.д.

Такой подход к отчётам об ошибках в высшей мере уничтожает ручное документирование, отслеживание, обработку данных, создание скриншотов, спецификаций и долгие совещания, отбирающие ценное время разработчиков.

К тому же этими инструментами могут пользоваться все участники проекта: заказчики, менеджеры, дизайнеры и разработчики, причём одновременно. Правами доступа легко можно управлять, отчёты генерируются автоматически, зачастую реализована интеграция с такими сервисами, как Basecamp, Trello, GitHub.

Рассмотрим некоторые из таких инструментов подробнее.

Usersnap

Согласно сайту Usersnap, этот сервис является «отчётом об ошибках для всех, работающих над веб-проектами». Настроить Usersnap на работу с вашим проектом просто: необходимо скопировать и вставить готовый сниппет на JavaScript’е или установить расширение для Chrome или Firefox.

После установки, Usersnap добавляет кнопку «Feedback» на вашу веб-страницу. Далее клик на кнопке покажет панель с различными инструментами комментирования, помогающими оставлять обратную связь в виде текста и рисунков.

Одним из полезных инструментов сервиса Usersnap является Console Recorder, сохраняющий ошибки и другие потенциально ценные данные, полученные с помощью консоли разработчика.

Usersnap работает с Asana, Basecamp, GitHub.

Стоимость использования начинается от $19 в месяц. Самый дорогой пакет — $99 в месяц. Интеграция Usersnap с другими сервисами требует как минимум $49 в месяц.

BugHerd

Когда вы начнёте пользоваться BugHerd’ом вы быстро поймёте, что авторы сервиса потратили много времени, упрощая процесс отправки сообщения об ошибках и обратной связи. Как и Usersnap, данный сервис может быть установлен как сниппет на JavaScript или расширение для браузера.

При установке BugHerd’а запускается мастер установки, направляющий вас в этом процессе.

После установки, интерфейс сервиса появляется в боковой панели браузера. Самым важным инструментом является кнопка «+», позволяющая выбирать любой элемент HTML на странице и добавлять к нему комментарии.

Также BugHerd добавляет цветные маркеры на веб-странице для быстрой и лёгкой визуализации статуса каждой задачи.

Ответственный за устранение ошибки назначается по ходу просмотра проекта.

После отправки отчёта об ошибке создаётся новая «карточка», к которой можно получить доступ из интерфейса администратора BugHerd’а.

Сервис интегрируется с Basecamp, GitHub, Campfire и другими сервисами управления проектами кроме Trello.

В самом BugHerd’е неплохо реализованы функции управления проектами, так что интеграция с другими сервисами не критична.

Стоимость использования начинается с $29 в месяц для 5 пользователей и доходит до $180 для 50 пользователей.

BugMuncher

BugMuncher — это минималистский инструмент для ведения отчётов об ошибках. Устанавливается с помощью готового сниппета на JavaScript’е, расширений для браузеров не существует. Весь процесс установки подробно описан.

Подобно другим сервисам ведения отчётов об ошибках, BugMuncher добавляет кнопку «Feedback!» на страницу вашего проекта. Клик по кнопке отображает в модальном окне два инструмента: «Подсветить (Highlight)» и «Затемнить (Black Out)».

Во время отправки сообщения обратной связи, пользователю также необходимо ввести электронный адрес. После этого скриншот передаётся сервису BugMuncher вместе с такой сопутствующей информацией, такой как название, версия и размер открытого окна браузера, последовательность кликов и т.д.

BugMuncher не совсем корректно работает с браузером Chrome: подсвеченные и затемнённые области отображаются со смещением.

Сервис интегрируется с Trello, GitHub и Zendesk’ом, но для этого нужна подписка на средний план стоимостью $49.

Стоимость использования начинается от $19 в месяц — до 150 отчётов об ошибках. Максимальный пакет стоит $99 в месяц, и вы можете использовать логотип своей компании вместо логотипа BugMuncher’а.

Redline

Redline устанавливается в ваш проект с помощью сниппета на JavaScript’е.

Сервис предлагает два инструмента: размещение меток и комментирование.

После отправки сообщения об ошибке пользователь получит ссылку на страницу с описанием и скриншотом. Хотя этот способ сотрудничества удобен, то, что сообщения находятся в свободном доступе, оттолкнёт от использования Redline’а и заказчиков, и исполнителей. Но если вам нужен простой способ передачи некритичных сообщений об ошибках, Redline справится с этим.

Сервис интегрируется с Basecamp, Trello, Jira, GitHub и другими сторонними сервисами.

Стоимость подписки начинается от $19 в месяц и, даже начиная с самого простого плана, пользователи получают доступ к поддержке по SSL и бексонечному количеству проектов. API, настройки безопасности и подсветка элементов доступны для подписчиков плана Enterprise (стоимость на сайте не указана).

InVisionLiveCapture

InVision заработала свою репутацию за то, что этот сервис является самым тщательно продуманным, включающим в себя инструменты прототипирования и управления проектами. Интеграция с сервисами третьих сторон возможна благодаря так называемому Live Embed-коду.

Несколько месяцев назад InVision ввела в действие функцию LiveCapture — расширение для Chrome, собирающее информацию и скриншоты для отправки сообщений об ошибках и обратной связи.

Сам процесс установки Live Capture простой и быстрый. Сервис сохраняет весь экран, и после авторизации в InVision’е возможно комментирование и приглашение других пользователей к сотрудничеству.

InVision интегрируется с большинством популярных сервисов, таких как Basecamp, Trello, Slack. Кроме функций отправки сообщений об ошибках и обратной связи, InVision может сохранять различные версии дизайна, создавать прототипы и т.д.

Стоимость начинается от $15 в месяц, максимальный план стоит $100 и разрешает работу пяти сотрудников.

Заключение

Возможность отправлять сообщения об ошибках и иметь обратную связь прямо из браузера — отличное и простое решение: нет необходимости описывать каждую ошибку, каждое пожелание, достаточно указать на неё прямо на веб-странице и добавить небольшой комментарий.

Usersnap интуитивно понятен, может быть интегрирован с 20 другими сервисами, что хорошо для гибкости. Возможность получать дополнительную информацию о сессии работы тоже весьма полезна, так что Usersnap можно назвать победителем.

Стиль организации сообщений об ошибках BugHerd’а, называемый «Канбан», аккуратен. Также неплох сервис управления сообщениями об ошибках.

Redline и BugMuncher обладают набором простых функций, подходящих для процесса однопользовальского управления и разработки, например, для фрилансеров. В случае необходимости командной работы, потребуется переключиться на сервис с большим количеством функций или подключиться к какому-либо сервису, предоставляющему такие возможности.

InVision не подходит на 100% для работы с отчётами об ошибках. Хотя InVision LiveCapture и позволяет сохранять снимки экранов, он не позволяет пользователям оставлять комментарии без авторизации. Но InVision сам по себе полноценная платформа для работы с веб-проектами.

Материал с сайта sixrevisions.com. Перевод: Константин Войцеховский