IKuznetsov: Новая страница: «= Настройка Мониторинга реального пользователя для захвата XHR-действий = Современные ве...»

2026-05-25T20:19:56Z

Новая страница: «= Настройка Мониторинга реального пользователя для захвата XHR-действий = Современные ве...»

Новая страница

= Настройка Мониторинга реального пользователя для захвата XHR-действий =

Современные веб-приложения не полагаются на загрузку страниц для изменения пользовательского интерфейса после действий пользователя. Вместо этого каждое взаимодействие пользователя запускает один или несколько запросов '''XHR''' для получения необходимых данных, изменяя лишь части интерфейса. При активации поддержки '''XHR'''-действий вы получаете видимость каждого вида взаимодействия пользователя, а не только обычных загрузок страниц, которые фиксируются по умолчанию. Эта опция значительно расширяет видимость в средах одностраничных приложений ('''SPA'''), построенных на различных '''JavaScript'''-фреймворках.

== Поддерживаемые JavaScript-фреймворки ==
Мы предлагаем специальную поддержку для '''Angular''' 2–16. Для '''Angular''' 17+ требуется дополнительная настройка. Если в вашем приложении используется другой '''JavaScript'''-фреймворк, попробуйте активировать общую поддержку.

== Прекращение специальной поддержки для некоторых JavaScript-фреймворков ==
Мы прекратили предоставление специальной поддержки для следующих '''JavaScript'''-фреймворков с выпуском '''RUM JavaScript''' версии 1.265 и версии Ключ-АСТРОМ 1.266.
{| class="wikitable"
|-
! JavaScript-фреймворки !! Версии
|-
| AngularJS || 1.0 - 1.7
|-
| Angular with SystemJS || 2 - 15
|-
| Dojo || 1.6.1 - 1.13
|-
| Ext JS || 3.4, 4, 5, 6
|-
| ICEfaces || 1.8, 2, 3
|-
| jQuery (Backbone.js) || 1.3 - 1.12, 2.0 - 2.2, 3.0 - 3.6
|-
| MooTools || 1.4.5 - 1.6.0
|-
| Prototype || 1.7
|-
| Sencha Touch || 2.0 - 2.4
|}
Если вы используете один из этих фреймворков, активируйте общую поддержку. Кроме того, если вы создали свою среду до версии Ключ-АСТРОМ 1.266, вы можете использовать версию '''RUM JavaScript''', которая предлагает специальную поддержку для вашего фреймворка.
# Перейдите в раздел '''Веб'''.
# Выберите приложение, которое хотите настроить.
# В правом верхнем углу страницы обзора приложения выберите '''Дополнительно''' (…) > '''Редактировать'''.
# В настройках приложения выберите '''Внедрение''' > '''Обновления RUM JavaScript'''.
# Выберите опцию '''Latest IE7-10 supported''' из выпадающего списка.

== Активация поддержки Angular 2–16 ==
Чтобы включить поддержку '''Angular''' 2–16:
# Перейдите в раздел '''Веб'''.
# Выберите приложение, которое хотите настроить.
# В правом верхнем углу страницы обзора приложения выберите '''Дополнительно''' (…) > '''Редактировать'''.
# В настройках приложения выберите '''Захват''' > '''Асинхронные веб-запросы и SPA'''.
# В разделе '''Поддержка JavaScript-фреймворка''' включите переключатель '''Angular'''.
# <code>Angular 12+</code> Введите имя пакета '''Angular'''.

=== Что такое имя пакета Angular? ===
Начиная с '''Angular''' версии 12, вы должны указать имя пакета '''Angular''' вашего приложения в настройках Ключ-АСТРОМ. В противном случае Мониторинг реального пользователя не будет работать. Для '''Angular''' 12 имя пакета зависит от имени проекта и больше не является статичным, в то время как для '''Angular''' 11 и более ранних версий именем пакета всегда является <code>webpackjsonp</code>.

Чтобы найти имя пакета '''Angular''' для вашего приложения:
# Откройте инструменты разработчика вашего браузера и перейдите на вкладку '''Консоль'''.
# Начните вводить <code>webpackChunk</code>. Браузер должен отобразить имя пакета для вашего приложения '''Angular'''.
# Скопируйте это имя. Например, имя пакета на скриншоте ниже — <code>webpackChunklite</code>.
# Если вы видите несколько записей <code>webpackChunk</code> в консоли, выберите ту, которая соответствует имени вашего приложения. Также попробуйте отключить расширения браузера, чтобы получить более чистый список.
# Если в консоли нет записей <code>webpackChunk</code>, вы, вероятно, используете '''Angular''' версии 11 или более ранней. В этом случае вам не нужно указывать имя пакета '''Angular'''.
# Вставьте имя, скопированное на шаге 2, в поле '''Имя пакета Angular''' в настройках вашего приложения.

== Активация поддержки Angular 17+ ==
Поскольку '''Angular''' 17 по умолчанию использует <code>esbuild</code> вместо <code>Webpack</code>, '''RUM JavaScript''' больше не может автоматически инструментировать '''Angular'''. По этой причине, если для вашего приложения используется '''Angular''' 17+, требуется дополнительная настройка. Чтобы включить поддержку '''Angular''' 17+, выполните следующие действия.

=== Активация общей поддержки JavaScript-фреймворков ===
# Перейдите в раздел '''Веб'''.
# Выберите приложение, которое хотите настроить.
# В правом верхнем углу страницы обзора приложения выберите '''Дополнительно''' (…) > '''Редактировать'''.
# В настройках приложения выберите '''Захват''' > '''Асинхронные веб-запросы и SPA'''.
# В разделе '''Поддержка JavaScript-фреймворка''' выключите переключатель '''Angular'''.
# В разделе '''Общая поддержка''' включите необходимые опции.
#* Включите '''Захват запросов <code>fetch()</code>''' для захвата данных о действиях пользователя на основе '''Fetch API'''.
#* Включите '''Захват XmlHttpRequest (XHR)''' для захвата любого взаимодействия, которое приводит к вызову <code>XmlHttpRequest</code>, как '''XHR'''-действия.

=== Реализация перехвата исключений ===
'''Angular''' имеет стандартный обработчик исключений ([https://angular.io/api/core/ErrorHandler ErrorHandler]), который перехватывает исключения и записывает их в консоль с помощью <code>console.error</code>. Однако иногда используется пользовательский обработчик исключений для перехвата ошибок.

==== Стандартный обработчик исключений ====
Если используется стандартный обработчик исключений, включите захват ошибок консоли, чтобы '''RUM JavaScript''' мог перехватывать исключения для ваших приложений '''Angular''' 17+.
# Перейдите в раздел '''Веб'''.
# Выберите приложение, которое хотите настроить.
# В правом верхнем углу страницы обзора приложения выберите '''Дополнительно''' (…) > '''Редактировать'''.
# В настройках приложения выберите '''Захват''' > '''Пользовательские свойства конфигурации'''.
# Выберите '''Добавить пользовательское свойство конфигурации''' и введите <code>cce=1</code>. <code>cce</code> означает захват ошибок консоли. Когда эта опция включена, '''RUM JavaScript''' сообщает о первом объекте <code>Error</code> или строке, которые он может найти в аргументах, переданных в <code>console.error</code>.

==== Пользовательский обработчик исключений ====
Если у вас есть пользовательский обработчик исключений и исключения не записываются в консоль, вам необходимо сообщать об исключениях вручную.
{| class="wikitable"
|<pre>
export class CustomErrorHandler implements ErrorHandler {
handleError(error: any): void {
// Сообщить об ошибке
window.dtrum?.reportError(error);
// пользовательская обработка ошибок
}
}
@NgModule({
...,
providers: [{provide: ErrorHandler, useClass: CustomErrorHandler}]
})
</pre>
|}

=== Настройка обнаружения групп страниц ===
Обнаружение страниц и групп страниц по умолчанию основано на URL — а именно на путях и идентификаторах, которые Ключ-АСТРОМ обнаруживает автоматически. Если группировка страниц по умолчанию неверна или вы хотите ее изменить, вы можете вручную сообщать группы страниц с помощью '''Angular Router'''. Приведенный ниже пример кода можно использовать для получения группы страниц из <code>routeConfig</code>, где имена-заполнители все еще доступны (например, <code>/journey/:id</code> вместо <code>/journey/1235</code>).
{| class="wikitable"
|<pre>
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule {
constructor(private router: Router) {
window.dtrum?.enableManualPageDetection();
this.router.events.subscribe((value: Event) => {
if (value.type === EventType.ActivationEnd) {
const snapshot = value.snapshot;
if (snapshot.routeConfig) {
const group = snapshot.routeConfig.path;
const name = snapshot.url.join("/");
window.dtrum?.setPage({ name, group });
}
}
});
}
}
</pre>
|}

=== dT_.initAngularNg() ===
Не вызывайте <code>dT_.initAngularNg()</code>, так как он больше не работает с '''Angular''' 17. Это ничего не сломает, но и не даст никакого эффекта. Для '''Angular''' 2–16 <code>dT_.initAngularNg</code> используется для передачи объектов '''HTTP''' и '''Headers''' в Ключ-АСТРОМ при использовании <code>HttpModule</code> из <code>@angular/http</code> или для передачи объектов '''HTTP''' и '''HttpHeaders''' в Ключ-АСТРОМ при использовании <code>HttpClientModule</code> из <code>@angular/common/http</code> ('''Angular''' 5+).

== Активация общей поддержки JavaScript-фреймворков ==
Если ваше приложение использует '''JavaScript'''-фреймворк, отличный от '''Angular''', включите общую поддержку для веб-запросов '''XHR''' и <code>fetch()</code>.
# Перейдите в раздел '''Веб'''.
# Выберите приложение, которое хотите настроить.
# В правом верхнем углу страницы обзора приложения выберите '''Дополнительно''' (…) > '''Редактировать'''.
# В настройках приложения выберите '''Захват''' > '''Асинхронные веб-запросы и SPA'''.
# В разделе '''Общая поддержка''' включите необходимые опции:
#* Включите '''Захват запросов <code>fetch()</code>''' для захвата данных о действиях пользователя на основе '''Fetch API'''.
#* Включите '''Захват XmlHttpRequest (XHR)''' для захвата любого взаимодействия, которое приводит к вызову <code>XmlHttpRequest</code>, как '''XHR'''-действия.

== Включение поддержки timed actions ==
В зависимости от фреймворка '''XHR (AJAX)''' или архитектуры вашего приложения вам может дополнительно потребоваться включить настройку поддержки timed actions. Эта настройка необходима, когда приложение не запускает вызовы '''XHR (AJAX)''' напрямую в обработчиках событий '''HTML'''-элементов, а вместо этого откладывает их с помощью вызовов <code>SetTimeout</code>.
# Перейдите в раздел '''Веб'''.
# Выберите приложение, которое хотите настроить.
# В правом верхнем углу страницы обзора приложения выберите '''Дополнительно''' (…) > '''Редактировать'''.
# В настройках приложения выберите '''Захват''' > '''Захват контента'''.
# Включите '''Поддержка timed actions'''.

== Исключение определенных XHR-вызовов из мониторинга ==
Когда ваше приложение выполняет запрос '''XHR''' или '''Fetch''', он может быть захвачен одним из следующих способов:
* Если в данный момент не активно ни одно другое действие пользователя и '''XHR''' был вызван взаимодействием пользователя, фиксируется отдельное '''XHR'''-действие.
* Если в данный момент активно другое действие пользователя и '''XHR''' не был вызван взаимодействием пользователя, активное действие пользователя расширяется, включая продолжительность '''XHR'''.

Вы можете исключить определенные '''XHR'''-вызовы из мониторинга — например, если ваше приложение отправляет частые статусные '''XHR'''-вызовы, которые вы не хотите видеть в своих пользовательских данных. При исключении этих запросов:
* Отдельные '''XHR'''-действия не фиксируются.
* Исключенные '''XHR''' не продлевают продолжительность других действий пользователя.
Однако они могут по-прежнему отображаться в водопадном анализе, если активна поддержка временных меток ресурсов '''W3C''' (настройки приложения > '''Захват''' > '''Захват контента''' > '''Поддержка временных меток ресурсов W3C''').

=== Настройка правил исключения XHR ===
Чтобы исключить '''XHR'''-вызовы из мониторинга:
# Перейдите в раздел '''Веб'''.
# Выберите приложение, которое хотите настроить.
# В правом верхнем углу страницы обзора приложения выберите '''Дополнительно''' (…) > '''Редактировать'''.
# В настройках приложения выберите '''Захват''' > '''Исключения''' > '''Исключения XHR'''.
# Выберите '''Добавить правило исключения XHR''' и укажите регулярное выражение '''JavaScript''', которое соответствует URL-адресам запросов, которые вы хотите исключить.

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

=== Как применяются правила исключения XHR ===
'''RUM JavaScript''' проверяет регулярное выражение на соответствие URL с помощью [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/test RegExp.prototype.test()]. Регулярное выражение не обязательно должно соответствовать полному URL, а только его подстроке. URL может быть относительным или абсолютным, в зависимости от того, что было передано в вызов '''XHR''' или '''Fetch'''. Сопоставление нечувствительно к регистру, а прямые слеши (/) не нужно экранировать.

=== Сайты для тестирования регулярных выражений ===
При составлении регулярного выражения с использованием такого сайта, как [https://regex101.com/ Regex101], выберите следующие параметры:
* '''Flavor''': '''ECMAScript (JavaScript)'''
* '''Delimiter''": "
* '''Флаг Case insensitive match'''

== Отсутствие XHR-действий при использовании promises ==
При использовании [https://web.dev/promises/ promises] Ключ-АСТРОМ не всегда создает действия пользователя, поэтому вы можете заметить, что некоторые '''XHR'''-действия отсутствуют.

Как Ключ-АСТРОМ обычно создает действия пользователя:
* Взаимодействие пользователя со страницей — например, щелчок, нажатие клавиши или событие прокрутки — регистрируется.
* Если запрос '''XHR''' или <code>fetch</code> начинается в течение следующих 30 миллисекунд, создается действие пользователя. Если запрос начинается позже, действие пользователя не создается.
* 30-миллисекундный интервал продлевается на неопределенный срок для продолжающегося синхронного выполнения, например, когда длительное вычисление в коде приложения занимает более 30 мс, и '''XHR''' начинается только после завершения вычисления. Однако это применимо только тогда, когда выполнение осуществляется непосредственно в обработчике событий, и <code>setTimeout</code>, <code>setInterval</code> или '''promises''' не используются.

Используя '''promises''', код может выполняться асинхронно. Когда выполнение кода завершено, исходный вызывающий объект уведомляется и может продолжить выполнение своего собственного кода. К сожалению, невозможно определить, когда выполнение кода будет завершено; оно может произойти или не произойти в течение 30-миллисекундного окна. По этой причине мы рекомендуем вам использовать '''RUM JavaScript API''' для создания действий в таких случаях.

Чтобы проверить, использует ли действие пользователя '''promises''':
# Откройте инструменты разработчика вашего браузера.
# Выполните действие в вашем веб-приложении.
# Проверьте инициатора запроса.

Настройка Мониторинга реального пользователя для захвата XHR-действий - История изменений

IKuznetsov: Новая страница: «= Настройка Мониторинга реального пользователя для захвата XHR-действий = Современные ве...»