Настройка связи между фронтендом и бэкендом для веб-интерфейсов

Настройка связи между фронтендом и бэкендом для веб-интерфейсов

Для веб-интерфейсов RUM поддерживает два подхода к связыванию фронтенда и бэкенда:

• Контекст трассировки W3C связывает запросы XHR и Fetch с распределенными трассировками, полученными на бэкендах, оснащенных инструментами ЕдиногоАгента или OpenTelemetry.
• Заголовок Server-Timing связывает запросы к HTML-документу и входящим в него ресурсам с распределенными трассировками, регистрируемыми на бэкендах, оснащенных одной из технологий ЕдиногоАгента, перечисленных в разделе «Техническая поддержка — Мониторинг реальных пользователей — Веб-серверы и приложения».

На этой странице описаны настройки, доступные для обоих подходов. Подробную информацию о каждом подходе см. в разделе «Связь между фронтендом и бэкендом».

Управление добавлением контекста трассировки W3C

По умолчанию контекст трассировки W3C добавляется к запросам XHR и Fetch из одного источника. При желании вы также можете настроить его добавление для запросов из разных источников.

Добавьте контекст трассировки W3C к запросам из разных источников

Сначала подготовьте конечные точки.

Добавление контекста трассировки W3C к междоменным запросам требует правильной настройки обработки CORS на принимающих конечных точках. Если конечные точки не готовы принимать заголовки traceparent и tracestate, затронутые запросы будут завершаться с ошибками CORS, и части вашего веб-приложения могут перестать работать. Вы несете ответственность за конфигурацию своих конечных точек; проверьте настройку в предпроизводственной среде, прежде чем включать эту опцию.

Для того чтобы связать междоменные XHR- и Fetch-запросы с распределенными трассировками из бэкенда, оснащенного ЕдинымАгентом или OpenTelemetry с использованием контекста трассировки W3C, выполните следующие шаги.

Шаг 1: Подготовьте ваши конечные точки для приема заголовков контекста трассировки

Когда заголовки traceparent и tracestate добавляются к междоменному XHR-запросу или запросу Fetch, браузер отправляет предварительный CORS-запрос — OPTIONS-запрос — перед фактическим запросом. Конечные точки, обрабатывающие ваши междоменные запросы, должны отвечать соответствующими заголовками CORS как в предварительном ответе, так и в ответе на фактический запрос. В противном случае запрос завершится ошибкой CORS.

Ответ на предварительный запрос (preflight OPTIONS-запрос) должен содержать следующие заголовки:

• Access-Control-Allow-Origin — указывает источник, которому разрешен доступ к ресурсу. Это может быть либо конкретный источник, соответствующий заголовку запроса Origin, либо * (любой источник).
• Access-Control-Allow-Methods — перечисляет методы HTTP, разрешенные для междоменных запросов; должен включать метод фактического запроса (например, GET или POST).
• Access-Control-Allow-Headers — перечисляет заголовки запроса, разрешенные для междоменных запросов; должны включать traceparent и tracestate.

Ответ на сам запрос должен включать:

• Access-Control-Allow-Origin — с теми же правилами определения значений, что и для предполетного ответа.

Шаг 2: Настройте шаблон междоменных URL-адресов в Ключ-АСТРОМ

1. Перейдите в раздел Ключевые показатели опыта > Обзор.
2. Выберите Веб, чтобы просмотреть все веб-интерфейсы.
3. Выберите интерфейс, который хотите настроить.
4. На вкладке Настройки выберите Связь между фронтендом и бэкендом.
5. В поле Шаблон междоменного URL введите регулярное выражение, соответствующее URL-адресам запрошенных ресурсов.

JavaScript-код RUM проверяет регулярное выражение по отношению к URL-адресу с помощью метода RegExp.prototype.test(). Регулярное выражение не обязательно должно соответствовать полному URL-адресу, а только его подстроке. Сопоставление нечувствительно к регистру.

Избегайте неэффективных регулярных выражений

Неэффективные регулярные выражения могут вызывать проблемы с производительностью вашего приложения, включая зависание браузера на несколько секунд. Для повышения производительности пишите выражения, которые соответствуют подстроке URL-адреса, а не всему URL-адресу целиком. Это особенно актуально для длинных URL-адресов.

Сайты для тестирования регулярных выражений

При составлении регулярного выражения с помощью такого сайта, как Regex101, выберите следующие параметры:

• Вариант ECMAScript (JavaScript)
• Разделитель "
• Флаг совпадения, нечувствительный к регистру

Отключение добавления контекста трассировки W3C

Если добавление контекста трассировки W3C вызывает проблемы в вашей среде, вы можете временно его отключить. Запросы XHR и Fetch по-прежнему могут быть связаны через заголовок Server-Timing, если бэкенд оснащен одной из технологий ЕдиногоАгента, перечисленных в разделе «Техническая поддержка — Мониторинг реальных пользователей — Веб-серверы и приложения». Однако мы не рекомендуем оставлять распространение контекста трассировки отключенным, поскольку оно обеспечивает более надежную и точную связь.

Чтобы отключить добавление контекста трассировки:

1. Перейдите в раздел Ключевые показатели опыта > Обзор.
2. Выберите Веб, чтобы просмотреть все веб-интерфейсы.
3. Выберите интерфейс, который хотите настроить.
4. На вкладке Настройки выберите Связь между фронтендом и бэкендом.
5. Отключите функцию Включить связь между фронтендом и бэкендом через контекст трассировки W3C.

Управление добавлением заголовков Server-Timing и Timing-Allow-Origin в сценариях междоменных запросов

Для междоменных запросов JavaScript RUM может получить доступ к значению заголовка Server-Timing только в том случае, если ответ содержит заголовок Timing-Allow-Origin, разрешающий доступ из источника запроса. Чтобы предоставить такой доступ, ЕдиныйАгент автоматически добавляет заголовок Timing-Allow-Origin к ответу вашего веб-приложения, если ваше приложение еще не установило его. Заголовок Timing-Allow-Origin контролирует доступ не только к значению заголовка Server-Timing, но и к подробным данным о времени выполнения ресурсов. По умолчанию добавленный заголовок использует значение с подстановочным знаком (*).

Если этот разрешительный режим по умолчанию не соответствует вашим требованиям, вы можете определить правила, ограничивающие получение двух заголовков источниками. При совпадении правила заголовок Timing-Allow-Origin будет содержать источник из заголовка запроса Origin вместо подстановочного знака.

Добавление правила

1. Перейдите в Настройки > Сбор и захват данных > Мониторинг реальных пользователей > Инструментарий > Веб > Расширенная корреляция.
2. Выберите Добавить элемент.
3. В разделе Сопоставление выберите содержит, начинается с, заканчивается на или равно.
4. В поле Шаблон введите шаблон, определяющий источник или источники, которые должно принимать правило. Источник состоит из протокола, хоста и порта; порты по умолчанию опускаются.

Правила, определенные в разделе «Расширенная корреляция», применяются ко всей вашей среде. Как только вы добавите первое правило, запросы из любого источника, не соответствующего правилу, больше не будут получать заголовки Server-Timing и Timing-Allow-Origin в ответе. В результате связь между фронтендом и бэкендом становится недоступной для этих запросов, за исключением запросов XHR и Fetch, которые содержат контекст трассировки W3C.