ניטור ביצועי Firebase עבור האינטרנט

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

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

3b1284f5144b54f6.png

מה תלמד

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

מה אתה צריך

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

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

שיבוט את מאגר GitHub של Codelab משורת הפקודה:

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

לחלופין, אם לא התקנת git, אתה יכול להוריד את ה-repo כקובץ zip .

ייבא את אפליקציית המתנע

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

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

צור פרויקט Firebase

  1. במסוף Firebase , לחץ על הוסף פרויקט .
  2. תן שם לפרויקט Firebase שלך FriendlyChat .

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

  1. לחץ על צור פרויקט .

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

  1. לחץ על סמל האינטרנט 58d6543a156e56f9.png כדי ליצור אפליקציית אינטרנט חדשה של Firebase.
  2. רשום את האפליקציה עם הכינוי Friendly Chat , ולאחר מכן סמן את התיבה לצד הגדר גם אירוח Firebase עבור אפליקציה זו .
  3. לחץ על הרשמה אפליקציה .
  4. לחץ על שאר השלבים. אינך צריך לעקוב אחר ההוראות שעל המסך כעת; אלה יכוסו בשלבים מאוחרים יותר של מעבדת קוד זה.

ea9ab0db531a104c.png

אפשר את הכניסה של Google עבור אימות Firebase

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

יהיה עליך להפעיל את הכניסה של Google :

  1. במסוף Firebase, אתר את הקטע 'פיתוח' בחלונית השמאלית.
  2. לחץ על אימות ולאחר מכן לחץ על הכרטיסייה שיטת כניסה ( עבור למסוף ).
  3. הפעל את ספק הכניסה של Google ולאחר מכן לחץ על שמור .

7f3040a646c2e502.png

הפעל את Cloud Firestore

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

יהיה עליך להפעיל את Cloud Firestore:

  1. בקטע פיתוח של מסוף Firebase, לחץ על מסד נתונים .
  2. לחץ על צור מסד נתונים בחלונית Cloud Firestore.
  3. בחר באפשרות התחל במצב בדיקה ולאחר מכן לחץ על הפעל לאחר קריאת כתב הוויתור על כללי האבטחה.

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

24bd1a097492eac6.png

הפעל אחסון בענן

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

יהיה עליך להפעיל אחסון בענן:

  1. בקטע פיתוח של מסוף Firebase, לחץ על אחסון .
  2. לחץ על התחל .
  3. קרא את כתב הוויתור לגבי כללי אבטחה עבור פרויקט Firebase שלך, ולאחר מכן לחץ על הבנתי .

קוד ההתחלה כולל כלל אבטחה בסיסי, אותו נפרוס מאוחר יותר ב-codelab.

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

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

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

ודא שהגרסה שלך של Firebase CLI היא גרסה 8.0.0 ואילך.

  1. אשר את Firebase CLI על ידי הפעלת הפקודה הבאה:
firebase login

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

  1. ודא ששורת הפקודה שלך ניגשת לספריית performance-monitoring-start המקומי של האפליקציה שלך.
  2. שייך את האפליקציה שלך לפרויקט Firebase שלך ​​על ידי הפעלת הפקודה הבאה:
firebase use --add
  1. כשתתבקש, בחר את מזהה הפרויקט שלך ולאחר מכן תן לפרויקט Firebase שלך ​​כינוי.

כינוי שימושי אם יש לך מספר סביבות (הפקה, הבמה וכו'). עם זאת, עבור מעבדת קוד זה, בוא נשתמש בכינוי default .

  1. עקוב אחר ההוראות הנותרות בשורת הפקודה שלך.

5. השתלב עם ניטור ביצועים של Firebase

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

הוסף ניטור ביצועים ואתחל את Firebase

  1. פתח את הקובץ src/index.js , ולאחר מכן הוסף את השורה הבאה מתחת ל- TODO כדי לכלול את Firebase Performance Monitoring SDK.

index.js

// TODO: Import the Firebase Performance Monitoring library here.
 import {
   getPerformance,
   trace
 } from 'firebase/performance';
  1. אנחנו צריכים גם לאתחל את Firebase SDK עם אובייקט תצורה שמכיל מידע על פרויקט Firebase ואפליקציית האינטרנט שבה אנחנו רוצים להשתמש. מכיוון שאנו משתמשים ב-Firebase Hosting, אתה יכול לייבא סקריפט מיוחד שיבצע עבורך את התצורה הזו. עבור מעבדת קוד זה, כבר הוספנו עבורך את השורה הבאה בתחתית הקובץ public/index.html , אך בדוק שוב שהיא קיימת.

index.html

<!-- This script is created by webpack -->
<script type="module" src="scripts/main.js"></script>
  1. בקובץ 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 Performance Monitoring בקוד שלך!

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

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

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

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

index.js

// TODO: Create custom trace to monitor image upload.
const t = trace(perf, "saveImageMessage");
  1. כדי להקליט מעקב מותאם אישית, עליך לציין את נקודת ההתחלה ונקודת העצירה עבור המעקב. אתה יכול לחשוב על עקבות כעל טיימר.

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 . Firebase Performance SDK יאסוף את משכי הזמן מ- 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>
  1. הוסף את השורות הבאות כדי לסמן את סוף טעינת הסקריפטים לסגנון האפליקציה, וכדי למדוד את משך הזמן בין ההתחלה לסוף.

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 Performance Monitoring. תוכל למצוא מעקב מותאם אישית בשם loadStyling במסוף Firebase Performance מאוחר יותר.

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

פרוס ל-Firebase Hosting

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

  1. ודא ששורת הפקודה שלך ניגשת לספריית performance-monitoring-start המקומי של האפליקציה שלך.
  2. פרוס את הקבצים שלך בפרויקט Firebase שלך ​​על ידי הפעלת הפקודה הבאה:
firebase deploy
  1. הקונסולה אמורה להציג את הדברים הבאים:
=== 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.appspot.com
✔  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
  1. בקר באפליקציית האינטרנט שלך שמתארחת כעת במלואה באמצעות Firebase Hosting בשני תת-דומיינים משלך של Firebase: https://<projectId>.firebaseapp.com ו- https://<projectId>.web.app .

ודא שניטור ביצועים מופעל

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

30df67e5a07d03b0.png

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

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

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

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

11. עקוב אחר לוח המחוונים

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

גש ללוח המחוונים שלך

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

סקור נתונים במכשיר

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

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

e28758fd02d9ffac.png

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

c3cbcfc0c739a0a8.png

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

16983baa31e05732.png

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

8e5c9f32f42a1ca1.png

סקור את נתוני הרשת

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

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

26a2be152a77ffb9.png

12. מזל טוב!

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

מה כיסינו:

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

למד עוד: