מעקב אחר ביצועים ב-Firebase לאינטרנט

1. סקירה כללית

ב-Codelab הזה מוסבר איך להשתמש במעקב אחר ביצועים ב-Firebase כדי למדוד את הביצועים של אפליקציית אינטרנט לצ'אט. בכתובת https://fireperf-mobilechat.web.app/ אפשר לראות הדגמה בזמן אמת.

מה תלמדו

• איך מוסיפים את Firebase Performance Monitoring לאפליקציית האינטרנט כדי לקבל מדדים מוכנים לשימוש (טעינה של דפים ובקשות לרשת).
• איך מודדים קטע קוד ספציפי באמצעות מעקבים מותאמים אישית.
• איך מתעדים מדדים מותאמים אישית נוספים שמקושרים למעקב מותאם אישית.
• איך לפלח את נתוני הביצועים עוד יותר באמצעות מאפיינים מותאמים אישית
• איך משתמשים במרכז הבקרה למעקב אחר ביצועים כדי להבין את הביצועים של אפליקציית האינטרנט.

מה צריך

• סביבת פיתוח משולבת (IDE) או עורך טקסט לבחירתך, כמו WebStorm , Atom , Sublime או VS Code
• טרמינל/מסוף
• דפדפן לבחירתכם, כמו Chrome
• קוד לדוגמה ב-codelab (בקטע הבא ב-codelab מוסבר איך לקבל את הקוד).

2. לקבלת הקוד לדוגמה

משכפלים את מאגר הנתונים ב-GitHub של הקוד למעבדה משורת הפקודה:

git clone https://github.com/firebase/codelab-friendlychat-web

לחלופין, אם git לא מותקן, אפשר להוריד את המאגר כקובץ zip.

ייבוא של האפליקציה לתחילת הפעולה

באמצעות סביבת הפיתוח המשולבת, פותחים או מייבאים את התיקייה 📁 performance-monitoring-start מהמאגר שהועתק. הספרייה 📁 performance-monitoring-start מכילה את הקוד ההתחלתי של ה-Codelab, שהוא אפליקציית צ'אט לאינטרנט.

3. יצירת פרויקט Firebase והגדרתו

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

1. במסוף Firebase, לוחצים על הוספת פרויקט.
2. נותנים שם לפרויקט ב-Firebase – FriendlyChat.

חשוב לזכור את מזהה הפרויקט ב-Firebase.

3. לוחצים על Create Project.

שדרוג של תוכנית התמחור ב-Firebase

כדי להשתמש ב-Cloud Storage for Firebase, הפרויקט ב-Firebase צריך להיות מוגדר לתוכנית תמחור ותשלומים לפי שימוש (Blaze), כלומר הוא מקושר לחשבון לחיוב ב-Cloud.

• כדי להשתמש בחשבון לחיוב ב-Cloud, צריך להוסיף אמצעי תשלום, למשל כרטיס אשראי.
• משתמשים חדשים ב-Firebase וב-Google Cloud? תוכלו לבדוק אם אתם זכאים לזיכוי בסך 300$ולחשבון לחיוב ב-Cloud לתקופת ניסיון בחינם.
• אם אתם מבצעים את הקודלאב הזה כחלק מאירוע, כדאי לשאול את המארגן אם יש זיכויים ב-Cloud שזמינים.

כדי לשדרג את הפרויקט לתוכנית Blaze:

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

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

1. לוחצים על סמל האינטרנט כדי ליצור אפליקציית אינטרנט חדשה של Firebase.
2. רושמים את האפליקציה עם הכינוי Friendly Chat ומסמנים את התיבה שלצד Also set up Firebase Hosting for this app (גם להגדיר אירוח ב-Firebase לאפליקציה הזו).
3. לוחצים על רישום האפליקציה.
4. לוחצים על השלבים הנותרים. אין צורך לבצע את ההוראות במסך עכשיו. נפרט אותן בשלבים הבאים של ה-Codelab הזה.

הפעלת כניסה באמצעות חשבון Google לצורך אימות ב-Firebase

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

צריך להפעיל את הכניסה באמצעות Google:

1. בחלונית הימנית במסוף Firebase, מאתרים את הקטע Develop.
2. לוחצים על Authentication (אימות), ואז לוחצים על הכרטיסייה Sign-in method (עוברים למסוף).
3. מפעילים את ספק הכניסה של Google ולוחצים על שמירה.

הגדרת Cloud Firestore

אפליקציית האינטרנט משתמשת ב-Cloud Firestore כדי לשמור הודעות צ'אט ולקבל הודעות צ'אט חדשות.

כך מגדירים את Cloud Firestore בפרויקט Firebase:

1. בחלונית הימנית של מסוף Firebase, מרחיבים את Build ובוחרים באפשרות Firestore database.
2. לוחצים על Create dataset.
3. משאירים את השדה Database ID (מזהה מסד הנתונים) מוגדר כ-(default).
4. בוחרים מיקום למסד הנתונים ולוחצים על הבא.
   באפליקציה אמיתית, כדאי לבחור מיקום קרוב למשתמשים.
5. לוחצים על הפעלה במצב בדיקה. קוראים את כתב הוויתור לגבי כללי האבטחה.
   בהמשך הסדנה תוסיפו כללי אבטחה כדי לאבטח את הנתונים. אין להפיץ או לחשוף אפליקציה באופן ציבורי בלי להוסיף כללי אבטחה למסד הנתונים.
6. לוחצים על יצירה.

הגדרה של Cloud Storage for Firebase

באפליקציית האינטרנט נעשה שימוש ב-Cloud Storage for Firebase כדי לאחסן, להעלות ולשתף תמונות.

כך מגדירים את Cloud Storage for Firebase בפרויקט Firebase:

1. בחלונית השמאלית של מסוף Firebase, מרחיבים את Build ובוחרים באפשרות Storage (אחסון).
2. לוחצים על תחילת העבודה.
3. יש לבחור מיקום לקטגוריית האחסון המוגדרת כברירת מחדל.
   קטגוריות ב-US-WEST1, ב-US-CENTRAL1 וב-US-EAST1 יכולות לנצל את המסלול 'חינם תמיד' ל-Google Cloud Storage. לקטגוריות בכל שאר המיקומים יש תמחור ושימוש ב-Google Cloud Storage.
4. לוחצים על התחלה במצב בדיקה. קוראים את כתב הוויתור לגבי כללי האבטחה.
   בהמשך הסדנה תוסיפו כללי אבטחה כדי לאבטח את הנתונים. לא תפיץ או תחשוף אפליקציה באופן ציבורי בלי להוסיף כללי אבטחה לקטגוריית האחסון שלכם.
5. לוחצים על יצירה.

4. התקנת ממשק שורת הפקודה של Firebase

ממשק שורת הפקודה (CLI) של Firebase מאפשר לכם להשתמש באירוח ב-Firebase כדי להציג את אפליקציית האינטרנט באופן מקומי, וגם לפרוס את אפליקציית האינטרנט בפרויקט Firebase.

1. כדי להתקין את ה-CLI, פועלים לפי ההוראות האלה במסמכי Firebase.
2. כדי לוודא שה-CLI הותקן כראוי, מריצים את הפקודה הבאה בטרמינל:

firebase --version

מוודאים שהגרסה של Firebase CLI היא v8.0.0 ואילך.

3. נותנים הרשאה ל-CLI של Firebase על ידי הפעלת הפקודה הבאה:

firebase login

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

4. צריך לוודא ששורת הפקודה ניגשת לספרייה המקומית performance-monitoring-start של האפליקציה.
5. כדי לשייך את האפליקציה לפרויקט Firebase, מריצים את הפקודה הבאה:

firebase use --add

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

כתובת אימייל חלופית שימושית אם יש לכם כמה סביבות (ייצור, Staging וכו'). עם זאת, ב-codelab הזה נשתמש רק בכינוי default.

7. מבצעים את שאר ההוראות בשורת הפקודה.

5. שילוב עם Firebase Performance Monitoring

יש כמה דרכים לשלב את Firebase Performance Monitoring SDK באינטרנט (אפשר לקרוא פרטים נוספים במסמכי התיעוד). ב-Codelab הזה נפעיל מעקב אחרי ביצועים מכתובות URL לאירוח.

הוספת מעקב אחר ביצועים והפעלה של Firebase

1. פותחים את הקובץ src/index.js ומוסיפים את השורה הבאה מתחת ל-TODO כדי לכלול את ה-SDK למעקב ביצועים של Firebase.

index.js

// TODO: Import the Firebase Performance Monitoring library here.
 import {
   getPerformance,
   trace
 } from 'firebase/performance';

2. אנחנו גם צריכים לאתחל את Firebase SDK באמצעות אובייקט הגדרה שמכיל מידע על פרויקט Firebase ועל אפליקציית האינטרנט שבה אנחנו רוצים להשתמש. מכיוון שאנחנו משתמשים ב-Firebase Hosting, אפשר לייבא סקריפט מיוחד שיבצע את ההגדרה הזו בשבילכם. כבר הוספנו את השורה הבאה לקובץ public/index.html לצורך הקודלאב הזה, אבל כדאי לוודא שהיא קיימת.

index.html

<!-- This script is created by webpack -->
<script type="module" src="scripts/main.js"></script>

3. בקובץ src/index.js, צריך להוסיף את השורה הבאה מתחת ל-TODO כדי להפעיל את המעקב אחרי הביצועים.

index.js

// TODO: Initialize Firebase Performance Monitoring.
getPerformance();

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

הוספה של ספריית polyfill הראשונה של עיכוב הקלט

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

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

ספריית ה-polyfill הזו היא אופציונלית לשילוב של מעקב הביצועים.

פותחים את הקובץ public/index.html ומבטלים את התגובה לשורה הבאה.

index.html

<!-- TODO: Enable First Input Delay polyfill library. -->
<script type="text/javascript">!function(n,e){var t,o,i,c=[],f={passive:!0,capture:!0},r=new Date,a="pointerup",u="pointercancel";function p(n,c){t||(t=c,o=n,i=new Date,w(e),s())}function s(){o>=0&&o<i-r&&(c.forEach(function(n){n(o,t)}),c=[])}function l(t){if(t.cancelable){var o=(t.timeStamp>1e12?new Date:performance.now())-t.timeStamp;"pointerdown"==t.type?function(t,o){function i(){p(t,o),r()}function c(){r()}function r(){e(a,i,f),e(u,c,f)}n(a,i,f),n(u,c,f)}(o,t):p(o,t)}}function w(n){["click","mousedown","keydown","touchstart","pointerdown"].forEach(function(e){n(e,l,f)})}w(n),self.perfMetrics=self.perfMetrics||{},self.perfMetrics.onFirstInputDelay=function(n){c.push(n),s()}}(addEventListener,removeEventListener);</script>

בשלב הזה סיימתם את השילוב עם מעקב הביצועים של Firebase בקוד!

בשלבים הבאים נסביר איך מוסיפים מעקב נתונים מותאם אישית באמצעות Firebase Performance Monitoring. אם רוצים לאסוף רק את נתוני המעקב האוטומטיים, צריך לעבור לקטע 'פריסה והתחלת שליחת תמונות'.

6. הוספת מעקב מותאם אישית לאפליקציה

מעקב ביצועים מאפשר ליצור מעקבים בהתאמה אישית. דוח מעקב בהתאמה אישית הוא דוח לגבי משך הזמן של חסימת הפעלה באפליקציה. אתם מגדירים את ההתחלה והסיום של מעקב בהתאמה אישית באמצעות ממשקי ה-API שסופקו על ידי ה-SDK.

1. בקובץ src/index.js, מקבלים אובייקט ביצועים ויוצרים מעקב מותאם אישית להעלאת הודעת תמונה.

index.js

// TODO: Create custom trace to monitor image upload.
const t = trace(perf, "saveImageMessage");

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

index.js

// TODO: Start the "timer" for the custom trace.
t.start();

 ...

    // TODO: Stop the "timer" for the custom trace.
    t.stop();

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

7. מוסיפים מדד מותאם אישית לאפליקציה.

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

1. מחפשים את נתוני המעקב בהתאמה אישית מהשלב הקודם (מוגדר בקובץ src/index.js).
2. מוסיפים את השורה הבאה מתחת ל-TODO כדי לתעד את הגודל של התמונה שהועלו.

index.js

 ...

// TODO: Record image size.
t.putMetric('imageSize', file.size);

 ...

המדד הזה מאפשר למעקב הביצועים לתעד את משך הזמן של המעקב המותאם אישית ואת גודל התמונה שהועלו.

8. הוספת מאפיין מותאם אישית לאפליקציה

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

1. משתמשים במעקב בהתאמה אישית שמוגדר בקובץ src/index.js.
2. צריך להוסיף את השורה הבאה מתחת ל-TODO כדי להקליט את סוג ה-MIME של התמונה שהועלתה.

index.js

 ...

// TODO: Record image MIME type.
t.putAttribute('imageType', file.type);

 ...

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

9. [הרחבה] הוספת מעקב מותאם אישית באמצעות User Timing API

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

אנחנו עומדים למדוד את משך הטעינה של סקריפטים של עיצוב אפליקציות באמצעות User Timing API.

1. בקובץ public/index.html, מוסיפים את השורה הבאה כדי לסמן את תחילת טעינת הסקריפטים של סגנון האפליקציה.

index.html

<!-- TODO: Mark the starting of `timer` for loading App Styling script. -->
<script type="text/javascript">performance && performance.mark('loadStylingStart');</script>

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

index.html

<!-- TODO: Mark the ending of `timer` for loading App Styling script. Measure the duration from start to end. -->
<script type="text/javascript">
  performance && performance.mark('loadStylingEnd');
  performance && performance.measure('loadStyling', 'loadStylingStart', 'loadStylingEnd');
</script>

הרשומה שיצרתם כאן תיאגר באופן אוטומטי על ידי 'מעקב אחר ביצועים ב-Firebase'. בהמשך תוכלו למצוא מעקב מותאם אישית בשם loadStyling במסוף הביצועים של Firebase.

10. פריסה והתחלת שליחת תמונות

פריסה ב-Firebase Hosting

אחרי שמוסיפים לקוד מעקב ביצועים של Firebase, צריך לבצע את השלבים הבאים כדי לפרוס את הקוד באירוח ב-Firebase:

1. צריך לוודא ששורת הפקודה ניגשת לספרייה המקומית performance-monitoring-start של האפליקציה.
2. כדי לפרוס את הקבצים בפרויקט Firebase, מריצים את הפקודה הבאה:

firebase deploy

3. במסוף אמורים להופיע הפרטים הבאים:

=== Deploying to 'friendlychat-1234'...

i  deploying firestore, storage, hosting
i  storage: checking storage.rules for compilation errors...
✔  storage: rules file storage.rules compiled successfully
i  firestore: checking firestore.rules for compilation errors...
✔  firestore: rules file firestore.rules compiled successfully
i  storage: uploading rules storage.rules...
i  firestore: uploading rules firestore.rules...
i  hosting[friendlychat-1234]: beginning deploy...
i  hosting[friendlychat-1234]: found 8 files in ./public
✔  hosting[friendlychat-1234]: file upload complete
✔  storage: released rules storage.rules to firebase.storage/friendlychat-1234.firebasestorage.app
✔  firestore: released rules firestore.rules to cloud.firestore
i  hosting[friendlychat-1234]: finalizing version...
✔  hosting[friendlychat-1234]: version finalized
i  hosting[friendlychat-1234]: releasing new version...
✔  hosting[friendlychat-1234]: release complete

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview
Hosting URL: https://friendlychat-1234.firebaseapp.com

4. אתם יכולים להיכנס לאפליקציית האינטרנט שמתארחת עכשיו באופן מלא באמצעות Firebase Hosting בשני תת-דומיינים משלכם ב-Firebase: https://<projectId>.firebaseapp.com ו-https://<projectId>.web.app.

מוודאים שמעקב הביצועים מופעל

פותחים את מסוף Firebase ונכנסים לכרטיסייה ביצועים. אם מופיעה הודעת הפתיחה 'זוהתה ערכת SDK', סימן שהשלמתם את השילוב עם Firebase Performance Monitoring.

שליחת הודעת תמונה

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

1. אחרי הכניסה לאפליקציית הצ'אט, צריך ללחוץ על לחצן העלאת התמונה .
2. בוחרים קובץ תמונה באמצעות בורר הקבצים.
3. כדאי לנסות לשלוח כמה תמונות (כמה דוגמאות מאוחסנות ב-public/images/) כדי שתוכלו לבדוק את ההפצה של מדדים מותאמים אישית ומאפיינים מותאמים אישית.

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

11. מעקב אחר מרכז הבקרה

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

כניסה למרכז הבקרה

1. במסוף Firebase, בוחרים את הפרויקט שבו נמצאת אפליקציית Friendly Chat.
2. בחלונית הימנית, מאתרים את הקטע איכות ולוחצים על ביצועים.

בדיקת הנתונים ששמורים במכשיר

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

1. לוחצים על הכרטיסייה במכשיר.

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

2. לוחצים על saveImageMessage בטבלה Durations כדי לבדוק מדדים ספציפיים של המעקב.

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

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

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

בדיקת נתוני הרשת

בקשת רשת HTTP/S היא דוח שמתעד את זמן התגובה ואת גודל המטען הייעודי (payload) של קריאות רשת.

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

12. כל הכבוד!

הפעלתם את ה-SDK של Firebase לצורך ניטור ביצועים ואספתם נתוני מעקב אוטומטיים ונתוני מעקב מותאמים אישית כדי למדוד את הביצועים בפועל של אפליקציית הצ'אט שלכם.

מה עסקנו בו:

• הוספת ה-SDK של Firebase Performance Monitoring לאפליקציית האינטרנט.
• הוספת נתוני מעקב בהתאמה אישית לקוד.
• תיעוד של מדדים מותאמים אישית שמשויכים למעקב בהתאמה אישית.
• פילוחים של נתוני הביצועים באמצעות מאפיינים מותאמים אישית.
• איך משתמשים בלוח הבקרה למעקב אחר ביצועים כדי לקבל תובנות לגבי ביצועי האפליקציה.

מידע נוסף:

• firebase.google.com
• firebase.google.com/docs/perf-mon/get-started-web
• web.dev/fast/