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

1. Обзор

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

3b1284f5144b54f6.png

Что ты узнаешь

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

Что тебе понадобится

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

2. Получите образец кода.

Клонировать codelab в GitHub хранилище из командной строки:

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

С другой стороны , если вы не установили мерзавец, вы можете скачать репозиторий в виде архива .

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

Использование 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 консоли найдите раздел Develop в левой панели.
  2. Нажмите Authentication, затем нажмите Вход в систему вкладке метод ( перейти в консоль ).
  3. Включение входа в Google поставщика, а затем нажмите кнопку Сохранить.

7f3040a646c2e502.png

Включить Cloud Firestore

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

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

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

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

24bd1a097492eac6.png

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

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

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

  1. В Firebase консоль Разработает раздел, нажмите Storage.
  2. Нажмите НАЧАТЬ.
  3. Прочитайте отказ от ответственности о правилах безопасности для вашего проекта Firebase, а затем получил его.

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

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

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

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

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

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

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

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

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

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

5. Интеграция с Firebase Performance Monitoring.

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

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

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

index.js

// TODO: Import the Firebase Performance Monitoring library here.
 import {
   getPerformance,
   trace
 } from 'firebase/performance';
  1. Нам также необходимо инициализировать Firebase SDK с помощью объекта конфигурации, который содержит информацию о проекте Firebase и веб-приложении, которое мы хотим использовать. Поскольку мы используем хостинг Firebase, вы можете импортировать специальный скрипт, который выполнит эту настройку за вас. Для этого codelab мы уже добавили следующую строку для вас в нижней части 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. [Extend] Добавьте настраиваемую трассировку с помощью User Timing API.

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

Мы собираемся измерить продолжительность загрузки скриптов стилей приложений с помощью 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 консоль и перейдите на вкладку Performance. Если вы видите приветственное сообщение «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. Нажмите Aggregate пересмотреть распределение размеров изображения. Вы можете увидеть метрику, которую вы добавили для измерения размера изображения для этой настраиваемой кривой.

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 в ваше веб-приложение.
  • Добавление пользовательских трассировок в ваш код.
  • Запись настраиваемых показателей, привязанных к настраиваемой трассировке.
  • Сегментирование данных об эффективности с помощью настраиваемых атрибутов.
  • Понимание того, как использовать панель мониторинга производительности, чтобы получить представление о производительности вашего приложения.

Учить больше: