Начало работы с мониторингом производительности в Интернете

Прежде чем вы начнете

Если вы еще этого не сделали, посетите страницу «Добавить Firebase в свой проект JavaScript» , чтобы узнать, как:

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

  • Зарегистрируйте свое веб-приложение в Firebase

Обратите внимание: когда вы добавляете Firebase в свое приложение, вы можете выполнить некоторые шаги, описанные ниже на этой странице (например, добавить SDK и инициализировать Firebase).

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

  1. Установите Firebase JS SDK и инициализируйте Firebase , если вы еще этого не сделали.

  2. Добавьте JS SDK Performance Monitoring и инициализируйте Performance Monitoring:

Веб-модульный API

import { initializeApp } from "firebase/app";
import { getPerformance } from "firebase/performance";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);


// Initialize Performance Monitoring and get a reference to the service
const perf = getPerformance(app);

Веб-API в пространстве имен

import firebase from "firebase/compat/app";
import "firebase/compat/performance";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);


// Initialize Performance Monitoring and get a reference to the service
const perf = firebase.performance();

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

Чтобы измерить первую метрику задержки ввода , вам нужно добавить библиотеку полифилов для этой метрики. Инструкции по установке можно найти в документации библиотеки.

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

Шаг 3. Создайте события производительности для отображения начальных данных.

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

  1. Обслуживание и просмотр вашего веб-приложения в локальной среде.

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

  3. Перейдите на панель «Производительность» консоли Firebase. Через несколько минут вы должны увидеть исходные данные.

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

Шаг 4. (Необязательно) Просмотрите сообщения журнала о событиях производительности.

  1. Откройте инструменты разработчика вашего браузера (например, вкладку «Сеть» для Chrome Dev Tools или «Сетевой монитор» для Firefox ).

  2. Обновите веб-приложение в браузере.

  3. Проверьте сообщения журнала на наличие сообщений об ошибках.

  4. Через несколько секунд найдите сетевой вызов firebaselogging.googleapis.com в инструментах разработчика вашего браузера. Наличие этого сетевого вызова показывает, что браузер отправляет данные о производительности в Firebase.

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

Шаг 5. (Необязательно) Добавьте собственный мониторинг для конкретного кода.

Чтобы отслеживать данные о производительности, связанные с конкретным кодом в вашем приложении, вы можете использовать специальные трассировки кода .

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

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

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

Шаг 6. Разверните приложение и просмотрите результаты.

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

Вы можете отслеживать данные о производительности на панели «Производительность» консоли Firebase.

Следующие шаги