Web Vitals

Hawk может автоматически отправлять события для плохих Core Web Vitals.

Поддерживаются метрики:

CLS — Cumulative Layout Shift
INP — Interaction to Next Paint
LCP — Largest Contentful Paint
FCP — First Contentful Paint
TTFB — Time to First Byte

Подключение

Чтобы включить сбор Web Vitals:

import HawkCatcher from '@hawk.so/browser'; const hawk = new HawkCatcher({ token: 'INTEGRATION_TOKEN', issues: { webVitals: true, }, });

Как это работает

Hawk отслеживает значения Web Vitals через web-vitals и отправляет событие только если метрика превышает заданный порог.

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

Пороги по умолчанию

Метрика	Порог по умолчанию
CLS (Cumulative Layout Shift )	0.35
INP (Interaction to Next Paint )	700 мс
LCP (Largest Contentful Paint )	5000 мс
FCP (First Contentful Paint)	4000 мс
TTFB (Time to First Byte)	2500 мс

Собственные пороги

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

const hawk = new HawkCatcher({ token: 'INTEGRATION_TOKEN', issues: { webVitals: { reportPoorAbove: { CLS: 0.3, INP: 600, LCP: 4500, FCP: 3500, TTFB: 2200, }, }, }, });

Можно переопределять только нужные метрики:

const hawk = new HawkCatcher({ token: 'INTEGRATION_TOKEN', issues: { webVitals: { reportPoorAbove: { LCP: 4500, }, }, }, });

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

Пример события

События имеют заголовок вида:

Poor Web Vital: LCP (Largest Contentful Paint)

Дополнительные данные метрики попадают в payload события.

Фильтрация

События Web Vitals проходят через beforeSend, как и обычные события.

Их можно изменить или отфильтровать:

const hawk = new HawkCatcher({ token: 'INTEGRATION_TOKEN', beforeSend(event) { if (event.payload.title?.startsWith('Poor Web Vital')) { return false; } return event; }, });

Группировка

☝️

Рекомендуется

настроить группировку по заголовкам:

Poor Web Vital:.*