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

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

Если вы еще этого не сделали, посетите страницу «Добавить 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 Dev Tools или « Сетевой монитор» для Firefox ).

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

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

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

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

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

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

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

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

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

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

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

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

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