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

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

If you haven't already, visit Add Firebase to your JavaScript project to learn how to:

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

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

Note that when you add Firebase to your app, you might complete some of the steps described later on this page (for example, adding the SDK and initializing Firebase).

Step 1 : Add and initialize Performance Monitoring

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

  2. Add the Performance Monitoring JS SDK and initialize 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();

Step 2 : Add the first input delay polyfill library

To measure the first input delay metric , you need to add the polyfill library for this metric. For installation instructions, refer to the library's documentation .

Adding this polyfill library is not required for Performance Monitoring to report the other web app metrics.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

In your code, you define the beginning and the end of a custom code trace (and add any desired custom metrics) using the API provided by the Performance Monitoring SDK.

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

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

After you've validated Performance Monitoring , you can deploy the updated version of your app to your users.

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

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