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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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