Связывание трассировок фронтенда и бэкенда

Конечная цель наблюдаемости клиентской части — единая трассировка, связывающая щелчок пользователя в React с сетью, обработчиками программного интерфейса, вызовами сервисов и запросом к базе данных, вызвавшим медленный ответ. Такая сквозная трассировка делает анализ первопричины мгновенным.

Спецификация W3C TraceContext определяет формат заголовка traceparent: version-traceId-parentSpanId-flags. Пример значения выглядит так: 00-4bf92f3577b34da6a3ce929d0e0e4736-00f067aa0ba902b7-01. Идентификатор трассировки используется во всей распределённой трассировке, а идентификатор родительского интервала меняется на каждом переходе.

Инструментирование fetch в OpenTelemetry автоматически внедряет заголовок traceparent в каждый исходящий запрос fetch. Заголовок содержит текущий идентификатор трассировки и идентификатор интервала клиентского запроса fetch в качестве родительского, позволяя серверной части создать дочерний интервал, связанный с интервалом клиентской части.

На сервере инструментирование HTTP OpenTelemetry для Node.js/Express читает входящий заголовок traceparent и создаёт интервалы, являющиеся дочерними для интервала fetch клиентской части. Идентификатор трассировки сохраняется, поэтому Jaeger или Grafana Tempo показывает всю цепочку — интервал браузера → интервал Express → интервал базы данных — в одном водопадном представлении.

После инструментирования клиентской и серверной частей откройте Jaeger или Grafana Tempo и найдите идентификатор трассировки. Вы увидите полное водопадное представление: вверху интервал компонента React, под ним интервал fetch, затем интервал обработчика маршрута Express и интервал запроса к базе данных — все с указанием длительности и атрибутов.

Установите user.id как атрибут для всех интервалов в приложении React с помощью span.setAttribute('user.id', userId). Сделайте то же самое на серверной части. Теперь можно отфильтровать систему наблюдаемости и показать все трассировки для определённого идентификатора пользователя, что позволит диагностировать проблемы, о которых сообщил конкретный клиент.

Сгенерируйте уникальный идентификатор сеанса при загрузке страницы и установите его как session.id для всех интервалов клиентской части. Включайте его в заголовки запросов, чтобы серверная часть также добавляла его к своим интервалам. Связывание сеанса позволяет восстановить полную последовательность действий пользователя в рамках одного сеанса.

Коммерческие инструменты, такие как Datadog, изначально интегрируют сеансы RUM с трассировками APM. SDK Datadog RUM внедряет специальный заголовок (X-Datadog-Trace-Id) в запросы fetch, а SDK Datadog APM на серверной части читает его и связывает воспроизведение сеанса RUM с распределённой трассировкой — можно одновременно просматривать воспроизведение сеанса и трассировку.

Представьте, что пользователь жалуется на медленное оформление заказа. С помощью связанных трассировок найдите в системе наблюдаемости данные по user.id, откройте трассировку оформления заказа и сразу увидите, что причиной замедления стал запрос к базе данных длительностью 900 мс, соединявший две большие таблицы, — то, что невозможно заметить по одним метрикам клиентской части.

Браузеры не могут напрямую отправлять трассировки в Jaeger или другие серверы обработки данных из-за ограничений CORS и риска раскрытия учётных данных. Вместо этого запустите коллектор OpenTelemetry как прокси: настройте OTLPTraceExporter для отправки данных в конечную точку коллектора, который затем распределит их между Jaeger, Grafana Tempo или любым другим сервером обработки данных.

Трассировки клиентской части могут непреднамеренно захватывать конфиденциальные данные: значения полей формы в URL, PII в атрибутах интервалов, токены сеансов в заголовках. Проверьте инструментирование и убедитесь, что конфиденциальные данные не включаются в атрибуты интервалов. Используйте span.setAttribute умеренно и очищайте параметры запроса URL перед их записью.

Каков формат заголовка traceparent стандарта W3C TraceContext?

Связывание трассировок клиентской и серверной частей создаёт сквозную видимость всего пути пользовательского запроса. Заголовки traceparent стандарта W3C TraceContext автоматически связывают интервалы браузера, созданные fetch, с интервалами серверной части благодаря инструментированию OpenTelemetry. Дополняйте все интервалы атрибутами user.id и session.id для целевой отладки. Используйте коллектор OpenTelemetry как прокси между браузером и серверной частью, чтобы избежать проблем CORS и раскрытия учётных данных.