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

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

אם עדיין לא עשית זאת, יש להיכנס אל מוסיפים את 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.

השלבים הבאים