Мониторинг производительности Firebase для Интернета

1. Обзор

В этой лаборатории кода вы узнаете, как использовать мониторинг производительности Firebase для измерения производительности веб-приложения чата. Посетите https://fireperf-friendlychat.web.app/ , чтобы увидеть живую демонстрацию.

3b1284f5144b54f6.png

Что вы узнаете

  • Как добавить Firebase Performance Monitoring в ваше веб-приложение, чтобы получать готовые метрики (загрузка страницы и сетевые запросы).
  • Как измерить конкретный фрагмент кода с помощью пользовательских трассировок.
  • Как записывать дополнительные пользовательские метрики, привязанные к пользовательской трассировке.
  • Как дополнительно сегментировать данные об эффективности с помощью настраиваемых атрибутов.
  • Как использовать панель мониторинга производительности, чтобы понять производительность вашего веб-приложения.

Что вам понадобится

  • IDE или текстовый редактор по вашему выбору, например WebStorm , Atom , Sublime или VS Code.
  • Терминал/консоль
  • Браузер на ваш выбор, например Chrome
  • Пример кода лаборатории кода (см. следующий раздел этой лаборатории кода, чтобы узнать, как получить код.)

2. Получите пример кода

Клонируйте репозиторий GitHub лаборатории кода из командной строки:

git clone https://github.com/firebase/codelab-friendlychat-web

В качестве альтернативы, если у вас не установлен git, вы можете загрузить репозиторий в виде zip-файла .

Импортировать стартовое приложение

Используя IDE, откройте или импортируйте каталог 📁 performance-monitoring-start из клонированного репозитория. Этот каталог 📁 performance-monitoring-start содержит начальный код для лаборатории кода, которая представляет собой веб-приложение для чата.

3. Создайте и настройте проект Firebase

Создайте проект Firebase

  1. В консоли Firebase нажмите «Добавить проект» .
  2. Назовите свой проект Firebase FriendlyChat .

Запомните идентификатор проекта Firebase.

  1. Щелкните Создать проект .

Добавьте веб-приложение Firebase в проект

  1. Щелкните веб-значок 58d6543a156e56f9.png для создания нового веб-приложения Firebase.
  2. Зарегистрируйте приложение под псевдонимом Friendly Chat » и установите флажок «Также настроить Firebase Hosting для этого приложения ».
  3. Щелкните Зарегистрировать приложение .
  4. Щелкните оставшиеся шаги. Теперь вам не нужно следовать инструкциям на экране; они будут рассмотрены на следующих этапах этой кодовой лаборатории.

ea9ab0db531a104c.png

Включить вход через Google для проверки подлинности Firebase

Чтобы пользователи могли входить в приложение чата со своими учетными записями Google, мы будем использовать метод входа Google .

Вам нужно включить вход через Google :

  1. В консоли Firebase найдите раздел «Разработка» на левой панели.
  2. Щелкните «Аутентификация» , затем щелкните вкладку «Способ входа» ( перейдите в консоль ).
  3. Включите поставщика услуг входа Google , а затем нажмите Сохранить .

7f3040a646c2e502.png

Включить облачное хранилище Firestore

Веб-приложение использует Cloud Firestore для сохранения сообщений чата и получения новых сообщений чата.

Вам нужно включить Cloud Firestore:

  1. В разделе «Разработка» консоли Firebase нажмите «База данных» .
  2. Нажмите Создать базу данных на панели Cloud Firestore.
  3. Выберите параметр « Запустить в тестовом режиме» , затем нажмите «Включить» после прочтения заявления об отказе от ответственности в отношении правил безопасности.

Стартовый код для этой лаборатории включает более безопасные правила. Мы развернем их позже в лаборатории кода.

24bd1a097492eac6.png

Включить облачное хранилище

Веб-приложение использует облачное хранилище для Firebase для хранения, загрузки и обмена изображениями.

Вам нужно включить облачное хранилище:

  1. В разделе «Разработка» консоли Firebase нажмите «Хранилище» .
  2. Нажмите «Начать» .
  3. Прочтите заявление об отказе от ответственности в отношении правил безопасности для вашего проекта Firebase, а затем нажмите «Понятно» .

Исходный код включает базовое правило безопасности, которое мы развернем позже в лаборатории кода.

4. Установите интерфейс командной строки Firebase

Интерфейс командной строки (CLI) Firebase позволяет вам использовать Firebase Hosting для локального обслуживания вашего веб-приложения, а также для развертывания вашего веб-приложения в проекте Firebase.

  1. Установите CLI, следуя этим инструкциям в документации Firebase.
  2. Убедитесь, что CLI установлен правильно, выполнив следующую команду в терминале:
firebase --version

Убедитесь, что ваша версия интерфейса командной строки Firebase — 8.0.0 или более поздняя.

  1. Авторизуйте интерфейс командной строки Firebase, выполнив следующую команду:
firebase login

Мы настроили шаблон веб-приложения, чтобы получить конфигурацию вашего приложения для Firebase Hosting из локального каталога вашего приложения (репозиторий, который вы клонировали ранее в лаборатории кода). Но чтобы получить конфигурацию, нам нужно связать ваше приложение с вашим проектом Firebase.

  1. Убедитесь, что ваша командная строка обращается к локальному каталогу performance-monitoring-start вашего приложения.
  2. Свяжите свое приложение с проектом Firebase, выполнив следующую команду:
firebase use --add
  1. При появлении запроса выберите идентификатор своего проекта, а затем дайте вашему проекту Firebase псевдоним.

Псевдоним полезен, если у вас несколько сред (производственная, промежуточная и т. д.). Однако для этой кодлабы давайте просто воспользуемся псевдонимом default .

  1. Следуйте оставшимся инструкциям в вашей командной строке.

5. Интеграция с мониторингом производительности Firebase

Существуют различные способы интеграции с Firebase Performance Monitoring SDK для Интернета (подробности см. в документации ). В этой лаборатории кода мы включим мониторинг производительности с URL-адресов хостинга .

Добавьте мониторинг производительности и инициализируйте Firebase

  1. Откройте файл src/index.js , затем добавьте следующую строку под TODO , чтобы включить Firebase Performance Monitoring SDK.

index.js

// TODO: Import the Firebase Performance Monitoring library here.
 import {
   getPerformance,
   trace
 } from 'firebase/performance';
  1. Нам также необходимо инициализировать Firebase SDK с помощью объекта конфигурации, который содержит информацию о проекте Firebase и веб-приложении, которое мы хотим использовать. Поскольку мы используем Firebase Hosting, вы можете импортировать специальный скрипт, который сделает эту настройку за вас. Для этой лаборатории кода мы уже добавили для вас следующую строку в конец файла public/index.html , но дважды проверьте, есть ли она там.

index.html

<!-- This script is created by webpack -->
<script type="module" src="scripts/main.js"></script>
  1. В файле src/index.js добавьте следующую строку под TODO , чтобы инициализировать мониторинг производительности.

index.js

// TODO: Initialize Firebase Performance Monitoring.
getPerformance();

Мониторинг производительности теперь будет автоматически собирать для вас показатели загрузки страниц и сетевых запросов, когда пользователи используют ваш сайт! Обратитесь к документации , чтобы узнать больше об автоматической трассировке загрузки страниц.

Добавьте первую библиотеку polyfill задержки ввода

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

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

Эта библиотека polyfill не является обязательной для интеграции мониторинга производительности.

Откройте файл public/index.html и раскомментируйте следующую строку.

index.html

<!-- TODO: Enable First Input Delay polyfill library. -->
<script type="text/javascript">!function(n,e){var t,o,i,c=[],f={passive:!0,capture:!0},r=new Date,a="pointerup",u="pointercancel";function p(n,c){t||(t=c,o=n,i=new Date,w(e),s())}function s(){o>=0&&o<i-r&&(c.forEach(function(n){n(o,t)}),c=[])}function l(t){if(t.cancelable){var o=(t.timeStamp>1e12?new Date:performance.now())-t.timeStamp;"pointerdown"==t.type?function(t,o){function i(){p(t,o),r()}function c(){r()}function r(){e(a,i,f),e(u,c,f)}n(a,i,f),n(u,c,f)}(o,t):p(o,t)}}function w(n){["click","mousedown","keydown","touchstart","pointerdown"].forEach(function(e){n(e,l,f)})}w(n),self.perfMetrics=self.perfMetrics||{},self.perfMetrics.onFirstInputDelay=function(n){c.push(n),s()}}(addEventListener,removeEventListener);</script>

На этом вы закончили интеграцию с Firebase Performance Monitoring в свой код!

На следующих шагах вы узнаете о добавлении пользовательских трассировок с помощью Firebase Performance Monitoring. Если вы хотите собирать только автоматические трассировки, перейдите в раздел «Развернуть и начать отправку образов».

6. Добавьте пользовательскую трассировку в свое приложение

Мониторинг производительности позволяет создавать пользовательские трассировки . Пользовательская трассировка — это отчет о продолжительности блока выполнения в вашем приложении. Вы определяете начало и конец пользовательской трассировки с помощью API, предоставляемых SDK.

  1. В файле src/index.js получите объект производительности, а затем создайте пользовательскую трассировку для загрузки графического сообщения.

index.js

// TODO: Create custom trace to monitor image upload.
const t = trace(perf, "saveImageMessage");
  1. Чтобы записать пользовательскую трассировку, необходимо указать начальную и конечную точки трассировки. Вы можете думать о трассировке как о таймере.

index.js

// TODO: Start the "timer" for the custom trace.
t.start();

 ...

    // TODO: Stop the "timer" for the custom trace.
    t.stop();

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

7. Добавьте пользовательскую метрику в свое приложение.

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

  1. Найдите пользовательскую трассировку из предыдущего шага (определенную в вашем файле src/index.js ).
  2. Добавьте следующую строку под TODO , чтобы записать размер загруженного изображения.

index.js

 ...

// TODO: Record image size.
t.putMetric('imageSize', file.size);

 ...

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

8. Добавьте настраиваемый атрибут в свое приложение

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

  1. Используйте пользовательскую трассировку, определенную в вашем файле src/index.js .
  2. Добавьте следующую строку под TODO , чтобы записать MIME-тип загруженного изображения.

index.js

 ...

// TODO: Record image MIME type.
t.putAttribute('imageType', file.type);

 ...

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

9. [Расширить] Добавить пользовательскую трассировку с помощью User Timing API.

SDK Firebase Performance Monitoring был разработан таким образом, чтобы его можно было загружать асинхронно, чтобы он не оказывал негативного влияния на производительность веб-приложений во время загрузки страницы. До загрузки SDK API мониторинга производительности Firebase недоступен. В этом сценарии вы по-прежнему можете добавлять пользовательские трассировки с помощью User Timing API . Firebase Performance SDK будет получать данные о длительности из Measure() и регистрировать их как пользовательские трассировки.

Мы собираемся измерить продолжительность загрузки скриптов стилей приложений с помощью User Timing API.

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

index.html

<!-- TODO: Mark the starting of `timer` for loading App Styling script. -->
<script type="text/javascript">performance && performance.mark('loadStylingStart');</script>
  1. Добавьте следующие строки, чтобы отметить конец загрузки сценариев стиля приложения и измерить продолжительность между началом и концом.

index.html

<!-- TODO: Mark the ending of `timer` for loading App Styling script. Measure the duration from start to end. -->
<script type="text/javascript">
  performance && performance.mark('loadStylingEnd');
  performance && performance.measure('loadStyling', 'loadStylingStart', 'loadStylingEnd');
</script>

Созданная здесь запись будет автоматически собрана Firebase Performance Monitoring. Позже вы сможете найти пользовательскую трассировку loadStyling в консоли Firebase Performance.

10. Разверните и начните отправлять изображения

Развертывание на хостинге Firebase

После добавления Firebase Performance Monitoring в свой код выполните следующие действия, чтобы развернуть код на Firebase Hosting:

  1. Убедитесь, что ваша командная строка обращается к локальному каталогу performance-monitoring-start вашего приложения.
  2. Разверните файлы в проекте Firebase, выполнив следующую команду:
firebase deploy
  1. Консоль должна отобразить следующее:
=== Deploying to 'friendlychat-1234'...

i  deploying firestore, storage, hosting
i  storage: checking storage.rules for compilation errors...
✔  storage: rules file storage.rules compiled successfully
i  firestore: checking firestore.rules for compilation errors...
✔  firestore: rules file firestore.rules compiled successfully
i  storage: uploading rules storage.rules...
i  firestore: uploading rules firestore.rules...
i  hosting[friendlychat-1234]: beginning deploy...
i  hosting[friendlychat-1234]: found 8 files in ./public
✔  hosting[friendlychat-1234]: file upload complete
✔  storage: released rules storage.rules to firebase.storage/friendlychat-1234.appspot.com
✔  firestore: released rules firestore.rules to cloud.firestore
i  hosting[friendlychat-1234]: finalizing version...
✔  hosting[friendlychat-1234]: version finalized
i  hosting[friendlychat-1234]: releasing new version...
✔  hosting[friendlychat-1234]: release complete

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview
Hosting URL: https://friendlychat-1234.firebaseapp.com
  1. Посетите свое веб-приложение, которое теперь полностью размещено с помощью Firebase Hosting в двух ваших собственных субдоменах Firebase: https://<projectId>.firebaseapp.com и https://<projectId>.web.app .

Убедитесь, что мониторинг производительности включен

Откройте консоль Firebase и перейдите на вкладку «Производительность» . Если вы видите приветственное сообщение «Обнаружен SDK», значит, вы успешно интегрировались с Firebase Performance Monitoring!

30df67e5a07d03b0.png

Отправить графическое сообщение

Создайте некоторые данные о производительности, отправив изображения в приложение чата.

  1. После входа в приложение чата нажмите кнопку загрузки изображения. 13734cb66773e5a3.png .
  2. Выберите файл изображения с помощью средства выбора файлов.
  3. Попробуйте отправить несколько изображений (несколько образцов хранятся в public/images/ ), чтобы вы могли протестировать распределение пользовательских метрик и пользовательских атрибутов.

Новые сообщения должны отображаться в пользовательском интерфейсе приложения вместе с выбранными вами изображениями.

11. Следите за приборной панелью

После развертывания веб-приложения и отправки графических сообщений от имени пользователя вы можете просмотреть данные о производительности на панели мониторинга производительности (в консоли Firebase).

Доступ к панели управления

  1. В консоли Firebase выберите проект, в котором есть ваше приложение Friendly Chat .
  2. На левой панели найдите раздел «Качество» и нажмите «Производительность» .

Просмотр данных на устройстве

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

  1. Щелкните вкладку На устройстве .
  • В таблице «Загрузки страниц» показаны различные показатели производительности, которые система мониторинга производительности автоматически собирает во время загрузки вашей страницы.
  • В таблице «Длительности» показаны все настраиваемые трассировки, которые вы определили в коде своего приложения.
  1. Нажмите saveImageMessage в таблице «Длительность» , чтобы просмотреть конкретные показатели трассировки.

e28758fd02d9ffac.png

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

c3cbcfc0c739a0a8.png

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

16983baa31e05732.png

  1. На открывшейся странице вы можете сегментировать данные продолжительности по типу MIME изображения, щелкнув imageType . Эти конкретные данные были зарегистрированы из-за атрибута imageType, который вы добавили к своей пользовательской трассировке.

8e5c9f32f42a1ca1.png

Просмотр сетевых данных

Сетевой запрос HTTP/S — это отчет, в котором фиксируется время ответа и размер полезной нагрузки сетевых вызовов.

  1. Вернитесь на главный экран панели мониторинга производительности.
  2. Щелкните вкладку Сеть , чтобы просмотреть список записей сетевых запросов для вашего веб-приложения.
  3. Просмотрите их, чтобы определить медленные запросы, и начните работать над исправлением, чтобы повысить производительность вашего приложения!

26a2be152a77ffb9.png

12. Поздравляем!

Вы включили Firebase SDK для мониторинга производительности и собрали автоматические трассировки и пользовательские трассировки для измерения реальной производительности вашего приложения чата!

Что мы рассмотрели:

  • Добавление Firebase Performance Monitoring SDK в ваше веб-приложение.
  • Добавление пользовательских трассировок в ваш код.
  • Запись пользовательских метрик, привязанных к пользовательской трассировке.
  • Сегментация данных о производительности с использованием настраиваемых атрибутов.
  • Понимание того, как использовать панель мониторинга производительности, чтобы получить представление о производительности вашего приложения.

Узнать больше: