Banx. Основы верстки в Angular на примере создания страниц ошибок

В данной статье поговорим об основах верстки в Angular при использовании монорепозитория Nx. Создадим несколько страниц для отображения ошибок, используя shared библиотеку для компонентов.

Основные типы отображаемых ошибок

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

404

Есть несколько стандартных HTTP ошибок, которые могут быть показаны пользователю.

Ошибка 404, которая говорит о том, что запрашиваемая страница не найдена. Обычно в Angular это означает, что не найден подходящий маршрут (роут).

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

Также 404 ошибку может вернуть и httpClient, когда будет пытаться получить ответ от сервера. В данном случае, 404 будет означать аналогичную проблему, но только на стороне сервера, пытаясь выполнить запрос, соответствующий контроллер не был найден и поэтому сервер не может вернуть корректный ответ, со статусом 200.

Заметим, что бэкенд разработчики могут по разному интерпретировать статус 404, который формально должен сообщать клиенту о запросе с несуществующим адресом. Вместо этого разработчики решают отдавать статус 404 для сущностей, которые не найдены. Например, необходимо загрузить сущность по id (/posts/45). И при обращении к этому API, будет получена 404 ошибка, которая на самом деле должна быть 400, где в теле ответа нужно было вернуть ошибку, с описанием, что сущность с указанным id не найдена.
Если приложение будет мешать статусы приложения и сервера, то тогда мониторинг не сможет адекватно реагировать на изменения. Например, вышла новая версия API, где разработчики поменяли публичные методы, и для того, чтобы понять какие запросы обращаются к старым endpoint’ам мониторинг вместо того, чтобы сообщить о неверных запросах, в логи будет писать 404 для сущностей, которые не найдены, что формально является корректным поведением приложения.

403

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

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

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

500

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

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

Создание страницы 404

Создадим станицу для вывода ошибки 404. Структура будет следующей:

banx
├── apps
│   └── russian
│       ├── cabinet
│       |   └── errors
│       └── cabinet-e2e
└── libs
    └── russian
        └── errors
           └── not-found
               └── page

Для этого запустим команду:

ng g lib russian/errors/not-found/page

Как и ранее, уберем префикс “russian” из названия модуля, приведя его к errors-not-found-page-page.module.ts.

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

Создадим компонент, запустив команду:

ng g c not-found-page --project=russian-errors-not-found-page --skip-import

Добавим компонент в маршрутизатор:

А также подключим в ErrorsNotFoundPagePageModule:

Теперь создадим ленивые модули для приложения. Для это добавим модуль errors.module.ts:

Добавим соответствующий модуль для маршрутизации ErrorsRoutingModule:

И подключим ленивый модуль в главном модуле маршрутизации AppRoutingModule:

const routes: Routes = [
  ...,
 {
  path: '',
  loadChildren: () => import('./errors/errors.module').then((modules) => modules.ErrorsModule),
},
];

Быстро накидаем структуру и добавим немного стилей:

Если запустить проект и зайти на страницу, которой не существует, то получим следующее:

Но так как еще будет две страницы, с подобным дизайном, то создадим общие (shared) компоненты, которые можно было бы переиспользовать.

Сначала создадим shared библиотеку, запустив команду:

ng g lib russian/errors/shared

Затем, сгенерируем соответствующие компоненты:

ng g c error-logo --project=russian-errors-shared
ng g c error-status --project=russian-errors-shared
ng g c error-status --project=russian-errors-shared
ng g c error-title --project=russian-errors-shared
ng g c error-hint --project=russian-errors-shared
ng g c error-links --project=russian-errors-shared
ng g c error-application --project=russian-errors-shared

Теперь поэтапно перенесем компоненты.

Подключим на странице компонента NotFoundPageComponent:

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

Запустим:

И аналогично для 403 ошибки:

Резюме

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

Исходники

Все исходники находятся на github, в репозитории:

Fafnur/banx

Для того, чтобы посмотреть состояние проекта на момент написания статьи, нужно выбрать соответствующий тег — errors.

git checkout errors

Ссылки

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

Medium: https://medium.com/fafnur
Добавляйтесь в группу ВК: https://vk.com/fafnur
Добавляйтесь в группу в Fb: https://www.facebook.com/groups/fafnur/
Телеграм канал: https://t.me/f_a_f_n_u_r
Twitter: https://twitter.com/Fafnur1
Instagram: https://www.instagram.com/fafnur
LinkedIn: https://www.linkedin.com/in/fafnur

Предыдущие статьи:

1. Banx. Создание Nx workspace для Angular.
2. Banx. Настройка базовых правил в eslint в Nx в Angular
3. Banx. Структура Angular приложения в монорепозитории Nx
4. Banx. Организация стилей в Angular
5. Banx. Создание базового лейаута в Angular