QHttpNotifications

Перехватывает HTTP-запросы и выводит сообщения об их ошибках и успешных POST/PUT/PATCH запросах на экран пользователя.

С чего начать

Подключите модуль в app.module.ts и импортируйте его:

import { Q_HTTP_ERRORS_HANDLERS, QHttpNotificationsModule, QHttpNotificationsInterceptor } from '@diasoft/qpalette-core';

@NgModule({
  imports: [
    QHttpNotificationsModule.forRoot([])
  ]
})
export class AppModule { }

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

@NgModule({
 
  providers: [
    {
      provide: Q_HTTP_ERRORS_HANDLERS,
      useValue: (req, resp) => {
        /*
          // Ваш перехватчик запросов. Подробнее об описании перехватчиков ниже в документации.
            if (req.url.includes('/my/api/url')) {
              return {
                severity: 'info',
                detail: 'Информация'
              };
            }
            return;
        */
      },
      multi: true
    }
  ]
})
export class SomeModule { }

Кроме того, вы можете динамически добавлять перехватчики:

export class MyComponent {
  constructor() {
    QHttpNotificationsInterceptor.addHandler((req, resp) => {
      /*
        // Ваш перехватчик запросов. Подробнее об описании перехватчиков ниже в документации.
          if (req.url.includes('/my/api/url')) {
            return {
              severity: 'warn',
              detail: 'Предупреждение'
            };
          }
          return;
      */
    });
  }
}

Перехватчики

Перехватчики должны соответствовать типу QHttpNotificationsHandler. Они принимают в качестве параметров HttpRequest и HttpResponse (или HttpErrorResponse), а возвращают QHttpNotification. Интерфейс QHttpNotification имеет следующий вид:

export interface QHttpNotification {
  /**
   * Цвет нотификации. hidden -- отключение нотификации для текущего запроса
   */
  severity?: 'error' | 'warn' | 'info' | 'success' | 'hidden';
  /**
   * Заголовок нотификации
   */
  summary?: string;
  /**
   * Подробная информация нотификации
   */
  detail?: string;
  /**
   * Время жизни в мс
   */
  life?: number;
  /**
   * Иконка
   */
  icon?: string;
}

Рассмотрим примеры перехватчиков.

Следующий Перехватчик проверит доступность некоего API, но, в случае его недоступности, скроет сообщение от пользователя:

(request: HttpRequest<any>, response: HttpResponse<any> | HttpErrorResponse) => {
    if (request.url.includes('/check/api/availability') && response.status === 404) {
        return {
            severity: 'hidden'
        };
    }
    return; // использовать перехватчик по умолчанию
}

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

(request: HttpRequest<any>, response: HttpResponse<any> | HttpErrorResponse) => {
    if (request.url.includes('/some/api') && response.status === 500) {
        return {
            severity: 'error',
            life: 30_000, // 30 секунд
            icon: 'qi-bug',
            summary: 'Произошла ошибка сервера', // Заголовок
            detail: response.error?.errorData?.errorMessage // Подробная информация
        };
    }
    return;
}

Ваши перехватчики могут содержать в себе множество обработчиков:

(request: HttpRequest<any>, response: HttpResponse<any> | HttpErrorResponse) => {
    if (request.url.includes('/some/api') && response.status === 500) {
        return {
            severity: 'error',
            life: 30_000, // 30 секунд
            icon: 'qi-bug',
            summary: 'Произошла ошибка сервера', // Заголовок
            detail: response.error?.errorData?.errorMessage // Подробная информация
        };
    }
 
    else if (response.status >= 300) {
      // Имеют место быть и более сложные перехватчики
      const url = new URL(request.url, request.url.startsWith('/api') ? new URL(location.origin) : undefined);
      return {
        severity: 'error',
        life: 20_000,
        icon: 'pi-times-circle-outlined',
        summary: `${ request.method } ${ url.pathname.split('/').slice(-3).join('/') }`,
        detail: response.error?.errorData?.errorMessage || response.error?.error || response.message
      };
    }
 
    return {
      // Вы можете скрывать все остальные сообщения и использовать собственные нотификации для отображения ошибок
      severity: 'hidden'
    };
}

Кнопка настройки таблицы SSE-клиент