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

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

אם עדיין לא עשיתם זאת, כדאי לעבור אל הוספת 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 או הכלי 'מעקב אחר רשת' ב-Firefox).

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

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

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

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

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

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

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

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

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

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

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

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

השלבים הבאים