Сайт визитка на Angular. Страницы ошибок.

В данной статье разберем создание страниц ошибок.

Обычно в приложении есть по крайней мере два типа ошибок:

• Ошибка навигации — Страница не найдена (404);
• Ошибка в процессе выполнения запроса к API — Серверная ошибка (500).

Каждая из ошибок формально не дает пользоваться приложением полноценно.

Для обработки 404, Angular ищет специальный роут (**), который должен сообщить пользователю, что страница не найдена.

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

Errors UI

Добавим компоненты и модули для отображения данных типов ошибок.

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

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

Error Cart

Создадим библиотеку общих компонентов:

nx g lib errors/ui/card

Добавим компонент:

nx g c error-card --project=errors-ui-card

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

Error Code

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

nx g m error-code --project=errors-ui-card
nx g c error-code --project=errors-ui-card

Error Description

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

nx g m error-description --project=errors-ui-card
nx g c error-description --project=errors-ui-card

Error Links

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

nx g m error-links --project=errors-ui-card
nx g c error-links --project=errors-ui-card

Error Message

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

nx g m error-message --project=errors-ui-card
nx g c error-message --project=errors-ui-card

Error Title

Добавим модуль и компонент для отображения заголовки ошибки:

nx g m error-title --project=errors-ui-card
nx g c error-title --project=errors-ui-card

Страница 404

Создадим библиотеку:

nx g lib errors/not-found/page

Добавим компонент:

nx g c error-not-found-page --project=errors-not-found-page

Используя карточку ошибки, добавили соответствующие статусы и описания на страницу ошибки:

<banshop-error-card color="primary">
  <banshop-error-code>404</banshop-error-code>
  <banshop-error-title i18n="Error not found|Title">
    Page not found
  </banshop-error-title>
  <banshop-error-description i18n="Error not found|Description">
    Sorry, the requested page was not found.
  </banshop-error-description>
  <banshop-error-links>
    <a 
      mat-raised-button
      color="primary"
      [routerLink]="paths.home | path"
      i18n="Error page|Link home">
      Go to the home page
    </a>
  </banshop-error-links>
</banshop-error-card>

Так как для SEO важны статусы ответов, то добавим 404 для страницы ошибки:

export class NotFoundPageComponent implements OnInit {
  constructor(
   @Inject(PATHS) public paths: NavigationPaths,
   @Optional() @Inject(RESPONSE) private response: Response
  ) {}

  ngOnInit(): void {
    this.response?.status(404);
  }
}

В результате получим страницу:

Страница 500

Создадим библиотеку:

nx g lib errors/server-error/page

Добавим компонент:

nx g c error-server-error-page --project=errors-server-error-page

Аналогично странице 404, добавим описание ошибок:

<banshop-error-card color="danger">
  <banshop-error-code>500</banshop-error-code>
  <banshop-error-title i18n="Error server error|Title">
   Internal server error
  </banshop-error-title>
  <banshop-error-description i18n="Error server error|Description">
    If you’re facing some issues while using our service you’re unable to solve yourself, please contact our customer service department by sending a message to 
    <a 
      banshop-link 
      [routerLink]="paths.support | path">
      support
    </a>. 
    We’ll try to do our best as soon as we’ll consider your appeal.
  </banshop-error-description>
  <banshop-error-links>
    <a 
      mat-raised-button 
      color="warn" 
      [routerLink]="paths.home | path"
      i18n="Error page|Link home">
     Go to the home page
    </a>
  </banshop-error-links>
</banshop-error-card>

В итоге получится страница:

Errors Interceptors

Для того, чтобы реагировать на 500-е ошибки, добавим interceptor.

Добавим библиотеку:

nx g lib errors/interceptors

Создадим файл server-error.interceptor.ts:

Как видно из реализации, interceptor создает подписку на отслеживание каждого запроса.

intercept(req: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
  return next.handle(req).pipe(
    catchError((error: HttpErrorResponse) => {
      if (this.platformService.isBrowser && error.status === 500) {
        const context: Partial<ErrorContext> = { error, url: error.url ?? 'unknown' };

        if (req?.body) {
          context.body = req.body;
        }
        if (req?.params) {
          context.params = req.params;
        }
        if (req?.url) {
          context.reqUrl = req.urlWithParams;
        }

        void this.navigationService.navigateByUrl(this.navigationService.getPaths().serverError);
      }

      return throwError(() => error);
    })
  );
}

Если запрос вернулся со статусом 500, то тогда клиент перенаправляется на страницу /server-error.

Errors Pages

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

Добавим библиотеку:

nx g lib errors/pages

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

const routes: Routes = [
  {
    path: '',
    component: LayoutComponent,
    children: [
      ...
      {
        path: '',
        loadChildren: () => import('@banshop/errors/pages').then(
          (modules) => modules.ErrorsPagesModule
        ),
      },
    ],
  },
];

Ссылки

Оглавление

Предыдущая статья — Модуль чата.

Следующая статья — Настройка локализации.

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

GitHub — Fafnur/banshop: Пример сайта визитки на Angular, вместе с Angular Universal и локализацией

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

Подписывайтесь на блог, чтобы не пропустить новые статьи про Angular, и веб-разработку. Medium | Telegram| VK |Tw| Ln