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

قبل البدء

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

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

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

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

الخطوة 1: إضافة Performance Monitoring وإعداده

  1. ثبِّت حزمة تطوير البرامج (SDK) لمنصة Firebase JS وابدأ 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();

تسجّل حزمة تطوير البرامج (SDK) لـ "Performance Monitoring" مؤشرات Core Web Vitals تلقائيًا.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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