Браузерный мониторинг

Раздел «Браузерный мониторинг» предназначен для контроля работы веб-приложений со стороны пользователя.

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

Рисунок 32 — Раздел «Браузерный мониторинг». Список приложений

Основной экран раздела

На основном экране раздела «Браузерный мониторинг» отображается таблица со списком приложений. В таблице доступны следующие данные:

• Имя — название браузерного приложения
• Версия агента — версия установленного компонента сбора данных.

Названия приложений отображаются в виде ссылок. При выборе приложения пользователь переходит к детальному обзору показателей выбранного веб-приложения.

Переход к детальному обзору приложения

1. Открыть раздел «Браузерный мониторинг».

2. В списке приложений выбрать нужное приложение.

3. Нажать на название приложения в столбце «Имя».

После этого открывается страница «Обзор» с показателями пользовательского опыта и загрузки страниц.

Дополнительное меню браузерного приложения

При выборе конкретного приложения в разделе «Браузерный мониторинг» открывается дополнительное меню навигации по выбранному приложению.

В дополнительном меню доступны следующие вкладки:

• Обзор — сводные показатели пользовательского опыта и производительности приложения
• Просмотры страниц — данные по просмотрам страниц и URL
• AJAX — данные по асинхронным запросам приложения
• Ошибки — сведения об ошибках, зафиксированных на стороне браузера
• Трассировки сессии — данные для анализа пользовательских сессий.

Дополнительное меню позволяет перейти от общего обзора приложения к детальному анализу отдельных направлений: загрузки страниц, запросов, ошибок и пользовательских сессий.

Рисунок 35 — Дополнительное меню браузерного приложения

Вкладка «Обзор»

Вкладка «Обзор» предназначена для сводного анализа производительности браузерного приложения и пользовательского опыта.

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

*Рисунок 36 — Вкладка «Обзор» браузерного приложения

Рисунок 37 — Вкладка «Обзор» браузерного приложения. Нижняя часть страницы

Основные показатели пользовательского опыта

В верхней части вкладки «Обзор» отображаются основные показатели качества работы веб-приложения:

• LCP — время загрузки основного содержимого страницы
• INP — отзывчивость интерфейса на действия пользователя
• FID — задержка первого взаимодействия
• CLS — визуальная стабильность страницы.

Для каждого показателя отображается текущее значение, визуальная шкала оценки и распределение загрузок страниц по категориям качества. Также в верхней части страницы доступен выбор процентиля.

Оценка загрузок страниц

Под каждым из основных показателей отображается блок «Загрузка страниц», где страницы распределяются по категориям: «Хорошо», «Нуждается в улучшении», «Плохо».

Таблицы по URL страниц

На вкладке «Обзор» отображаются таблицы со страницами и их показателями:

• Наименьший LCP на URL (Процентиль)
• Наибольший FID на URL (Процентиль)
• Наибольший INP на URL (Процентиль)
• Наибольший CLS на URL (Процентиль).

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

Дополнительные графики вкладки «Обзор»

В нижней части вкладки «Обзор» отображаются дополнительные графики производительности приложения:

• Пользовательское время на сайте (Процентиль)
• Скорость загрузки с точки зрения пользователя
• Загрузка страницы и навигационные переходы
• Фронтенд ↔ Бэкенд
• Пропускная способность
• Время загрузки страницы.

Эти графики позволяют понять, на каком этапе возникает задержка: на стороне клиента, сети, сервера или при отрисовке страницы.

Использование вкладки «Обзор»

1. Открыть раздел «Браузерный мониторинг».

2. Выбрать нужное приложение.

3. В дополнительном меню открыть вкладку «Обзор».

4. Проверить показатели LCP, INP, FID и CLS.

5. Оценить распределение загрузок страниц по категориям качества.

6. Найти проблемные URL в таблицах.

7. Проанализировать дополнительные графики производительности.

8. При необходимости перейти к другим вкладкам приложения для более детального анализа.

Вкладка «Просмотры страниц»

Вкладка «Просмотры страниц» предназначена для анализа отдельных страниц браузерного приложения. На данной вкладке отображается список URL-адресов страниц и основные показатели их производительности и пользовательской активности.

Рисунок 38 — Вкладка «Просмотры страниц» браузерного приложения

Фильтры вкладки «Просмотры страниц»

В верхней части страницы расположены фильтры: «Браузер», «ОС», «Город». Также в правой верхней части страницы расположен выбор периода отображения данных. Фильтры позволяют анализировать производительность страниц по различным сегментам пользователей.

Таблица просмотров страниц

Основную часть вкладки занимает таблица «Просмотры страниц». В таблице отображаются: страница, медианное время ответа, среднее время ответа, пропускная способность и затраченное время.

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

График по уникальным пользователям

В нижней части вкладки отображается график «Топ 5 страниц по уникальным пользователям». Он показывает страницы, которые наиболее активно посещаются пользователями за выбранный период.

Использование вкладки «Просмотры страниц»

1. Открыть раздел «Браузерный мониторинг».

2. Выбрать нужное приложение.

3. В дополнительном меню перейти на вкладку «Просмотры страниц».

4. При необходимости настроить фильтры «Браузер», «ОС» и «Город».

5. Просмотреть таблицу страниц и сравнить значения времени ответа.

6. Определить страницы с высокой нагрузкой или большим временем обработки.

7. Проанализировать график «Топ 5 страниц по уникальным пользователям».

Когда использовать вкладку «Просмотры страниц»

• для анализа производительности отдельных страниц
• для поиска наиболее посещаемых URL
• для выявления страниц с повышенным временем ответа
• для анализа пользовательской активности по страницам
• для поиска страниц, которые вносят наибольший вклад в общее время загрузки.

Вкладка «AJAX»

Вкладка «AJAX» предназначена для анализа асинхронных запросов браузерного приложения. На данной вкладке отображаются запросы, выполняемые приложением в процессе работы страницы без полной перезагрузки.

*Рисунок 39 — Вкладка «AJAX». Список запросов и графики длительности

Рисунок 40 — Вкладка «AJAX». Распределение запросов и ошибки

Фильтры вкладки «AJAX»

В верхней части вкладки доступны фильтры «Браузер», «ОС» и «Город». Также доступен выбор периода отображения данных. Фильтры позволяют анализировать AJAX-запросы по отдельным группам пользователей.

Список AJAX-запросов

В таблице «Список AJAX запросов» отображаются запрос, среднее время ответа, объём переданной информации, RPM и затраченное время. Таблица помогает определить частые, медленные и ресурсоёмкие запросы.

Графики AJAX-запросов

Ниже таблицы отображаются графики длительности AJAX-запросов и средней передачи данных за запрос. Они помогают выявлять нестабильные или периодически замедляющиеся запросы.

Распределение AJAX-запросов

Диаграммы распределения показывают AJAX-запросы по браузерам, операционным системам и городам. Это помогает определить пользовательские сегменты, формирующие основную нагрузку.

Ошибки AJAX-запросов

Блок «Статус коды ошибок AJAX запросов» показывает ошибки, возникшие при выполнении AJAX-запросов: код ошибки, запрос, количество ошибок и временной интервал возникновения.

Использование вкладки «AJAX»

1. Открыть раздел «Браузерный мониторинг».

2. Выбрать нужное приложение.

3. В дополнительном меню перейти на вкладку «AJAX».

4. При необходимости настроить фильтры «Браузер», «ОС» и «Город».

5. Проверить таблицу AJAX-запросов.

6. Найти запросы с высоким средним временем ответа или большой долей затраченного времени.

7. Проверить графики длительности и объёма передаваемых данных.

8. Проанализировать блок ошибок AJAX-запросов.

Когда использовать вкладку «AJAX»

• для анализа backend-запросов, выполняемых из браузера
• для поиска медленных AJAX-запросов
• для анализа ошибок клиент-серверного взаимодействия
• для оценки объёма передаваемых данных
• для определения запросов, влияющих на пользовательский интерфейс.

Вкладка «Ошибки»

Вкладка «Ошибки» предназначена для анализа ошибок, возникающих в браузере при работе пользовательского приложения. На вкладке отображаются наиболее частые сообщения об ошибках, их количество и распределение во времени.

Рисунок 41 — Вкладка «Ошибки» браузерного приложения

Фильтры вкладки «Ошибки»

В верхней части вкладки доступны фильтр «URL группа», выбор периода отображения данных, элементы навигации по времени и обновления страницы.

График частых сообщений об ошибках

В верхней части вкладки отображается график «5 самых частых сообщений об ошибках». Каждый цвет на графике соответствует отдельному сообщению об ошибке.

Таблица сообщений об ошибках

В таблице «Сообщения об ошибках» доступны столбцы «Количество» и «Текст». Таблица позволяет определить, какие ошибки встречаются чаще всего и какой текст ошибки необходимо использовать для дальнейшего анализа.

Использование вкладки «Ошибки»

1. Открыть раздел «Браузерный мониторинг».

2. Выбрать нужное приложение.

3. В дополнительном меню перейти на вкладку «Ошибки».

4. При необходимости настроить фильтр «URL группа» и выбрать период.

5. Просмотреть график частых сообщений об ошибках.

6. Определить, какие ошибки встречаются чаще всего.

7. Сопоставить время появления ошибок с другими вкладками браузерного мониторинга.

8. При необходимости передать текст ошибки разработчикам для дальнейшего анализа.

Когда использовать вкладку «Ошибки»

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

Вкладка «Трассировки сессии»

Вкладка «Трассировки сессии» предназначена для просмотра пользовательских сессий браузерного приложения. На вкладке отображаются отдельные пользовательские обращения к приложению с указанием URL, времени события, количества ошибок и времени загрузки.

Рисунок 42 — Вкладка «Трассировки сессии» браузерного приложения

Состав таблицы трассировок сессий

Основную часть вкладки занимает таблица «Трассировки сессии». В таблице отображаются URL, время события, количество ошибок и время загрузки страницы или пользовательского события.

Использование вкладки «Трассировки сессии»

1. Открыть раздел «Браузерный мониторинг».

2. Выбрать нужное приложение.

3. В дополнительном меню перейти на вкладку «Трассировки сессии».

4. Выбрать нужный период отображения данных.

5. Найти интересующую сессию по времени, URL, количеству ошибок или времени загрузки.

6. При необходимости сопоставить найденную сессию с вкладками «Ошибки», «AJAX» и «Просмотры страниц».

Когда использовать вкладку «Трассировки сессии»

• для анализа отдельных пользовательских сессий
• для поиска сессий с ошибками
• для анализа медленных загрузок страниц
• для проверки поведения приложения в конкретный момент времени
• для сопоставления пользовательской сессии с ошибками, AJAX-запросами и показателями загрузки.