Metric и его дженерик-параметры

В библиотеке Web Vitals основным элементом для работы с метриками является объект Metric. Он представляет собой структуру данных, которая описывает конкретный показатель производительности веб-страницы и его текущие значения. Metric позволяет централизованно хранить и обрабатывать информацию о метриках, обеспечивая удобный интерфейс для интеграции с аналитическими инструментами и пользовательскими скриптами.

Структура объекта Metric

Объект Metric имеет следующие ключевые поля:

name — строковое значение, определяющее название метрики, например CLS, LCP, FID или TTFB.
value — числовое значение, отражающее измеренное состояние метрики. Для некоторых показателей это количество миллисекунд, для других — коэффициент.
delta — разница между предыдущим и текущим значением метрики. Используется для определения изменений производительности в динамических сценариях.
entries — массив объектов типа PerformanceEntry, которые обеспечивают детальный доступ к исходным данным браузера. В Web Vitals эти записи позволяют выполнять глубокий анализ причин отклонений и оптимизировать отдельные участки страницы.
id — уникальный идентификатор конкретной сессии измерения метрики, что важно для отслеживания последовательности событий и сопоставления данных с конкретными пользователями.
rating — опциональное поле, которое может принимать значения good, needs-improvement или poor. Оно классифицирует текущее состояние метрики в соответствии с рекомендуемыми пороговыми значениями.

Использование дженериков в Metric

Тип Metric является дженериком и принимает один параметр, который определяет тип значения метрики:

interface Metric<T = number> {
  name: string;
  value: T;
  delta: T;
  entries: PerformanceEntry[];
  id: string;
  rating?: 'good' | 'needs-improvement' | 'poor';
}

T по умолчанию установлен как number, что подходит для большинства стандартных Web Vitals метрик, таких как CLS, LCP, FID, TTFB. Однако возможность передачи собственного типа позволяет расширять функциональность:

Логические значения: при разработке внутренних метрик можно использовать boolean, чтобы отмечать успешное или неуспешное выполнение определенной проверки.
Комплексные объекты: если метрика требует передачи нескольких параметров сразу, тип T может быть объектом с необходимыми полями, например {duration: number, count: number}.
Строковые значения: для метрик, где важны категориальные данные (например, "fast" | "medium" | "slow"), можно использовать дженерик с типом string.

Примеры типизации Metric с дженериками

Стандартная метрика с числовым значением:

const lcpMetric: Metric<number> = {
  name: 'LCP',
  value: 2450,
  delta: 200,
  entries: [],
  id: 'metric-1',
  rating: 'needs-improvement'
};

Метрика с объектом как значением:

interface CustomMetricValue {
  duration: number;
  interactions: number;
}

const customMetric: Metric<CustomMetricValue> = {
  name: 'CustomInteractionMetric',
  value: { duration: 1200, interactions: 3 },
  delta: { duration: 50, interactions: 1 },
  entries: [],
  id: 'metric-2'
};

Метрика с булевым значением:

const loadCheck: Metric<boolean> = {
  name: 'CriticalAssetsLoaded',
  value: true,
  delta: false,
  entries: [],
  id: 'metric-3'
};

Преимущества дженериков в Metric

Использование дженериков позволяет:

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

Связь Metric с функциями Web Vitals

Библиотека Web Vitals предоставляет функции для сбора метрик, например:

getCLS(callback: (metric: Metric) => void)
getLCP(callback: (metric: Metric) => void)
getFID(callback: (metric: Metric) => void)

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