Performance Issues

Хоук может автоматически отправлять performance-события через Performance API браузера.

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

Long Tasks
Long Animation Frames

Long Tasks

Long Tasks позволяет отслеживать длинные задачи в main thread браузера.

Подключение

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

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

Hawk создаёт PerformanceObserver для longtask и отправляет событие, если длительность задачи превышает заданный порог.

Событие отправляется только если:

длительность задачи больше или равна порогу;
у первой attribution есть: containerSrc, containerId, containerName

Это помогает отсекать системные и малоинформативные задачи.

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

По умолчанию используется порог:

100 ms

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

Можно указать собственный порог:

const hawk = new HawkCatcher({ token: 'INTEGRATION_TOKEN', issues: { longTasks: { thresholdMs: 150, }, }, });

Минимальный кастомный порог — 50 ms.

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

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

Long Task — …

Дополнительные данные задачи попадают в payload события.

Поддержка браузеров

Поддержка зависит от браузера.

Если браузер не поддерживает longtask, наблюдатель не создаётся и ошибок из-за этого не будет.

Long Animation Frames

Long Animation Frames позволяет отслеживать тяжёлые кадры рендеринга.

Подключение

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

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

Hawk создаёт PerformanceObserver для long-animation-frame и отправляет событие, если длительность кадра превышает заданный порог.

Событие отправляется только если:

длительность кадра больше или равна порогу;
в scripts есть скрипт с: sourceURL, sourceFunction, Nameinvoker

Это помогает отправлять только кадры с полезной диагностической информацией.

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

По умолчанию используется порог:

300 ms

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

Можно указать собственный порог:

const hawk = new HawkCatcher({ token: 'INTEGRATION_TOKEN', issues: { longAnimationFrames: { thresholdMs: 400, }, }, });

Минимальный кастомный порог — 50 ms.

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

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

Long Animation Frame

Иногда к заголовку добавляется суффикс с информацией о скрипте.

Поддержка браузеров

Поддержка зависит от браузера.

Если браузер не поддерживает long-animation-frame, наблюдатель не создаётся и ошибок из-за этого не будет.

Фильтрация

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

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

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

Группировка

☝️

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

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

Long Task —.+ Long Animation Frame.*