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

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

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

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

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

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

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

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

  2. מוסיפים את Performance Monitoring JS SDK ומפעילים את 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.

השלבים הבאים