वेब के लिए फायरबेस प्रदर्शन निगरानी

1 अवलोकन

इस कोडलैब में, आप सीखेंगे कि चैट वेब ऐप के प्रदर्शन को मापने के लिए फायरबेस प्रदर्शन निगरानी का उपयोग कैसे करें। लाइव डेमो देखने के लिए https://fireperf-friendlychat.web.app/ पर जाएं।

3b1284f5144b54f6.png

आप क्या सीखेंगे

  • आउट-ऑफ़-द-बॉक्स मेट्रिक (पृष्ठ लोड और नेटवर्क अनुरोध) प्राप्त करने के लिए अपने वेब ऐप में Firebase प्रदर्शन निगरानी कैसे जोड़ें।
  • कस्टम निशान के साथ कोड के एक विशिष्ट टुकड़े को कैसे मापें।
  • कस्टम ट्रेस से जुड़े अतिरिक्त, कस्टम मीट्रिक कैसे रिकॉर्ड करें।
  • कस्टम विशेषताओं के साथ अपने प्रदर्शन डेटा को आगे कैसे विभाजित करें।
  • अपने वेब ऐप के प्रदर्शन को समझने के लिए प्रदर्शन निगरानी डैशबोर्ड का उपयोग कैसे करें।

आपको किस चीज़ की ज़रूरत पड़ेगी

  • आपकी पसंद का IDE या टेक्स्ट एडिटर, जैसे WebStorm , Atom , Sublime , या VS Code
  • एक टर्मिनल/कंसोल
  • आपकी पसंद का ब्राउज़र, जैसे क्रोम
  • कोडलैब का नमूना कोड (कोड कैसे प्राप्त करें के लिए इस कोडलैब का अगला भाग देखें।)

2. नमूना कोड प्राप्त करें

कमांड लाइन से कोडलैब के GitHub रिपॉजिटरी को क्लोन करें:

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

वैकल्पिक रूप से, यदि आपके पास गिट स्थापित नहीं है, तो आप रेपो को ज़िप फ़ाइल के रूप में डाउनलोड कर सकते हैं।

स्टार्टर ऐप आयात करें

अपने आईडीई का उपयोग करके, क्लोन रिपॉजिटरी से 📁 performance-monitoring-start निर्देशिका खोलें या आयात करें। इस 📁 performance-monitoring-start डायरेक्टरी में कोडलैब के लिए शुरुआती कोड है, जो एक चैट वेब ऐप है।

3. एक फायरबेस प्रोजेक्ट बनाएं और सेट करें

एक फायरबेस प्रोजेक्ट बनाएं

  1. फायरबेस कंसोल में, प्रोजेक्ट जोड़ें पर क्लिक करें।
  2. अपने Firebase प्रोजेक्ट को FriendlyChat नाम दें।

अपने फायरबेस प्रोजेक्ट के लिए प्रोजेक्ट आईडी याद रखें।

  1. प्रोजेक्ट बनाएं पर क्लिक करें।

प्रोजेक्ट में Firebase वेब ऐप्लिकेशन जोड़ें

  1. वेब आइकन पर क्लिक करें 58d6543a156e56f9.png एक नया फायरबेस वेब ऐप बनाने के लिए।
  2. Friendly Chat उपनाम के साथ ऐप को पंजीकृत करें, और फिर इस ऐप के लिए फायरबेस होस्टिंग भी सेट करें के बगल में स्थित बॉक्स को चेक करें।
  3. रजिस्टर ऐप पर क्लिक करें।
  4. शेष चरणों के माध्यम से क्लिक करें। अब आपको ऑन-स्क्रीन निर्देशों का पालन करने की आवश्यकता नहीं है; इन्हें इस कोडलैब के बाद के चरणों में शामिल किया जाएगा।

ea9ab0db531a104c.png

Firebase प्रमाणीकरण के लिए Google साइन-इन सक्षम करें

उपयोगकर्ताओं को उनके Google खातों के साथ चैट ऐप में साइन इन करने की अनुमति देने के लिए, हम Google साइन-इन पद्धति का उपयोग करेंगे।

आपको Google साइन-इन सक्षम करना होगा:

  1. फायरबेस कंसोल में, बाएं पैनल में डेवलप सेक्शन का पता लगाएं।
  2. प्रमाणीकरण पर क्लिक करें, फिर साइन-इन विधि टैब पर क्लिक करें ( कंसोल पर जाएं )।
  3. Google साइन-इन प्रदाता सक्षम करें, और फिर सहेजें क्लिक करें.

7f3040a646c2e502.png

क्लाउड फायरस्टोर सक्षम करें

वेब ऐप चैट संदेशों को सहेजने और नए चैट संदेश प्राप्त करने के लिए क्लाउड फायरस्टोर का उपयोग करता है।

आपको Cloud Firestore को सक्षम करना होगा:

  1. फायरबेस कंसोल के डेवलप सेक्शन में, डेटाबेस पर क्लिक करें।
  2. क्लाउड फायरस्टोर फलक में डेटाबेस बनाएं पर क्लिक करें।
  3. परीक्षण मोड में प्रारंभ करें विकल्प चुनें, फिर सुरक्षा नियमों के बारे में अस्वीकरण पढ़ने के बाद सक्षम करें पर क्लिक करें।

इस कोडलैब के स्टार्टर कोड में अधिक सुरक्षित नियम शामिल हैं। हम उन्हें बाद में कोडलैब में तैनात करेंगे।

24bd1a097492eac6.png

क्लाउड स्टोरेज सक्षम करें

वेब ऐप चित्रों को स्टोर करने, अपलोड करने और साझा करने के लिए फायरबेस के लिए क्लाउड स्टोरेज का उपयोग करता है।

आपको क्लाउड स्टोरेज को सक्षम करना होगा:

  1. फायरबेस कंसोल के डेवलप सेक्शन में, स्टोरेज पर क्लिक करें।
  2. प्रारंभ करें क्लिक करें .
  3. अपने Firebase प्रोजेक्ट के सुरक्षा नियमों के बारे में अस्वीकरण पढ़ें, और फिर समझ में आ गया पर क्लिक करें।

प्रारंभिक कोड में एक बुनियादी सुरक्षा नियम शामिल होता है, जिसे हम बाद में कोडलैब में लागू करेंगे।

4. फायरबेस कमांड-लाइन इंटरफ़ेस स्थापित करें

फायरबेस कमांड-लाइन इंटरफेस (सीएलआई) आपको स्थानीय रूप से अपने वेब ऐप की सेवा के साथ-साथ अपने वेब ऐप को अपने फायरबेस प्रोजेक्ट में तैनात करने के लिए फायरबेस होस्टिंग का उपयोग करने की अनुमति देता है।

  1. फायरबेस डॉक्स में इन निर्देशों का पालन करके सीएलआई स्थापित करें।
  2. सत्यापित करें कि टर्मिनल में निम्न आदेश चलाकर सीएलआई सही ढंग से स्थापित किया गया है:
firebase --version

सुनिश्चित करें कि आपके Firebase CLI का संस्करण v8.0.0 या बाद का संस्करण है।

  1. निम्नलिखित कमांड चलाकर फायरबेस सीएलआई को अधिकृत करें:
firebase login

हमने आपके ऐप की स्थानीय निर्देशिका (रिपोजिटरी जिसे आपने पहले कोडलैब में क्लोन किया था) से फायरबेस होस्टिंग के लिए आपके ऐप के कॉन्फ़िगरेशन को खींचने के लिए वेब ऐप टेम्प्लेट सेट किया है। लेकिन कॉन्फ़िगरेशन को खींचने के लिए, हमें आपके ऐप को आपके Firebase प्रोजेक्ट से संबद्ध करना होगा।

  1. सुनिश्चित करें कि आपकी कमांड लाइन आपके ऐप की स्थानीय performance-monitoring-start निर्देशिका तक पहुंच रही है।
  2. निम्न आदेश चलाकर अपने ऐप्लिकेशन को अपने Firebase प्रोजेक्ट से संबद्ध करें:
firebase use --add
  1. संकेत मिलने पर, अपना प्रोजेक्ट आईडी चुनें, और फिर अपने फायरबेस प्रोजेक्ट को एक उपनाम दें।

यदि आपके पास एकाधिक वातावरण (उत्पादन, स्टेजिंग, आदि) हैं तो एक उपनाम उपयोगी है। हालाँकि, इस कोडलैब के लिए, आइए केवल default के उपनाम का उपयोग करें।

  1. अपनी कमांड लाइन में शेष निर्देशों का पालन करें।

5. फायरबेस प्रदर्शन निगरानी के साथ एकीकृत करें

वेब के लिए फायरबेस प्रदर्शन निगरानी एसडीके के साथ एकीकृत करने के कई तरीके हैं (विवरण के लिए दस्तावेज़ीकरण देखें)। इस कोडलैब में, हम होस्टिंग यूआरएल से प्रदर्शन निगरानी सक्षम करेंगे।

प्रदर्शन निगरानी जोड़ें और Firebase को प्रारंभ करें

  1. src/index.js फ़ाइल खोलें, फिर फ़ायरबेस प्रदर्शन निगरानी एसडीके को शामिल करने के लिए TODO के नीचे निम्न पंक्ति जोड़ें।

index.js

// TODO: Import the Firebase Performance Monitoring library here.
 import {
   getPerformance,
   trace
 } from 'firebase/performance';
  1. हमें फ़ायरबेस एसडीके को एक कॉन्फ़िगरेशन ऑब्जेक्ट के साथ इनिशियलाइज़ करने की भी आवश्यकता है जिसमें फ़ायरबेस प्रोजेक्ट और उस वेब ऐप के बारे में जानकारी है जिसका हम उपयोग करना चाहते हैं। चूंकि हम फायरबेस होस्टिंग का उपयोग कर रहे हैं, आप एक विशेष स्क्रिप्ट आयात कर सकते हैं जो आपके लिए यह कॉन्फ़िगरेशन करेगी। इस कोडलैब के लिए, हमने आपके लिए 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 फ़ाइल खोलें, फिर निम्न पंक्ति को अनकम्मेंट करें।

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 प्रदर्शन निगरानी का उपयोग करके कस्टम ट्रेस जोड़ने के बारे में जानेंगे। यदि आप केवल स्वचालित ट्रेस एकत्र करना चाहते हैं, तो "तैनात करें और छवियां भेजना प्रारंभ करें" अनुभाग पर जाएं।

6. अपने ऐप में एक कस्टम ट्रेस जोड़ें

प्रदर्शन निगरानी आपको कस्टम ट्रेस बनाने की अनुमति देता है। एक कस्टम ट्रेस आपके ऐप में निष्पादन ब्लॉक की अवधि के लिए एक रिपोर्ट है। आप SDK द्वारा प्रदान किए गए API का उपयोग करके कस्टम ट्रेस की शुरुआत और समाप्ति को परिभाषित करते हैं।

  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. अपलोड की गई छवि के MIME प्रकार को रिकॉर्ड करने के लिए TODO के नीचे निम्न पंक्ति जोड़ें।

index.js

 ...

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

 ...

यह विशेषता अपलोड की गई छवि प्रकार के आधार पर कस्टम ट्रेस अवधि को वर्गीकृत करने के लिए प्रदर्शन निगरानी को सक्षम बनाती है।

9. [विस्तार] उपयोगकर्ता समय एपीआई के साथ एक कस्टम ट्रेस जोड़ें

Firebase प्रदर्शन निगरानी SDK को डिज़ाइन किया गया था ताकि इसे एसिंक्रोनस रूप से लोड किया जा सके, और इसलिए यह पृष्ठ लोड के दौरान वेब ऐप्स के प्रदर्शन को नकारात्मक रूप से प्रभावित नहीं करेगा। एसडीके लोड होने से पहले, फायरबेस प्रदर्शन निगरानी एपीआई उपलब्ध नहीं है। इस परिदृश्य में, आप अभी भी उपयोगकर्ता समय 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 प्रदर्शन निगरानी द्वारा स्वचालित रूप से एकत्र किया जाएगा। आप बाद में loadStyling प्रदर्शन कंसोल में लोड स्टाइलिंग नामक एक कस्टम ट्रेस ढूंढ पाएंगे।

10. तैनात करें और चित्र भेजना शुरू करें

फायरबेस होस्टिंग पर तैनात करें

अपने कोड में 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 उप डोमेन: https://<projectId>.firebaseapp.com और https://<projectId>.web.app पर Firebase होस्टिंग का उपयोग करके अब पूरी तरह से होस्ट किए गए अपने वेब ऐप पर जाएं।

सत्यापित करें कि प्रदर्शन निगरानी सक्षम है

फायरबेस कंसोल खोलें और परफॉर्मेंस टैब पर जाएं। यदि आपको "SDK का पता चला" दिखाने वाला स्वागत संदेश दिखाई देता है, तो आप सफलतापूर्वक Firebase प्रदर्शन निगरानी के साथ एकीकृत हो गए हैं!

30df67e5a07d03b0.png

छवि संदेश भेजें

अपने चैट ऐप में चित्र भेजकर कुछ प्रदर्शन डेटा जेनरेट करें।

  1. अपने चैट ऐप में साइन इन करने के बाद, इमेज अपलोड बटन पर क्लिक करें 13734cb66773e5a3.png .
  2. फ़ाइल पिकर का उपयोग करके एक छवि फ़ाइल का चयन करें।
  3. एकाधिक चित्र भेजने का प्रयास करें (कुछ नमूने public/images/ में संग्रहीत हैं) ताकि आप कस्टम मीट्रिक और कस्टम विशेषताओं के वितरण का परीक्षण कर सकें।

आपके चयनित चित्रों के साथ नए संदेश ऐप के UI में प्रदर्शित होने चाहिए।

11. डैशबोर्ड की निगरानी करें

अपना वेब ऐप परिनियोजित करने और एक उपयोगकर्ता के रूप में छवि संदेश भेजने के बाद, आप प्रदर्शन निगरानी डैशबोर्ड (Firebase कंसोल में) में प्रदर्शन डेटा की समीक्षा कर सकते हैं।

अपने डैशबोर्ड तक पहुंचें

  1. फायरबेस कंसोल में, वह प्रोजेक्ट चुनें जिसमें आपका Friendly Chat ऐप है।
  2. बाएँ फलक में, गुणवत्ता अनुभाग ढूँढ़ें और प्रदर्शन क्लिक करें.

डिवाइस पर डेटा की समीक्षा करें

प्रदर्शन निगरानी द्वारा आपके ऐप के डेटा को संसाधित करने के बाद, आपको डैशबोर्ड के शीर्ष पर टैब दिखाई देंगे। यदि आपको अभी तक कोई डेटा या टैब दिखाई नहीं देता है, तो बाद में जांचना सुनिश्चित करें।

  1. ऑन डिवाइस टैब पर क्लिक करें।
  • पृष्ठ लोड तालिका विभिन्न प्रदर्शन मीट्रिक दिखाती है जो आपके पृष्ठ के लोड होने के दौरान प्रदर्शन निगरानी स्वचालित रूप से एकत्र होती है।
  • अवधि तालिका कोई भी कस्टम निशान दिखाती है जिसे आपने अपने ऐप के कोड में परिभाषित किया है।
  1. ट्रेस के लिए विशिष्ट मीट्रिक की समीक्षा करने के लिए अवधि तालिका में saveImageMessage पर क्लिक करें।

e28758fd02d9ffac.png

  1. छवि आकारों के वितरण की समीक्षा करने के लिए कुल क्लिक करें। आप इस कस्टम ट्रेस के लिए छवि आकार को मापने के लिए जोड़े गए मीट्रिक को देख सकते हैं।

c3cbcfc0c739a0a8.png

  1. ओवर टाइम पर क्लिक करें जो पिछले चरण में एग्रीगेट के बगल में है। आप कस्टम ट्रेस की अवधि भी देख सकते हैं। एकत्रित डेटा की अधिक विस्तार से समीक्षा करने के लिए और देखें पर क्लिक करें।

16983baa31e05732.png

  1. खुलने वाले पेज में, आप इमेज टाइप पर क्लिक करके अवधि डेटा को इमेज MIME टाइप के हिसाब से सेगमेंट कर सकते हैं। यह विशिष्ट डेटा आपके द्वारा अपने कस्टम ट्रेस में जोड़े गए imageType विशेषता के कारण लॉग किया गया था।

8e5c9f32f42a1ca1.png

नेटवर्क डेटा की समीक्षा करें

एक HTTP/S नेटवर्क अनुरोध एक रिपोर्ट है जो नेटवर्क कॉल के प्रतिक्रिया समय और पेलोड आकार को कैप्चर करती है।

  1. प्रदर्शन निगरानी डैशबोर्ड की मुख्य स्क्रीन पर वापस जाएं।
  2. अपने वेब ऐप के लिए नेटवर्क अनुरोध प्रविष्टियों की सूची देखने के लिए नेटवर्क टैब पर क्लिक करें।
  3. धीमे अनुरोधों की पहचान करने के लिए उनके माध्यम से ब्राउज़ करें और अपने ऐप के प्रदर्शन को बेहतर बनाने के लिए सुधार पर काम करना शुरू करें!

26a2be152a77ffb9.png

12. बधाई!

आपने प्रदर्शन की निगरानी के लिए फायरबेस एसडीके को सक्षम किया है और अपने चैट ऐप के वास्तविक-विश्व प्रदर्शन को मापने के लिए स्वचालित ट्रेस और कस्टम ट्रेस एकत्र किए हैं!

हमने क्या कवर किया है:

  • अपने वेब ऐप में फायरबेस परफॉर्मेंस मॉनिटरिंग एसडीके जोड़ना।
  • अपने कोड में कस्टम निशान जोड़ना।
  • कस्टम ट्रेस से जुड़ी कस्टम मेट्रिक्स की रिकॉर्डिंग।
  • कस्टम विशेषताओं का उपयोग करके प्रदर्शन डेटा को विभाजित करना।
  • अपने ऐप के प्रदर्शन में अंतर्दृष्टि प्राप्त करने के लिए प्रदर्शन निगरानी डैशबोर्ड का उपयोग करने का तरीका समझना।

और अधिक जानें: