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

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

3b1284f5144b54f6.png

מה תלמד

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

מה אתה צריך

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

Clone של codelab מאגר GitHub משורת הפקודה:

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

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

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

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

צור פרויקט Firebase

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

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

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

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

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

ea9ab0db531a104c.png

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

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

תצטרך לאפשר כניסה ל- Google:

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

7f3040a646c2e502.png

הפעל את Cloud Firestore

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

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

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

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

24bd1a097492eac6.png

אפשר אחסון בענן

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

index.js

// TODO: Import the Firebase Performance Monitoring library here.
 import {
   getPerformance,
   trace
 } from 'firebase/performance';
  1. כמו כן עלינו לאתחל את ה- SDK של Firebase עם אובייקט תצורה המכיל מידע על פרויקט Firebase ועל אפליקציית האינטרנט בה אנו רוצים להשתמש. מכיוון שאנו משתמשים ב- Firebase Hosting, תוכל לייבא סקריפט מיוחד שיעשה את התצורה הזו עבורך. עבור codelab הזה, אנחנו כבר הוספנו השורה הבאה בשבילך בתחתית של 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();

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

הוסף את ספריית מילוי המילוי הראשון של עיכוב קלט

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

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

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

פתח את public/index.html קובץ, אז uncomment את השורה הבאה.

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. אם אתה רק רוצה לאסוף את העקבות האוטומטיות, עבור לסעיף "פריס והתחל לשלוח תמונות".

מעקב אחר ביצועים מאפשר לך ליצור עקבות מנהג. מעקב מותאם אישית הוא דוח למשך כל חסימת ביצוע באפליקציה שלך. אתה מגדיר את ההתחלה והסוף של עקבות מותאמות אישית באמצעות ממשקי ה- 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();

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

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

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

index.js

 ...

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

 ...

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

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

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

index.js

 ...

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

 ...

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

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

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

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

לפרוס ל- Firebase Hosting

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

  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 אירוח בבית שני של תחומי משנה Firebase שלך מאוד משלו: https://<projectId>.firebaseapp.com ו https://<projectId>.web.app .

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

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

30df67e5a07d03b0.png

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

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

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

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

לאחר פריסת אפליקציית האינטרנט ושליחת הודעות תמונה כמשתמש, תוכל לסקור נתוני ביצועים בלוח המחוונים של ניטור הביצועים (במסוף 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

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

מה שסיקרנו:

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

למד עוד: