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

1. Обзор

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

3b1284f5144b54f6.png

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

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

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

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

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

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

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

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

Импортируйте начальное приложение

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

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

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

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

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

  1. Нажмите Создать проект .

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

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

ea9ab0db531a104c.png

Включить вход в Google для аутентификации Firebase

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

Вам необходимо включить вход в Google :

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

7f3040a646c2e502.png

Включить Cloud Firestore

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

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

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

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

24bd1a097492eac6.png

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

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

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

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

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

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

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

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

Убедитесь, что ваша версия Firebase CLI — v8.0.0 или новее.

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

Мы настроили шаблон веб-приложения для извлечения конфигурации вашего приложения для хостинга Firebase из локального каталога вашего приложения (репозитория, который вы клонировали ранее в лаборатории кода). Но чтобы получить конфигурацию, нам нужно связать ваше приложение с вашим проектом 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, вы можете импортировать специальный скрипт, который выполнит эту настройку за вас. Для этой лаборатории мы уже добавили следующую строку в конец файла 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();

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

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

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

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

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

Откройте файл 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 недоступен. В этом сценарии вы по-прежнему можете добавлять собственные трассировки с помощью API пользовательского времени . SDK производительности Firebase будет получать длительности из метода 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 в свой код выполните следующие действия, чтобы развернуть свой код на хостинге Firebase:

  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 на двух ваших собственных поддоменах 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 для мониторинга производительности и собрали автоматические и пользовательские трассировки для измерения реальной производительности вашего чат-приложения!

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

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

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