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

1 अवलोकन

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

3b1284f5144b54f6.png

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

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

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

  • आपकी पसंद का आईडीई या टेक्स्ट एडिटर, जैसे वेबस्टॉर्म , एटम , सबलाइम , या वीएस कोड
  • एक टर्मिनल/कंसोल
  • आपकी पसंद का ब्राउज़र, जैसे Chrome
  • कोडलैब का नमूना कोड (कोड कैसे प्राप्त करें, इसके लिए इस कोडलैब का अगला भाग देखें।)

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

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

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

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

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

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

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

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

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

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

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

प्रोजेक्ट में फायरबेस वेब ऐप जोड़ें

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

ea9ab0db531a104c.png

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

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

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

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

7f3040a646c2e502.png

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

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

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

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

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

24bd1a097492eac6.png

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

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

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

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

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

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

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

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

सुनिश्चित करें कि फायरबेस सीएलआई का आपका संस्करण v8.0.0 या बाद का है।

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

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

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

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

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

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

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

प्रदर्शन निगरानी जोड़ें और फ़ायरबेस प्रारंभ करें

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

सूचकांक.जे.एस

// 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 के नीचे निम्न पंक्ति जोड़ें।

सूचकांक.जे.एस

// 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>

इस बिंदु पर, आपने अपने कोड में फायरबेस परफॉर्मेंस मॉनिटरिंग के साथ एकीकरण पूरा कर लिया है!

निम्नलिखित चरणों में, आप फायरबेस परफॉर्मेंस मॉनिटरिंग का उपयोग करके कस्टम ट्रेस जोड़ने के बारे में सीखेंगे। यदि आप केवल स्वचालित निशान एकत्र करना चाहते हैं, तो "तैनात करें और छवियां भेजना शुरू करें" अनुभाग पर जाएं।

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

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

  1. src/index.js फ़ाइल में, एक प्रदर्शन ऑब्जेक्ट प्राप्त करें, फिर एक छवि संदेश अपलोड करने के लिए एक कस्टम ट्रेस बनाएं।

सूचकांक.जे.एस

// TODO: Create custom trace to monitor image upload.
const t = trace(perf, "saveImageMessage");
  1. कस्टम ट्रेस रिकॉर्ड करने के लिए, आपको ट्रेस के लिए प्रारंभिक बिंदु और समाप्ति बिंदु निर्दिष्ट करना होगा। आप ट्रेस को टाइमर के रूप में सोच सकते हैं।

सूचकांक.जे.एस

// 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 के नीचे निम्नलिखित पंक्ति जोड़ें।

सूचकांक.जे.एस

 ...

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

 ...

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

8. अपने ऐप में एक कस्टम विशेषता जोड़ें

पिछले चरणों के आधार पर, आप अपने कस्टम ट्रेस पर कस्टम विशेषताएँ भी एकत्र कर सकते हैं। कस्टम विशेषताएँ आपके ऐप के लिए विशिष्ट श्रेणियों के आधार पर डेटा को विभाजित करने में मदद कर सकती हैं। उदाहरण के लिए, आप यह जांचने के लिए छवि फ़ाइल का MIME प्रकार एकत्र कर सकते हैं कि MIME प्रकार प्रदर्शन को कैसे प्रभावित कर सकता है।

  1. अपनी src/index.js फ़ाइल में परिभाषित कस्टम ट्रेस का उपयोग करें।
  2. अपलोड की गई छवि के MIME प्रकार को रिकॉर्ड करने के लिए TODO के नीचे निम्नलिखित पंक्ति जोड़ें।

सूचकांक.जे.एस

 ...

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

 ...

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

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

फ़ायरबेस प्रदर्शन मॉनिटरिंग एसडीके को डिज़ाइन किया गया था ताकि इसे एसिंक्रोनस रूप से लोड किया जा सके, और इसलिए यह पेज लोड के दौरान वेब ऐप्स के प्रदर्शन पर नकारात्मक प्रभाव नहीं डालेगा। एसडीके लोड होने से पहले, फायरबेस परफॉर्मेंस मॉनिटरिंग एपीआई उपलब्ध नहीं है। इस परिदृश्य में, आप अभी भी यूजर टाइमिंग एपीआई का उपयोग करके कस्टम ट्रेस जोड़ने में सक्षम हैं। फायरबेस प्रदर्शन एसडीके माप() से अवधि उठाएगा और उन्हें कस्टम ट्रेस के रूप में लॉग करेगा।

हम यूजर टाइमिंग एपीआई का उपयोग करके ऐप स्टाइलिंग स्क्रिप्ट लोड करने की अवधि को मापने जा रहे हैं।

  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>

आपके द्वारा यहां बनाई गई प्रविष्टि फायरबेस परफॉर्मेंस मॉनिटरिंग द्वारा स्वचालित रूप से एकत्र की जाएगी। आप बाद में फायरबेस परफॉर्मेंस कंसोल में loadStyling नामक एक कस्टम ट्रेस ढूंढ पाएंगे।

10. तैनात करें और छवियाँ भेजना प्रारंभ करें

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

अपने कोड में फायरबेस परफॉर्मेंस मॉनिटरिंग जोड़ने के बाद, अपने कोड को फायरबेस होस्टिंग पर तैनात करने के लिए इन चरणों का पालन करें:

  1. सुनिश्चित करें कि आपकी कमांड लाइन आपके ऐप की स्थानीय performance-monitoring-start निर्देशिका तक पहुंच रही है।
  2. निम्नलिखित कमांड चलाकर अपनी फ़ाइलों को अपने फायरबेस प्रोजेक्ट पर तैनात करें:
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. अपने वेब ऐप पर जाएं जो अब आपके अपने दो फायरबेस उपडोमेन: https://<projectId>.firebaseapp.com और https://<projectId>.web.app पर फायरबेस होस्टिंग का उपयोग करके पूरी तरह से होस्ट किया गया है।

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

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

30df67e5a07d03b0.png

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

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

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

नए संदेश आपकी चयनित छवियों के साथ ऐप के यूआई में प्रदर्शित होने चाहिए।

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

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

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

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

ऑन-डिवाइस डेटा की समीक्षा करें

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

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

e28758fd02d9ffac.png

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

c3cbcfc0c739a0a8.png

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

16983baa31e05732.png

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

8e5c9f32f42a1ca1.png

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

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

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

26a2be152a77ffb9.png

12. बधाई हो!

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

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

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

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