Мониторинг реальных пользователей и Web Vitals

Пакет web-vitals для npm от Google предоставляет простой программный интерфейс для измерения основных веб-показателей в браузерах реальных пользователей. Установите его командой npm install web-vitals и импортируйте отдельные обратные вызовы показателей: onLCP, onFID (устаревший), onCLS, onFCP, onTTFB и современный onINP для показателя взаимодействия до следующей отрисовки.

Каждый обратный вызов (onLCP, onCLS, onINP и другие) получает объект показателя, содержащий: имя («LCP»), значение (миллисекунды или безразмерная оценка), оценку («хорошо», «требует улучшения», «плохо») и ID (уникальный идентификатор для устранения дубликатов). Обратный вызов срабатывает после окончательного определения значения показателя.

Используйте программный интерфейс Navigator.sendBeacon или fetch, чтобы отправлять показатели в конечную точку аналитики. Метод sendBeacon предпочтительнее, поскольку продолжает работу даже после выгрузки страницы — это особенно важно для таких показателей, как CLS, окончательно определяемых при скрытии страницы. По возможности объединяйте все отчёты о показателях в один такой запрос.

Чтобы интегрировать веб-показатели в OpenTelemetry, создайте инструменты типа Gauge для каждого показателя: const lcp = meter.createObservableGauge('web_vitals.lcp'). В каждом обратном вызове onLCP записывайте значение с релевантными атрибутами (путь страницы, тип устройства). После этого система наблюдаемости сможет создавать оповещения о регрессиях P75 LCP.

Чтобы измерять производительность React, не охватываемую веб-показателями, используйте API пользовательских меток времени: вызывайте performance.mark('render-start') перед отрисовкой, performance.mark('render-end') после неё, а затем performance.measure('component-render', 'render-start', 'render-end'). Эти измерения отображаются на вкладке Performance в Chrome DevTools.

Компонент React Profiler оборачивает поддерево и вызывает обратный вызов onRender с данными о времени: id (идентификатор Profiler), фаза («монтирование» или «обновление»), actualDuration (время отрисовки), baseDuration (расчётное время отрисовки без мемоизации). Используйте этот механизм в разработке, чтобы находить медленные компоненты.

Необработанные ошибки и отклонения Promise можно захватывать как интервалы OpenTelemetry со статусом ошибки. Настройте глобальные слушатели: window.addEventListener('error', handler) и window.addEventListener('unhandledrejection', handler). Создайте интервал, задайте его статус с помощью span.setStatus({ code: SpanStatusCode.ERROR }), добавьте сообщение об ошибке и трассировку стека в качестве атрибутов, а затем завершите интервал.

Границы обработки ошибок React перехватывают ошибки отрисовки в дереве компонентов. В методе componentDidCatch создайте интервал OpenTelemetry, представляющий ошибку, задайте ему статус ERROR, добавьте error.message и componentStack в качестве атрибутов и вызовите span.end(). Так ошибки отрисовки React попадают в конвейер распределённой трассировки.

Минифицированный JavaScript в рабочей среде создаёт нечитаемые трассировки стека, например "a.b at bundle.min.js:1:84721". Загружайте карты исходного кода в Sentry, Datadog или ваш конвейер OpenTelemetry во время процесса сборки CI/CD, чтобы необработанные трассировки стека автоматически преобразовывались в исходные имена файлов TypeScript и номера строк.

Отправка полных данных трассировки для каждого сеанса обходится дорого. Реализуйте выборку сеансов: при первой загрузке страницы случайным образом назначайте флаг sessionSampled и сохраняйте его в sessionStorage. Инициализируйте SDK OpenTelemetry и отправляйте трассировки только для отобранных сеансов, например для 10%. Сеансы с ошибками всегда отбирайте со 100% вероятностью.

Веб-показатели, передаваемые как метрики OpenTelemetry, позволяют создавать оповещения на основе SLO: если P75 LCP превышает 2,5 секунды более чем в 5% сеансов за часовой интервал, создавайте оповещение. Это даёт инженерным командам практичные сигналы, напрямую связанные с пользовательским опытом, а не с метриками серверной инфраструктуры.

Когда срабатывает обратный вызов onLCP из библиотеки web-vitals?

Библиотека web-vitals предоставляет простые обратные вызовы для измерения LCP, INP, CLS, FCP и TTFB в браузерах реальных пользователей. Передавайте их как метрики OpenTelemetry для оповещений на основе SLO, захватывайте ошибки с помощью глобальных слушателей и границ обработки ошибок React как интервалы OpenTelemetry, а также загружайте карты исходного кода для восстановления минифицированных трассировок стека. Используйте выборку сеансов, чтобы управлять объёмом данных и сохранять полный охват ошибок.