Ошибки страница: Страницы ошибок — Экраны — Контур.Гайды

Страницы ошибок — Экраны — Контур.Гайды

Шаблоны дизайна страниц в Figma
HTML-шаблоны страниц

Это страницы, которые сообщают, что сервис не может отобразить контент.

Принципы

Задача команды продукта — сделать так, чтобы пользователь не сталкивался с ошибками в сервисе:

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

Когда использовать

Только для 400-х и 500-x ошибок.

Это коды состояния HTTP, принятые Консорциумом Всемирной паутины (W3C) в 1992 году.
403 — доступ запрещен,
404 — запрашиваемый ресурс не найден,
500 — ошибка сервера, и другие…

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

Такие ошибки нужно показывать прямо в интерфейсе или в модальном окне.

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

Структура страницы

Страница должна отличаться от обычных страниц сервиса, быть короткой и информативной — так пользователь быстрее поймет, что пошло не так.

Страница состоит из блоков:

• Логотип сервиса;
• Заголовок страницы;
• Текстовый блок с причиной ошибки и возможным решением;
• Контакты техподдержки.

Для 404 ошибки можно добавить поиск по сайту, или предложить вариант наиболее близкий к тому, что ввел пользователь. Особенно это актуально для поисковых сервисов.

Связь с сервисом

На странице должны присутствовать лого сервиса и ссылка на главную, либо основные разделы.

Неправильно

Заголовок

Заголовок должен кратко объяснить что случилось.

Рядом с заголовком укажите код ошибки. Это поможет техподдержке быстрее понять, что случилось, если пользователь объясняет проблему словами — по телефону или в чате.

Причина ошибки

Если это необходимо, опишите ошибку чуть подробней, но не углубляйтесь в технические детали. Укажите причину, почему она могла возникнуть.

Неправильно

Запрос URL /sea9679879 не найден на этом сервере

Правильно

Возможно, вы ошиблись, набирая адрес, или страница удалена.

Это не обязательный блок, иногда достаточно заголовка.

Решение

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

Например:

• Вернуться на главную и повторить последнее действие;
• Закрыть браузер и войти еще раз;
• Перезагрузить страницу.

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

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

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

Контакты техподдержки

У пользователя должен быть выбор, как обратиться в техподдержку — отправить сообщение на почту, в чат или заказать обратный звонок.

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

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

Если это массовая ошибка не по вине пользователя, и команда сервиса уже устраняет её, не указывайте контакты техподдержки.

Язык общения

Коротко и понятно объясните, что произошло и что делать. Избегайте технических терминов и сленга. Напишите, что произошло, с точки зрения пользователя, а не с точки зрения системы.

Пользуйтесь правилами редполитики.

Неправильно

Ошибка e-ecb00676. Произошла критическая ошибка.

Извинения

Извиняться нужно, если проблема произошла по нашей вине. Если проблема возникла не по нашей вине, извиняться нельзя.

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

Правильно

Извините, сервис недоступен. Мы знаем о проблеме и уже занимаемся ей.

При ошибке 404, когда пользователь ввел неправильный адрес, или пришел по устаревшей ссылке, мы покажем ошибку без «извините». В таких случаях нужно просто сообщить о проблеме.

Графика

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

Если вы используете в сервисе свои изображения — они должны быть без эмоциональной нагрузки. Постарайтесь избегать использования смайликов и изображений животных.

Не рекомендуется

Шаблоны страниц ошибок в Figma.
HTML-шаблоны страниц

Используйте их как основу для страниц ошибок вашего продукта. Это решение с общими рекомендациями, которое подойдет всем продуктам Контура.

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

Как кастомизировать стандартные страницы ошибок / Хабр

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

Стандартный вид Ошибки 404 в Nginx

Для упрощения процесса, я создал небольшую утилиту (прямая ссылка на проект в GitHub), по сути Node.js скрипт, которая позволяет создавать статические страницы ошибок в собственном дизайне и со своими текстовыми сообщениями. По умолчанию, утилита содержит только один шаблон в минималистичном дизайне (с поддержкой доступности и адаптивности, на сколько это возможно в такой простой странице). Но если вас не устраивает такой дизайн, то вы можете с легкостью изменить его, путем создания собственного: со своими стилями, шрифтами, изображениями и текстами.

Пример страницы для Ошибки 404

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

Для упрощения интеграции, утилита автоматически создает сниппет с конфигурацией веб сервера, который легко может быть добавлен в конфигурацию вашего веб сервера. На текущий момент сниппет создается только для Nginx. Другие виды серверов будут добавлены позже (в качестве альтернативы, вы можете создать Pull Request с таким улучшениями, либо оформить Feature Request).

Использование

В базовом сценарии использования, всё что требуется, это лишь склонировать себе на компьютер репозиторий проекта, установить зависимости Node.js, запустить команду сборки, скопировать полученный результат к себе на сервер и обновить конфигурацию сервера.

$ git clone [email protected]:sapachev/error-pages.git
…
$ npm install --production
…
$ npm run build
…
INFO: Start building process
INFO: Flush build directory '/home/error-pages/dist'
INFO: Compile pages from source data:
 • /home/error-pages/dist/400.html
 • /home/error-pages/dist/401.html
 • /home/error-pages/dist/403.html
 • /home/error-pages/dist/404.html
 • /home/error-pages/dist/410.html
 • /home/error-pages/dist/500.html
 • /home/error-pages/dist/502.html
 • /home/error-pages/dist/503.html
 • /home/error-pages/dist/504.html
INFO: Compile web servers config snippets from source data:
 • /home/error-pages/dist/nginx-error-pages.  conf
INFO: Build Tailwind CSS styles
INFO: Run 'INPUT="/home/error-pages/themes/minimalistic/@assets/css/main.twnd.css" OUTPUT="/home/error-pages/dist/@assets/css/main.css" npm run build:tailwind' command
INFO: Tailwind CSS styles were built
INFO: Copying assets to '/home/error-pages/dist/@assets' directory
INFO: Building process was completed in 1.727s

Продвинутое использование

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

Основная конфигурация утилиты хранится в файле config.json в корневой папке, которую можно менять в соответствии со своими требованиями:

{
  "tailwind": true,
  "theme": "minimalistic",
  "locale": "en"
}

Шаблоны

Все шаблоны хранятся в папке themes, где стандартной темой является minimalistic, которую можно изменить или добавить новую. Каких‑то особых требований к шаблонам страниц нет: каждый шаблон является обыкновенным HTML документом, с внедренными переменными, на месте которых будут текстовки из файлов локализации. Для обработки внедренных переменных используется библиотека mustache.js. Таким образом, если нужно реализовать какую‑то особенную логику в своих шаблонах, то вы можете ознакомиться с документацией этой библиотеки для определения имеющихся возможностей шаблонизации.

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

Стили

Стилизация шаблонов базируется на фреймворке Tailwind CSS. С помощью этого фреймворка, можно быстро описывать стили страниц без необходимости писать отдельный CSS код. Точкой входа для стилей Tailwind должен быть файл themes/<name>/@assets/css/main.twnd.css. Из него в дальнейшем будет создан файл main.css, который содержит скомпилированные и минифицированные стили. В дополнение, можно настроить Tailwind с помощью создания кастомной конфигурации, расположенной в файле theme.tailwind.config.js в корне папки с темой, и описать в ней любые опции Tailwind. Полный список опций Tailwind доступен в документации самого Tailwind.

Однако, если по каким-то причинам использование Tailwind не требуется (например, стили уже описаны ранее в CSS), компиляцию стилей Tailwind можно отключить в основной конфигурации утилиты (файл config.json). В этом случае шаг сборки стилей будет просто пропущен без какого-либо влияния на финальный результат.

Текстовые сообщения и Локализация

Все текстовые сообщения хранятся в JSON файлах, разделенных по признаку языка, и расположены в папке src. Каждая страница создается из соответствующего ей файла локализации вида <Код HTTP>.json (<Код HTTP> – это число, соответствующее коду ошибки HTTP). Таким образом, если нужно создать страницу для кода, который еще не описан, то просто создайте соответствующий JSON файл, содержащий описание этого статуса в соответствующих свойствах.

Любой файл локализации может быть расширен любым количеством дополнительных свойств, которые вам нужно отобразить на странице. Для определения общих свойств, вы можете использовать файл common.json – свойства из этого файла будут применены к каждой странице.

Для локализации страниц, просто создайте новую папку в директории src, содержащую JSON файлы с текстами страниц. Создавая JSON файлы, вы можете описать любой набор HTTP кодов (например, только для 400-ых ошибок) – просто следуйте конвенции именования, и не забывайте выделять общие тексты в файл common.json.

Конфигурации сервера

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

Для использования полученных страниц, остается только скопировать на сервер все файлы из папки dist и включить использование сниппета в уже существующей конфигурации сервера. В соответствии с шаблоном сниппета, все страницы должны быть расположены в папке /usr/share/nginx/html/error-pages. В случае если настройки в снипетта не подходят, то вы можете отредактировать шаблон сниппета в папке

snippets. Так же как и для тем оформления, шаблоны конфигураций поддерживают mustache.js, тем позволяя реализовать в шаблоне любую логику (списки, условия и т. д.).

Сам по себе конфиг, я рекомендую располагать в папке /etc/nginx/snippets/, а для его подключения использовать строчку конфигурации: include /etc/nginx/snippets/nginx-error-pages.conf;. Разумеется, это не более чем рекомендация, т.к. в реальности всё может быть иначе или сложнее.

Ниже приведен простой пример конфигурации веб‑сервера с включенным в нее сниппетом кастомных ошибок:

server {
    server_name example.com;
    access_log /var/log/nginx/example.access.log;
    include /etc/nginx/snippets/nginx-error-pages.conf;
    location / {
        root /data/www;
    }
}

Демо

Посмотреть как выглядят страницы ошибок можно на моем сайте по следующим ссылкам:

• 400 Bad Request

• 401 Unauthorized

• 403 Forbidden

• 404 Not Found

• 410 Gone

• 500 Internal Server Error

• 502 Bad Gateway

• 503 Service Unavailable

• 504 Gateway Timeout

Сообщение об ошибках и запрос новых функций

Код утилиты нельзя назвать каким‑то сложным, однако, несмотря на этот факт, все значимые части покрыты юнит‑тестами. Впрочем, это не является гарантией отсутствия каких‑либо ошибок, поэтому если вы столкнетесь с какими‑то проблемами, то, пожалуйста, сообщите мне о них, через создание Issue в репозитории проекта: https://github.com/sapachev/error‑pages/issues

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

Участие в разработке

Проект открыт для всех желающих, и если у вас есть идеи, а главное желание и возможности их реализовать, то с радостью рассмотрю их в виде Pull Request. Со своей стороны готов предоставить вам поддержку в реализации вашей задумки. Не стесняйтесь спрашивать меня о коде, и возможных решениях вашей идеи.

10 отличных примеров страниц ошибок 404 | by Quickmark

Вот список наиболее креативных и привлекательных страниц ошибок 404, которые заслуживают уважения.

«СТРАНИЦА НЕ НАЙДЕНА» — пожалуй, самое неприятное, что можно увидеть на экране. Это страница, на которую никто не хочет попасть. Долгое время эта страница повторяла слова «разочарование» и всегда печально известна как «последняя страница Интернета».

Идея 404 родилась, как вы уже догадались, в комнате под номером 404, в которой располагались самые первые веб-серверы в ЦЕРНе.

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

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

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

Вот 10 примеров страниц ошибок 404, которые, по нашему мнению, были блестяще спроектированы.

1. Flipping Book

Концепция здесь перекликается с названием веб-сайта FlippingBook. На этой странице с ошибкой 404 рассказывается история супружеской пары, которая потеряла страницу из книги в домашнем хаосе. Напоминает ситуацию типа «Марли и я». Простой сине-белый цвет контрастирует с несколькими тонкими цветовыми вариациями, которые не кажутся слишком тяжелыми.

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

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

2. Behance.net

Эта страница не является страницей ошибки конкретного веб-сайта, а является одним из дизайнов, созданных визуальным дизайнером Майклом Цираки.

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

Для любого поклонника странных вещей эта страница вернет их к «перевернутому» и заставит почувствовать себя принадлежащим к довольно универсальному сообществу. И все любят «принадлежать» чему-то.

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

Бегите домой — отличный навигационный CTA для веб-сайта на тему ужасов, и я всегда ценю хорошую игру слов. 🙂

3. CSS-трюки

Эта страница с ошибкой — одна из моих любимых. Вы видите, что нет таких слов, как 404, ошибка, не найдено и т. д. На самом деле их 9.0020 вообще нет текста в обычном смысле. Тем не менее, ни один человек, использующий веб-сайт, подобный трюкам CSS, не смог бы понять смысл этой страницы. Это очень специфичная для домена страница ошибки , и она напоминает то, что означает веб-сайт, то есть язык веб-стилизации CSS.

Концепция этой страницы должна показать тот факт, что когда ссылка на веб-сайт не работает, разработчик должен изучить код CSS, который находится «за кулисами» веб-страницы. Следовательно, разорванная веб-страница, чтобы показать, что находится под ней, чрезвычайно умна.

4. Kwarter

Kwarter — это мобильная игровая платформа, работающая в режиме реального времени, и

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

Страница с ошибкой сначала начинается с того, что вы чувствуете вину за то, что попали на неработающую страницу, жирным шрифтом спрашивая вас — ВЫ СЧАСТЛИВЫ ТЕПЕРЬ? Но тут же берёт на себя очередь брать вину на себя, что видно из фразы — Наши плохие!

В настольном теннисе топ-спин — это очень агрессивный удар, и «теоретически» топсин может быть достаточно агрессивным, чтобы сломать биту на две части. Следовательно, эта страница имеет идеальный текст , и иллюстрацию . Навигационный CTA находится в контексте всей темы. Это не совсем делает очевидным, куда приведет вас кнопка SERVE AGAIN, но оставляет вас с любопытством, чтобы узнать это самостоятельно.

5. Магнит

Это одна из очень немногих страниц с ошибками, которые заставили меня потратить на нее некоторое время. Их первая страница с ошибкой 404, содержащая только диаграмму Венна, стала вирусной, и они решили изменить ее дизайн, сохранив ту же концепцию. Эта страница с помощью диаграммы Венна объясняет концепцию 404, а затем продолжает объяснять, что такое диаграмма Венна для любителей нематематики. Чрезмерное использование текста на этой странице компенсируется обильным предоставленным информацией.

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

Наконец, в нижнем абзаце они ставят перед вами задачу выяснить ошибку на странице ошибок.

В целом это довольно нетрадиционная и креативная страница ошибок, и мы не удивлены, что она стала вирусной.

6. Marvel

Я знаю, вы думаете о Мстителях, но это Marvel — прототип веб-приложения и мобильного приложения.

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

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

7. Blue Fountain Media

Посетителю этого сайта предлагается два варианта. Он может либо вернуться назад, либо выбрать версию легендарной игры Pacman. Игра имеет правильную форму в цифре 404.

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

8. EmailCenterUk.com

Центр электронной почты Великобритании стал действительно инновационным со своей страницей ошибки 404. Как только вы попадаете на их веб-сайт, вы можете перейти к другим частям сайта или, затаив дыхание, вы можете фактически уволить члена команды разработчиков. Очевидно, это непрекращающаяся шутка, это отличный способ поощрить вовлеченность пользователей на своем веб-сайте. Есть сообщение, которое поможет вам вернуться на домашнюю страницу, если вы настроены прощать. Но что в этом веселого?

Эта страница не слишком фокусирует на CTA, , однако уловка, которую они здесь провернули, безусловно, может простить это.

Вам интересно узнать, что происходит, когда вы кого-то увольняете?

Вот он,

9. Amazon

Эта статья была бы неполной без фотографии очаровательной собаки.

Ши-тцу Соджу пришла, чтобы извиниться перед вами за то, что не смогла найти вашу страницу. Акцент на ИЗВИНИТЕ.

Вы можете Перейти обратно на домашнюю страницу, найти что-то на веб-сайте.

Да, еще забыл упомянуть, что вы можете встретить всех собак Амазонки. Снова отличный метод вовлечения пользователей .

10. Средний

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

Также ни с того ни с сего можно почитать несколько популярных статей о потерянности вообще, а почему бы и нет?

ЗАКЛЮЧЕНИЕ

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

Список страниц с ошибкой 404, упомянутый выше, действительно является ответом на вопрос, как повысить вовлеченность посетителей веб-сайта?

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

Я хотел бы знать ваши любимые страницы ошибок. Не стесняйтесь комментировать свои мысли ниже.

Нравится этот блог? Поделитесь им с друзьями как можно больше.

Создание 404 страниц с точностью до пикселя

Нравится Visual Inspector? Вашим друзьям это тоже понравится.

Распространяйте эту статью как можно больше. Это поможет нам расти органически, и мы будем благодарны.

Siftery предлагает пожизненную подписку на Visual Inspector всего за 49 долларов — https://www.canvasflip.com/visual-spector/siftery/

java — Как указать страницу ошибки по умолчанию в web.xml?

спросил 11 лет, 7 месяцев назад

Изменено 4 года, 10 месяцев назад

Просмотрено 253 тыс. раз

Я использую элемент в web.xml , чтобы указать дружественную страницу ошибок, когда пользователь сталкивается с определенной ошибкой, такой как ошибка с кодом 404:

 <страница-ошибки>
        <код-ошибки>404
        /Error404.html

 

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

• java
• jsp
• сервлеты
• web.xml
• пользовательские страницы ошибок

2

В Servlet 3.0 или новее вы можете просто указать

 <веб-приложение ...>
    <страница-ошибки>
        /general-error.html

  
    

 

Но, поскольку вы все еще используете Servlet 2. 5, нет другого способа, кроме как указать каждую распространенную ошибку HTTP по отдельности. Вам нужно выяснить, с какими ошибками HTTP может столкнуться конечный пользователь. В базовом веб-приложении, например, с использованием HTTP-аутентификации, с отключенным списком каталогов, с использованием пользовательских сервлетов и кода, который может вызывать необработанные исключения или не имеет всех реализованных методов, тогда вы хотели бы установить его для ошибок HTTP 401. , 403, 500 и 503 соответственно.

 <страница-ошибки>
    
    <код-ошибки>401
    /general-error.html

<страница-ошибки>
    
    <код-ошибки>403
    /general-error.html

<страница-ошибки>
    
    <код-ошибки>404
    /Error404.html

<страница-ошибки>
    
    <код-ошибки>500
    /general-error. html

<страница-ошибки>
    
    <код-ошибки>503
    /general-error.html

 

Это должно охватывать наиболее распространенные.

7

Вы также можете сделать что-то подобное:

 <страница-ошибки>
    <код-ошибки>403
    /403.html

<страница-ошибки>
    /error.html

 

Для кода ошибки 403 будет возвращена страница 403.html, а для любого другого кода ошибки будет возвращена страница error.html.

0

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

 <страница-ошибки> <тип-исключения>java.lang.Exception /errorpages/exception.
No related posts.