[Frontend] Сбор метрик производительности и пользовательских событий

[soorq]

Контекст

Для объективной оценки качества фронтенда необходимо внедрить количественный сбор данных. Это включает как технические показатели (Core Web Vitals), так и кастомные бизнес-метрики (взаимодействие с формами, время загрузки тяжелых модулей). Сбор метрик через Faro позволит визуализировать реальный опыт пользователей (RUM) на дашбордах Grafana.

---

Технические требования

• Локация логики: shared/lib/metrics, интеграция через WebVitals API в Next.js.
• Инструменты: @grafana/faro-web-sdk, пакет web-vitals.
• Логика работы:
  1. Автоматический сбор: Инициализация стандартных инструментов для замера LCP, FID, CLS, TTFB и FCP.
  2. Кастомные события: Реализация хелпера trackEvent(name, attributes) для отправки произвольных метрик.
  3. Батчинг: Настройка интервала отправки данных для минимизации количества сетевых запросов.

---

Цель и критерии приемки (Definition of Done)

• База: Внедрена функция захвата Next.js Web Vitals через встроенный метод useReportWebVitals (или reportWebVitals в Pages Router).
• Функционал: Данные о производительности успешно отображаются в Grafana в разделе "Frontend Observability".
• Лимиты/SLA: Отправка метрик не должна влиять на показатель TTI (Time to Interactive).
• Интеграция: Настроена передача аттрибутов окружения (env, release, browser, os).

---

Важные указания

• Производительность: Использовать requestIdleCallback для отправки накопленных метрик в моменты простоя браузера.
• Ошибки: Предусмотреть бесшумный отказ (silent fail) — если сборщик недоступен, приложение должно продолжать работу без ошибок в консоли.
• Безопасность: Запрещено включать чувствительные данные (например, значения из полей ввода) в аттрибуты событий.

---

Прикладные примеры и документация

• Official Faro Web SDK Examples — Прямой пример интеграции в проект на Next.js.
• Next.js Measuring Performance Guide — Официальная документация Next.js по сбору Web Vitals.
• Grafana Faro Custom Instrumentation — Гайд по созданию кастомных метрик и событий.
• Web Vitals Library — Исходный код библиотеки, которую использует Faro под капотом.