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

قبل البدء

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

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

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

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

الخطوة 1: إضافة ميزة "مراقبة الأداء" وإعدادها

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

  2. إضافة حزمة JS SDK لمراقبة الأداء وإعداد مراقبة الأداء:

واجهة برمجة التطبيقات Web modular 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);

واجهة برمجة التطبيقات لمساحة الاسم على الويب 

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 هذه لتتمكّن "مراقبة الأداء" من تسجيل المقاييس الأخرى لتطبيق الويب.

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

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

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

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

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

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

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

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

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

  3. تحقَّق من رسائل السجلّ بحثًا عن أي رسائل خطأ.

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

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

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

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

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

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

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

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

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

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

الخطوات اللاحقة