תחילת העבודה עם מעקב ביצועים באינטרנט

לפני שמתחילים

אם עדיין לא עשיתם זאת, כדאי לעיין במאמר הוספת Firebase לפרויקט JavaScript כדי ללמוד איך:

  • יצירת פרויקט Firebase

  • רישום אפליקציית האינטרנט ב-Firebase

חשוב לזכור שכאשר מוסיפים את Firebase לאפליקציה, יכול להיות שתצטרכו לבצע חלק מהשלבים שמפורטים בהמשך הדף (לדוגמה, הוספת ה-SDK ואיפוס Firebase).

שלב 1: מוסיפים את Performance Monitoring ומפעילים אותו

  1. אם עדיין לא עשיתם זאת, מתקינים את Firebase JS SDK ומפעילים את Firebase.

  2. מוסיפים את ה-SDK של Performance Monitoring JS ומפעילים את 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 או Network Monitor ב-Firefox).

  2. מרעננים את אפליקציית האינטרנט בדפדפן.

  3. בודקים אם יש הודעות שגיאה בהודעות היומן.

  4. אחרי כמה שניות, מחפשים קריאה לרשת אל firebaselogging.googleapis.com בכלים למפתחים בדפדפן. נוכחות הקריאה הזו לרשת מראה שהדפדפן שולח נתוני ביצועים ל-Firebase.

אם לא מתועדים ביומן אירועי ביצועים באפליקציה, כדאי לעיין בטיפים לפתרון בעיות.

שלב 5: (אופציונלי) הוספת מעקב מותאם אישית לקוד ספציפי

כדי לעקוב אחרי נתוני הביצועים שמשויכים לקוד ספציפי באפליקציה, אפשר להשתמש במעקב אחר קוד בהתאמה אישית.

בעזרת מעקב קוד מותאם אישית, אפשר למדוד את משך הזמן שלוקח לאפליקציה להשלים משימה ספציפית או קבוצת משימות, כמו טעינת קבוצת תמונות או שליחת שאילתה למסד הנתונים. מדד ברירת המחדל של מעקב קוד בהתאמה אישית הוא משך הזמן שלו, אבל אפשר גם להוסיף מדדים מותאמים אישית, כמו היטים במטמון ואזהרות זיכרון.

בקוד, מגדירים את ההתחלה והסיום של מעקב קוד בהתאמה אישית (ומוסיפים את המדדים בהתאמה אישית הרצויים) באמצעות ה-API שסופק על ידי ה-SDK של Performance Monitoring.

במאמר הוספת מעקב אחרי קוד ספציפי תוכלו לקרוא מידע נוסף על התכונות האלה ועל האופן שבו מוסיפים אותן לאפליקציה.

שלב 6: פורסים את האפליקציה ובודקים את התוצאות

אחרי שתאמתו את Performance Monitoring, תוכלו לפרוס את הגרסה המעודכנת של האפליקציה למשתמשים.

אפשר לעקוב אחר נתוני הביצועים במרכז הבקרה לביצועים במסוף Firebase.

השלבים הבאים