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

Материал из Документация Ключ-АСТРОМ

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

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

Поддерживаемые JavaScript-фреймворки

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

Прекращение специальной поддержки для некоторых JavaScript-фреймворков

Мы прекратили предоставление специальной поддержки для следующих JavaScript-фреймворков с выпуском RUM JavaScript версии 1.265 и версии Ключ-АСТРОМ 1.266.

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, которая предлагает специальную поддержку для вашего фреймворка.

  1. Перейдите в раздел Веб.
  2. Выберите приложение, которое хотите настроить.
  3. В правом верхнем углу страницы обзора приложения выберите Дополнительно (…) > Редактировать.
  4. В настройках приложения выберите Внедрение > Обновления RUM JavaScript.
  5. Выберите опцию Latest IE7-10 supported из выпадающего списка.

Активация поддержки Angular 2–16

Чтобы включить поддержку Angular 2–16:

  1. Перейдите в раздел Веб.
  2. Выберите приложение, которое хотите настроить.
  3. В правом верхнем углу страницы обзора приложения выберите Дополнительно (…) > Редактировать.
  4. В настройках приложения выберите Захват > Асинхронные веб-запросы и SPA.
  5. В разделе Поддержка JavaScript-фреймворка включите переключатель Angular.
  6. Angular 12+ Введите имя пакета Angular.

Что такое имя пакета Angular?

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

Чтобы найти имя пакета Angular для вашего приложения:

  1. Откройте инструменты разработчика вашего браузера и перейдите на вкладку Консоль.
  2. Начните вводить webpackChunk. Браузер должен отобразить имя пакета для вашего приложения Angular.
  3. Скопируйте это имя. Например, имя пакета на скриншоте ниже — webpackChunklite.
  4. Если вы видите несколько записей webpackChunk в консоли, выберите ту, которая соответствует имени вашего приложения. Также попробуйте отключить расширения браузера, чтобы получить более чистый список.
  5. Если в консоли нет записей webpackChunk, вы, вероятно, используете Angular версии 11 или более ранней. В этом случае вам не нужно указывать имя пакета Angular.
  6. Вставьте имя, скопированное на шаге 2, в поле Имя пакета Angular в настройках вашего приложения.

Активация поддержки Angular 17+

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

Активация общей поддержки JavaScript-фреймворков

  1. Перейдите в раздел Веб.
  2. Выберите приложение, которое хотите настроить.
  3. В правом верхнем углу страницы обзора приложения выберите Дополнительно (…) > Редактировать.
  4. В настройках приложения выберите Захват > Асинхронные веб-запросы и SPA.
  5. В разделе Поддержка JavaScript-фреймворка выключите переключатель Angular.
  6. В разделе Общая поддержка включите необходимые опции.
    • Включите Захват запросов fetch() для захвата данных о действиях пользователя на основе Fetch API.
    • Включите Захват XmlHttpRequest (XHR) для захвата любого взаимодействия, которое приводит к вызову XmlHttpRequest, как XHR-действия.

Реализация перехвата исключений

Angular имеет стандартный обработчик исключений (ErrorHandler), который перехватывает исключения и записывает их в консоль с помощью console.error. Однако иногда используется пользовательский обработчик исключений для перехвата ошибок.

Стандартный обработчик исключений

Если используется стандартный обработчик исключений, включите захват ошибок консоли, чтобы RUM JavaScript мог перехватывать исключения для ваших приложений Angular 17+.

  1. Перейдите в раздел Веб.
  2. Выберите приложение, которое хотите настроить.
  3. В правом верхнем углу страницы обзора приложения выберите Дополнительно (…) > Редактировать.
  4. В настройках приложения выберите Захват > Пользовательские свойства конфигурации.
  5. Выберите Добавить пользовательское свойство конфигурации и введите cce=1. cce означает захват ошибок консоли. Когда эта опция включена, RUM JavaScript сообщает о первом объекте Error или строке, которые он может найти в аргументах, переданных в console.error.

Пользовательский обработчик исключений

Если у вас есть пользовательский обработчик исключений и исключения не записываются в консоль, вам необходимо сообщать об исключениях вручную. 

export class CustomErrorHandler implements ErrorHandler {
  handleError(error: any): void {
    // Сообщить об ошибке
    window.dtrum?.reportError(error);
    // пользовательская обработка ошибок
  }
}
@NgModule({
  ...,
  providers: [{provide: ErrorHandler, useClass: CustomErrorHandler}]
})

Настройка обнаружения групп страниц

Обнаружение страниц и групп страниц по умолчанию основано на URL — а именно на путях и идентификаторах, которые Ключ-АСТРОМ обнаруживает автоматически. Если группировка страниц по умолчанию неверна или вы хотите ее изменить, вы можете вручную сообщать группы страниц с помощью Angular Router. Приведенный ниже пример кода можно использовать для получения группы страниц из routeConfig, где имена-заполнители все еще доступны (например, /journey/:id вместо /journey/1235). 

@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 });
        }
      }
    });
  }
}

dT_.initAngularNg()

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

Активация общей поддержки JavaScript-фреймворков

Если ваше приложение использует JavaScript-фреймворк, отличный от Angular, включите общую поддержку для веб-запросов XHR и fetch().

  1. Перейдите в раздел Веб.
  2. Выберите приложение, которое хотите настроить.
  3. В правом верхнем углу страницы обзора приложения выберите Дополнительно (…) > Редактировать.
  4. В настройках приложения выберите Захват > Асинхронные веб-запросы и SPA.
  5. В разделе Общая поддержка включите необходимые опции:
    • Включите Захват запросов fetch() для захвата данных о действиях пользователя на основе Fetch API.
    • Включите Захват XmlHttpRequest (XHR) для захвата любого взаимодействия, которое приводит к вызову XmlHttpRequest, как XHR-действия.

Включение поддержки timed actions

В зависимости от фреймворка XHR (AJAX) или архитектуры вашего приложения вам может дополнительно потребоваться включить настройку поддержки timed actions. Эта настройка необходима, когда приложение не запускает вызовы XHR (AJAX) напрямую в обработчиках событий HTML-элементов, а вместо этого откладывает их с помощью вызовов SetTimeout.

  1. Перейдите в раздел Веб.
  2. Выберите приложение, которое хотите настроить.
  3. В правом верхнем углу страницы обзора приложения выберите Дополнительно (…) > Редактировать.
  4. В настройках приложения выберите Захват > Захват контента.
  5. Включите Поддержка timed actions.

Исключение определенных XHR-вызовов из мониторинга

Когда ваше приложение выполняет запрос XHR или Fetch, он может быть захвачен одним из следующих способов:

  • Если в данный момент не активно ни одно другое действие пользователя и XHR был вызван взаимодействием пользователя, фиксируется отдельное XHR-действие.
  • Если в данный момент активно другое действие пользователя и XHR не был вызван взаимодействием пользователя, активное действие пользователя расширяется, включая продолжительность XHR.

Вы можете исключить определенные XHR-вызовы из мониторинга — например, если ваше приложение отправляет частые статусные XHR-вызовы, которые вы не хотите видеть в своих пользовательских данных. При исключении этих запросов:

  • Отдельные XHR-действия не фиксируются.
  • Исключенные XHR не продлевают продолжительность других действий пользователя.

Однако они могут по-прежнему отображаться в водопадном анализе, если активна поддержка временных меток ресурсов W3C (настройки приложения > Захват > Захват контента > Поддержка временных меток ресурсов W3C).

Настройка правил исключения XHR

Чтобы исключить XHR-вызовы из мониторинга:

  1. Перейдите в раздел Веб.
  2. Выберите приложение, которое хотите настроить.
  3. В правом верхнем углу страницы обзора приложения выберите Дополнительно (…) > Редактировать.
  4. В настройках приложения выберите Захват > Исключения > Исключения XHR.
  5. Выберите Добавить правило исключения XHR и укажите регулярное выражение JavaScript, которое соответствует URL-адресам запросов, которые вы хотите исключить.

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

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

Как применяются правила исключения XHR

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

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

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

  • Flavor: ECMAScript (JavaScript)
  • 'Delimiter": "
  • Флаг Case insensitive match

Отсутствие XHR-действий при использовании promises

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

Как Ключ-АСТРОМ обычно создает действия пользователя:

  • Взаимодействие пользователя со страницей — например, щелчок, нажатие клавиши или событие прокрутки — регистрируется.
  • Если запрос XHR или fetch начинается в течение следующих 30 миллисекунд, создается действие пользователя. Если запрос начинается позже, действие пользователя не создается.
  • 30-миллисекундный интервал продлевается на неопределенный срок для продолжающегося синхронного выполнения, например, когда длительное вычисление в коде приложения занимает более 30 мс, и XHR начинается только после завершения вычисления. Однако это применимо только тогда, когда выполнение осуществляется непосредственно в обработчике событий, и setTimeout, setInterval или promises не используются.

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

Чтобы проверить, использует ли действие пользователя promises:

  1. Откройте инструменты разработчика вашего браузера.
  2. Выполните действие в вашем веб-приложении.
  3. Проверьте инициатора запроса.
Источник — https://doc.ruscomtech.ru/index.php?title=Настройка_Мониторинга_реального_пользователя_для_захвата_XHR-действий&oldid=6382