/docs/tags/%D1%82%D1%80%D0%B5%D0%B9%D1%81%D1%8B-%D1%81%D0%B5%D1%81%D1%81%D0%B8%D0%B9/ Recent content in трейсы сессий on Документация Proto Observability Platform Hugo -- gohugo.io ru /docs/instrumentation/eum/session-traces/ Mon, 01 Jan 0001 00:00:00 +0000 /docs/instrumentation/eum/session-traces/ <p>На этой странице:</p> <ul> <li><a href="#%D0%BE%D0%B1%D0%B7%D0%BE%D1%80">Обзор</a></li> <li><a href="#%D1%81%D0%BF%D0%B8%D1%81%D0%BE%D0%BA-%D1%81%D0%B5%D1%81%D1%81%D0%B8%D0%B9">Список сессий</a></li> <li><a href="#%D0%B0%D0%BD%D0%B0%D0%BB%D0%B8%D0%B7-%D1%82%D1%80%D0%B5%D0%B9%D1%81%D0%B0-%D1%81%D0%B5%D1%81%D1%81%D0%B8%D0%B8">Анализ трейса сессии</a> <ul> <li><a href="#%D1%81%D0%B2%D0%BE%D0%B4%D0%BA%D0%B0">Сводка</a></li> <li><a href="#%D0%B4%D0%B5%D1%80%D0%B5%D0%B2%D0%BE-%D1%81%D0%BE%D0%B1%D1%8B%D1%82%D0%B8%D0%B9">Дерево событий</a></li> <li><a href="#%D1%81%D1%82%D0%B0%D1%82%D0%B8%D1%81%D1%82%D0%B8%D0%BA%D0%B0">Статистика</a></li> </ul> </li> </ul> <h2 id="обзор">Обзор</h2> <p>Proto Observability Platform записывает каждую пользовательскую сессию в виде распределённого трейса. Трейс сессии объединяет все события, произошедшие в рамках одной сессии пользователя:</p> <ul> <li><strong>Просмотры страниц</strong> (views) — первичная загрузка и навигация по SPA-роутам</li> <li><strong>Загрузки ресурсов</strong> (resources) — JavaScript, CSS, изображения, шрифты, XHR/Fetch-запросы</li> <li><strong>Действия пользователя</strong> (actions) — клики, скроллы и другие взаимодействия</li> <li><strong>Длинные задачи</strong> (long tasks) — операции, блокирующие основной поток UI</li> <li><strong>Ошибки</strong> (errors) — JavaScript-ошибки и сетевые ошибки</li> </ul> <p>Такой подход позволяет анализировать путь пользователя по приложению как единую транзакцию, аналогично трейсам бэкенд-запросов.</p> <h2 id="список-сессий">Список сессий</h2> <p>Раздел <strong>Цифровой опыт &gt; Веб-приложения &gt; Сессии</strong> отображает таблицу всех записанных пользовательских сессий.</p> <p><img src="../images/eum-session-list.png" alt="images/eum-session-list.png"></p> <p>Для каждой сессии отображаются:</p> <table> <thead> <tr> <th>Столбец</th> <th>Описание</th> </tr> </thead> <tbody> <tr> <td>Дата начала</td> <td>Время начала сессии</td> </tr> <tr> <td>ID сессии</td> <td>Уникальный идентификатор сессии (ссылка на трейс)</td> </tr> <tr> <td>Имя пользователя</td> <td>Имя пользователя, если задано через API агента</td> </tr> <tr> <td>Город</td> <td>Город, определённый по IP-адресу</td> </tr> <tr> <td>О сессии</td> <td>Дополнительная информация о сессии</td> </tr> <tr> <td>Время на сайте</td> <td>Общая длительность сессии</td> </tr> <tr> <td>Просмотры</td> <td>Количество просмотренных страниц</td> </tr> <tr> <td>Действия</td> <td>Количество действий пользователя</td> </tr> <tr> <td>Ошибки</td> <td>Количество ошибок за сессию</td> </tr> </tbody> </table> <p><strong>Фильтрация сессий</strong></p> <p>Доступны следующие параметры фильтрации:</p> <ul> <li>Версия ОС</li> <li>Версия приложения</li> <li>Город</li> <li>Имя пользователя</li> <li>Название ОС</li> <li>Тип устройства</li> <li>Email пользователя</li> <li>ID пользователя</li> </ul> <h2 id="анализ-трейса-сессии">Анализ трейса сессии</h2> <p>При клике на ID сессии открывается детальный трейс сессии с несколькими вкладками для анализа.</p> <h3 id="сводка">Сводка</h3> <p>Вкладка <strong>Сводка</strong> предоставляет общую информацию о сессии.</p> <p><img src="../images/eum-session-summary.png" alt="../images/eum-session-summary.png"></p> <p><strong>Общая информация:</strong></p> <ul> <li>Общая длительность сессии</li> <li>Количество спанов (событий)</li> <li>Наличие ошибок</li> <li>Время начала сессии</li> <li>Тип браузера и устройства</li> <li>Страна</li> </ul> <p><strong>Задействованные сервисы и затраченное время</strong> — диаграмма распределения времени по сервисам.</p> <p><strong>Контекст пользователя:</strong></p> <ul> <li>Город, страна и регион (определяются по IP-адресу)</li> <li>IP-адрес</li> <li>Операционная система и версия (<code>device.os.name</code>, <code>device.os.version</code>)</li> <li>Тип устройства (<code>device.type</code>)</li> <li>Браузер и версия (<code>ua.name</code>, <code>ua.version</code>)</li> <li>Полная строка User Agent (<code>ua.string</code>)</li> <li>ID просмотра и ID сессии</li> </ul> <p><strong>Анализ производительности:</strong></p> <ul> <li>Самый медленный спан — автоматическое определение наиболее медленной операции</li> <li>Количество спанов с ошибками</li> <li>Количество обращений к БД</li> <li>Количество внешних HTTP-вызовов</li> </ul> <p><strong>Операции по типу и затраченное время</strong> — визуальная разбивка по типам операций:</p> <ul> <li>Загрузка ресурса (resource) — общее количество спанов и суммарное время</li> <li>Длительная задача (long task)</li> <li>Просмотр (view)</li> <li>Действие (action)</li> </ul> <h3 id="дерево-событий">Дерево событий</h3> <p>Вкладка <strong>Дерево</strong> отображает хронологический водопад всех событий сессии, аналогично инструментам разработчика браузера.</p> <p><img src="../images/eum-session-tree.png" alt="../images/eum-session-tree.png"></p> <p>Каждое событие в дереве содержит:</p> <ul> <li><strong>Тип события</strong> — просмотр, загрузка ресурса, действие, ошибка</li> <li><strong>Название и URL</strong> — имя операции и связанный URL</li> <li><strong>Длительность</strong> — время выполнения операции</li> </ul> <p>При выборе спана в дереве открывается панель <strong>Детали</strong> с полным набором атрибутов:</p> <p><strong>Топология:</strong></p> <ul> <li>Сервис — имя отслеживаемого приложения</li> <li>Эндпоинт — тип и имя операции (например, <code>view: initial_load</code>)</li> <li>Тип спана — категория (Просмотр, Ресурс, Действие)</li> <li>Компонент — внутренняя классификация (например, <code>internal</code>)</li> <li>resource — URL связанного ресурса</li> </ul> <p><strong>Метрики производительности (для view-спанов):</strong></p> <ul> <li><code>action_count</code> — количество действий</li> <li><code>cumulative_layout_shift</code> — показатель CLS</li> <li><code>display.viewport.height</code> / <code>display.viewport.width</code> — размер области просмотра</li> <li><code>dom_complete</code>, <code>dom_content_loaded</code>, <code>dom_interactive</code> — таймеры DOM</li> <li><code>error_count</code> — количество ошибок</li> <li><code>first_contentful_paint</code> — время FCP</li> <li><code>foreground_periods_count</code>, <code>foreground_time_ratio</code> — метрики видимости</li> <li><code>frustration_count</code> — количество сигналов фрустрации</li> <li><code>is_active</code> — статус активности</li> <li><code>largest_contentful_paint</code> — время LCP</li> <li><code>load_event</code>, <code>loading_time</code> — таймеры загрузки</li> <li><code>loading_type</code> — тип загрузки (<code>initial_load</code> или <code>route_change</code>)</li> <li><code>long_task_count</code> — количество длинных задач</li> <li><code>referrer</code> — URL перехода</li> </ul> <h3 id="статистика">Статистика</h3> <p>Вкладка <strong>Статистика</strong> агрегирует все операции сессии по типам и предоставляет сводные метрики производительности.</p> <p><img src="../images/eum-session-stats.png" alt="../images/eum-session-stats.png"></p> <p>Для каждого типа операции отображаются:</p> <table> <thead> <tr> <th>Столбец</th> <th>Описание</th> </tr> </thead> <tbody> <tr> <td>Имя операции</td> <td>Тип и подтип операции (например, <code>resource: js</code>, <code>view: initial_load</code>)</td> </tr> <tr> <td>Тип спана</td> <td>Категория: resource, view, action, long_task</td> </tr> <tr> <td>Макс. длительность</td> <td>Максимальное время выполнения среди всех операций данного типа</td> </tr> <tr> <td>Мин. длительность</td> <td>Минимальное время выполнения</td> </tr> <tr> <td>Общая длительность</td> <td>Суммарное время всех операций данного типа</td> </tr> <tr> <td>Средняя длительность</td> <td>Среднее время выполнения</td> </tr> <tr> <td>Кол-во</td> <td>Количество операций данного типа</td> </tr> </tbody> </table> <p>Это позволяет быстро определить:</p> <ul> <li>Какие типы ресурсов загружаются чаще всего (например, JavaScript — 33 загрузки)</li> <li>Какие ресурсы занимают больше всего времени (например, images — 4.75 с суммарно)</li> <li>Есть ли длинные задачи и сколько они занимают</li> <li>Сколько было навигаций по страницам (<code>view: initial_load</code> vs <code>view: route_change</code>)</li> </ul>