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

1. Обзор

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

Эта лаборатория кода является продолжением веб-лаборатории Firebase , в которой вы узнаете, как создать приложение для чата с помощью Firebase Web SDK. Если вы хотите узнать, как использовать платформу Firebase в Интернете для создания приложения для чата, сначала пройдите веб-лабораторию кода Firebase . Если вы уже знаете, как использовать платформу Firebase и интерфейс командной строки, и хотите узнать о мониторинге производительности Firebase, вы попали по адресу.

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

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

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

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

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

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

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

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

Репозиторий friendlychat-web содержит примеры проектов для нескольких платформ.

Эта кодовая лаборатория использует только эти два репозитория:

• 📁 Performance-monitoring-start : начальный код, который вы будете использовать во время этой лабораторной работы.
• 📁 Мониторинг производительности : полный код готового примера приложения.

Примечание . Если вы хотите запустить готовое приложение, вам все равно придется создать проект Firebase в консоли Firebase.

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

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

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

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

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

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

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

Важно ! Ваш проект Firebase будет называться FriendlyChat, но Firebase автоматически присвоит ему уникальный идентификатор проекта в виде friendlychat-1234 . Этот уникальный идентификатор фактически идентифицирует ваш проект (в том числе в CLI), тогда как FriendlyChat — это просто отображаемое имя.

Обновите тарифный план Firebase

Чтобы использовать Cloud Storage for Firebase, ваш проект Firebase должен находиться на тарифном плане с оплатой по мере использования (Blaze) , что означает, что он связан с платежным аккаунтом Cloud .

• Для учетной записи Cloud Billing требуется способ оплаты, например кредитная карта.
• Если вы новичок в Firebase и Google Cloud, проверьте, имеете ли вы право на получение кредита в размере 300 долларов США и бесплатную пробную платежную учетную запись Cloud .
• Если вы выполняете эту лабораторную работу в рамках мероприятия, спросите у организатора, есть ли у него какие-либо облачные кредиты.

Чтобы обновить проект до плана Blaze, выполните следующие действия:

1. В консоли Firebase выберите обновление плана .
2. Выберите план Blaze. Следуйте инструкциям на экране, чтобы связать учетную запись Cloud Billing с вашим проектом.
   Если вам нужно было создать учетную запись Cloud Billing в рамках этого обновления, вам может потребоваться вернуться к процессу обновления в консоли Firebase, чтобы завершить обновление.

Примечание . После завершения этой лаборатории кода вы можете перейти на бесплатный тарифный план (Spark) .

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

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

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

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

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

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

Настройте Cloud Firestore

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

Вот как настроить Cloud Firestore в вашем проекте Firebase:

1. На левой панели консоли Firebase разверните «Сборка» и выберите «База данных Firestore» .
2. Нажмите Создать базу данных .
3. Оставьте для идентификатора базы данных значение (default) .
4. Выберите местоположение для вашей базы данных, затем нажмите «Далее» .
   Для реального приложения вам нужно выбрать местоположение, близкое к вашим пользователям.
5. Нажмите «Запустить в тестовом режиме» . Прочтите отказ от ответственности о правилах безопасности.
   Позже в этой лабораторной работе вы добавите правила безопасности для защиты ваших данных. Не распространяйте и не публикуйте приложение без добавления правил безопасности для вашей базы данных.
6. Нажмите Создать .

Настройка облачного хранилища для Firebase

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

Вот как настроить Cloud Storage для Firebase в вашем проекте Firebase:

1. На левой панели консоли Firebase разверните «Сборка» и выберите «Хранилище» .
2. Нажмите «Начать» .
3. Выберите расположение для сегмента хранилища по умолчанию.
   Сегменты в US-WEST1 , US-CENTRAL1 и US-EAST1 могут использовать преимущества уровня «Всегда бесплатно» для Google Cloud Storage. Во всех остальных местах сегменты соответствуют ценам и использованию Google Cloud Storage .
4. Нажмите «Запустить в тестовом режиме» . Прочтите отказ от ответственности о правилах безопасности.
   Позже в этой лабораторной работе вы добавите правила безопасности для защиты ваших данных. Не распространяйте и не публикуйте приложение без добавления правил безопасности для сегмента хранилища.
5. Нажмите Создать .

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

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

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

firebase --version

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

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

firebase login

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

4. Убедитесь, что ваша командная строка обращается к локальному каталогу performance-monitoring-start вашего приложения.
5. Свяжите свое приложение с проектом Firebase, выполнив следующую команду:

firebase use --add

6. При появлении запроса выберите идентификатор проекта, а затем присвойте проекту Firebase псевдоним.

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

7. Следуйте остальным инструкциям в командной строке.

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';

2. Нам также необходимо инициализировать Firebase SDK с помощью объекта конфигурации, содержащего информацию о проекте Firebase и веб-приложении, которое мы хотим использовать. Поскольку мы используем хостинг Firebase, вы можете импортировать специальный скрипт, который выполнит эту настройку за вас. Для этой лаборатории мы уже добавили следующую строку в конец файла public/index.html , но еще раз проверьте ее наличие.

index.html

<!-- This script is created by webpack -->
<script type="module" src="scripts/main.js"></script>

3. В файле 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 SDK для Интернета. Дополнительные сведения см. в разделе Начало работы с мониторингом производительности в Интернете .

На следующих шагах вы узнаете о добавлении пользовательских трассировок с помощью 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");

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

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>

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

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

3. В консоли должно появиться следующее:

=== 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.firebasestorage.app
✔  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

4. Посетите свое веб-приложение, которое теперь полностью размещено с помощью хостинга Firebase на двух ваших собственных поддоменах Firebase: https://<projectId>.firebaseapp.com и https://<projectId>.web.app .

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

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

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

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

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

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

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

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

Примечание . Данные о производительности обычно отображаются в течение 12 часов. Обязательно зайдите позже, если вы не видите результатов в консоли Firebase.

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

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

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

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

1. Откройте вкладку «На устройстве» .

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

2. Нажмите saveImageMessage в таблице « Длительность» , чтобы просмотреть конкретные метрики трассировки.

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

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

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

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

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

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

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

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

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

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

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

• firebase.google.com
• firebase.google.com/docs/perf-mon/get-started-web
• web.dev/быстро/