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

Прежде чем начать

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

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

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

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

Шаг 1 : Добавьте и инициализируйте Performance Monitoring

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

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

Web

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

Web

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 : Добавьте первую библиотеку полифилов задержки ввода.

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

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

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

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

  1. Размещайте и просматривайте ваше веб-приложение в локальной среде.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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