بدء استخدام ميزة "مراقبة الأداء" للويب

قبل البدء

إذا لم يسبق لك إجراء ذلك، انتقِل إلى مقالة إضافة Firebase إلى مشروع JavaScript للتعرّف على كيفية:

  • إنشاء مشروع Firebase

  • تسجيل تطبيق الويب في Firebase

يُرجى العِلم أنّه عند إضافة Firebase إلى تطبيقك، قد تُكمل بعض الخطوات الموضّحة لاحقًا في هذه الصفحة (مثل إضافة حزمة SDK وإعداد Firebase).

الخطوة 1: إضافة Performance Monitoring وتهيئته

  1. إذا لم يسبق لك إجراء ذلك، ثبِّت حزمة تطوير البرامج (SDK) لمنصّة Firebase بلغة JavaScript وأعِد تهيئة Firebase.

  2. أضِف حزمة تطوير البرامج (SDK) الخاصة بلغة JavaScript ‏(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: إضافة مكتبة polyfill الخاصة بتأخير الاستجابة الأولى

لقياس مقياس تأخّر الاستجابة عند أول إدخال، عليك إضافة مكتبة polyfill لهذا المقياس. للحصول على تعليمات التثبيت، يُرجى الرجوع إلى المستندات الخاصة بالمكتبة.

ليست هناك حاجة إلى إضافة مكتبة polyfill هذه لكي تعرض Performance Monitoring مقاييس تطبيقات الويب الأخرى.

الخطوة 3: إنشاء أحداث الأداء لعرض البيانات الأوّلية

يبدأ Firebase في معالجة الأحداث عند إضافة حزمة تطوير البرامج (SDK) إلى تطبيقك بنجاح. وإذا كنت لا تزال في مرحلة التطوير على جهازك، تفاعَل مع تطبيقك لإنشاء أحداث من أجل جمع البيانات ومعالجتها في البداية.

  1. عرض تطبيق الويب وتشغيله في بيئة محلية

  2. يمكنك إنشاء أحداث من خلال تحميل صفحات فرعية لموقعك الإلكتروني، والتفاعل مع تطبيقك، و/أو تشغيل طلبات الشبكة. احرص على إبقاء علامة تبويب المتصفّح مفتوحة لمدة 10 ثوانٍ على الأقل بعد تحميل الصفحة.

  3. انتقِل إلى لوحة بيانات الأداء في وحدة تحكّم Firebase. من المفترض أن تظهر لك البيانات الأولية في غضون بضع دقائق.

    إذا لم تظهر لك بياناتك الأولية، راجِع نصائح تحديد المشاكل وحلّها.

الخطوة 4: (اختياري) عرض رسائل السجلّ لأحداث الأداء

  1. افتح أدوات المطوّرين في المتصفّح (على سبيل المثال، علامة التبويب "الشبكة" في "أدوات مطوّري برامج Chrome" أو في أداة "مراقبة الشبكة" في Firefox).

  2. أعِد تحميل تطبيق الويب في المتصفّح.

  3. راجِع رسائل السجلّ بحثًا عن أي رسائل خطأ.

  4. بعد بضع ثوانٍ، ابحث عن طلب شبكة إلى firebaselogging.googleapis.com في أدوات المطوّرين في المتصفّح. يشير توفّر طلب الشبكة هذا إلى أنّ المتصفّح يرسل بيانات الأداء إلى Firebase.

إذا كان تطبيقك لا يسجّل أحداث الأداء، راجِع نصائح تحديد المشاكل وحلّها.

الخطوة 5: (اختيارية) إضافة ميزة مراقبة مخصّصة لرمز معيّن

لمراقبة بيانات الأداء المرتبطة برمز معيّن في تطبيقك، يمكنك تسجيل عمليات تتبُّع الرموز المخصّصة.

باستخدام تتبُّع الرموز المخصّصة، يمكنك قياس المدة التي يستغرقها تطبيقك لإكمال مهمة معيّنة أو مجموعة من المهام، مثل تحميل مجموعة من الصور أو طلب البحث من قاعدة البيانات. المقياس التلقائي لتتبُّع الرمز المخصّص هو مدته، ولكن يمكنك أيضًا إضافة مقاييس مخصّصة، مثل عدد مرات الوصول إلى ذاكرة التخزين المؤقت وتحذيرات الذاكرة.

في الرمز البرمجي، يمكنك تحديد بداية ونهاية عملية تتبُّع رمز برمجي مخصّص (وإضافة أي مقاييس مخصّصة مرغوبة) باستخدام واجهة برمجة التطبيقات التي توفّرها حزمة تطوير البرامج (SDK) Performance Monitoring.

انتقِل إلى إضافة مراقبة لرمز معيّن للاطّلاع على مزيد من المعلومات حول هذه الميزات وكيفية إضافتها إلى تطبيقك.

الخطوة 6: نشر تطبيقك ثم مراجعة النتائج

بعد إثبات صحة Performance Monitoring، يمكنك نشر الإصدار المعدَّل من تطبيقك للمستخدمين.

يمكنك مراقبة بيانات الأداء في لوحة بيانات الأداء في وحدة تحكّم Firebase.

الخطوات التالية