Какой смысл измерять производительность вашего приложения, если у вас нет централизованного места, где можно посмотреть эти метрики?

Никакого, вот и весь ответ.

И в то же время именно поэтому OpenReplay недавно добавил для своих пользователей возможность создавать пользовательские дашборды.

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

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

Давайте посмотрим, как пользователи могут это сделать.

Примечание: Если вам нужно краткое руководство, показывающее, как реализовать дашборд с пользовательскими метриками, вы можете посмотреть это видео на YouTube.

Чтобы начать, нажмите на раздел Dashboards в главном меню.

Затем нажмите на кнопку «Create Dashboard», которая смотрит прямо на вас из центра экрана:

После того как вы на неё нажмёте, вам будут представлены абсолютно все метрики, которые OpenReplay собирает о вашем приложении.

Вы можете рассматривать эти метрики в следующих категориях:

• Связанные с ошибками: эти метрики покажут вам проблемы вашего приложения.
• Связанные с производительностью: с помощью этих метрик вы сможете оценить, насколько хорошо ваше приложение работает для ваших пользователей.
• Связанные с ресурсами: проблемы с незагружающимися изображениями или замедления из-за слишком больших файлов JavaScript — это тот тип проблем, которые вы выявите с помощью этих метрик.
• Web Vitals: Это метрики, используемые поисковыми системами, такими как Google, для определения качества веб-страницы/приложения.
• Связанные с сессиями: Это метрики о самих записях воспроизведения, они дают вам представление о том, какой трафик получает ваше приложение и какой его процент вы захватываете.

Давайте посмотрим, как наши метрики могут быть организованы в рамках этих групп и что означает каждая из них:

• Errors by Origin: количество ошибок в день с разделением на сторонние и собственные (ваши) ошибки.
• Errors by Type: количество ошибок, классифицированных по коду состояния, JavaScript или интеграции с другими сервисами.
• Errors Per Domain: количество ошибок (сгруппированных по домену) за выбранный период.
• Fetch Calls with Errors: Вызовы/ответы fetch, имеющие коды 5xx-4xx.
• Sessions Affected by JS Errors: количество сессий в день, затронутых ошибками JS.
• Top Domains with 4XX Fetch Errors: основные домены с ошибками типа Bad Request
• Top Domains with 5XX Fetch Errors: основные домены, где ошибки возникают на стороне сервера.
• Crashes: количество сбоев вашего приложения в день.

• CPU Load: средняя загрузка ЦП в день.
• DOM Build Time: среднее время, необходимое для построения всего DOM вашего приложения, распределённое во времени.
• Slowest Domains: Домены, с которых были загружены самые медленные ресурсы (js, css, изображения).
• Request Load Time: Время отклика http-запроса (fetch/xhr/axios).
• Response Time: среднее время отклика на запросы, отправленные вашим приложением.
• Memory Consumption: среднее потребление памяти по всем записям вашего проекта.
• Sessions impacted by Slow Pages: количество сессий, в которых ежедневно обнаруживаются медленные страницы.
• Frame Rate: средняя отзывчивость вашего пользовательского интерфейса.
• Page Load Time: среднее время, проходящее с момента, когда ваш браузер отправляет запрос на бэкенд, до момента, когда страница полностью загрузилась.
• Pages Response Time: среднее время, необходимое вашему серверу для отправки ответа браузеру.
• Pages Response Time Distribution: Распределение времени отклика страниц (загрузок), чтобы вы могли заметить

• Breakdown of Loaded Resources: количество ресурсов, загруженных за день, с разделением на CSS, изображения и скрипты.
• Missing Resources: Изображения (преимущественно), шрифты, иконки, таблицы стилей или js, которые не удалось загрузить и которые поэтому отсутствуют. Это означает, что страницы, которые их отображают, будут затронуты.
• Resources Fetch Time: среднее время, необходимое для загрузки различных ресурсов
• Slowest Resources: список самых медленных ресурсов с соответствующим временем их загрузки.
• Image Load Time: среднее время, необходимое для загрузки ваших изображений.
• Resources Loaded vs. Visually Complete: количество загруженных ресурсов в сравнении с количеством времени, необходимым для их визуальной загрузки (как изображений, но с учётом также скриптов и CSS).
• Resources loaded vs. Response End: количество ресурсов, загруженных через XHR (и другие типы запросов), в сравнении со временем, затраченным бэкендом на их доставку.

• Time to Interactive: среднее количество времени, необходимое вашему пользовательскому интерфейсу, чтобы стать полностью интерактивным (отзывчивым к вводу пользователя).
• Speed Index by Location: среднее время (по странам), необходимое для заполнения видимого содержимого вашей страницы.
• First Paint: среднее время, необходимое браузеру для отрисовки первого пикселя вашего пользовательского интерфейса.
• DOM Content Loaded: среднее время, необходимое для полной загрузки исходного HTML-документа и его разбора браузером (без учёта таблиц стилей, изображений и подкадров).
• Time to Render: Время, необходимое браузеру для отрисовки загруженного DOM. Было бы неплохо показать разницу с DOM Content Loaded.
• Time Till First Byte: среднее время, необходимое браузеру вашего пользователя для получения первого байта после запроса страницы.

• Captured Requests: количество запросов, выполненных в каждой записанной сессии.
• Captured Sessions: количество сессий, захваченных для проекта с течением времени.
• No. of Visited Pages: среднее количество посещённых страниц за сессию.
• Sessions Per Browser: Сколько сессий захвачено для конкретного браузера (например, Chrome).
• Session Duration: средняя продолжительность сессии в день для вашего проекта.

В вашем распоряжении 40 метрик на выбор, а это значит, что вы можете создать именно такой дашборд, который вам нужен, что бы вы ни искали.

После того как вам будет представлен список метрик, всё, что вам нужно сделать, — это нажать на те, которые вам нужны, а когда у вас будут все, нажать на кнопку «Create», расположенную в нижнем левом углу экрана.

Помимо предопределённых метрик, представленных платформой, вы можете создавать свои собственные, чтобы полностью настроить уровень детализации, который у вас есть внутри ваших дашбордов. В том же разделе Dashboards вместо создания нового дашборда нажмите на опцию Metrics в левой части экрана и выберите «Create Metric».

Дайте ей название, в моём случае я назову её «Sessions from Spain» (вы поймёте почему через минуту). Затем выберите тип метрики, у вас есть:

• Timeseries: это построит график количества сессий, соответствующих критериям фильтрации ниже.
• Table of [option]: это выведет список того, что вы выберете для «option» (это может быть Users, Sessions, JS Errors, Issues, Browsers, Devices, Countries и URLs). Каждый элемент этого списка будет кликабельным, и вы сможете получить по нему больше деталей.
• Funnels: это создаст воронку на основе выбранных вами фильтров (ознакомьтесь с этим руководством, чтобы понять, как извлечь пользу из воронок).

Если вы хотите узнать, как работать со списком JSErrors, ознакомьтесь с этим другим руководством.

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

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

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

Итак, вы возьмёте:

• Slowest resources
• Sessions impacted by Slow Pages
• Framerate
• Response time
• Time to Interactive
• Вашу пользовательскую метрику «Sessions from spain»

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

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

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

• Today, показывающий вам только данные, собранные за сегодня на данный момент.
• Yesterday, показывающий вам сводку за предыдущий день.
• Past seven days, который является выбранной по умолчанию опцией.
• Past 30 days, показывающий вам более широкий диапазон времени.
• Custom range, который позволяет вам выбрать нужный диапазон времени.

Вы также можете продолжать добавлять метрики в новый дашборд, используя кнопку «Add Metric» в верхнем левом углу рядом с заголовком.

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

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