वेब के लिए प्रदर्शन की निगरानी के साथ आरंभ करें

शुरू करने से पहले

यदि आप पहले से ही नहीं हैं, तो अपने जावास्क्रिप्ट प्रोजेक्ट में Add Firebase पर जाएँ:

फायरबेस प्रोजेक्ट बनाएं
Firebase के साथ अपना वेब ऐप पंजीकृत करें
वेब ऐप में परफॉर्मेंस मॉनिटरिंग का उपयोग करने के लिए, आपको अपने ऐप को फायरबेस कंसोल में फायरबेस वेब ऐप के रूप में जोड़ना होगा ।
यदि आप पहले से ही अपने मौजूदा वेब ऐप में फायरबेस उत्पादों का उपयोग करते हैं और आप प्रदर्शन निगरानी एसडीके का उपयोग शुरू करना चाहते हैं, तो आपको अपने appID को शामिल करने के लिए अपने appID कॉन्फ़िगरेशन ऑब्जेक्ट को अपडेट करना होगा।

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

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

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

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

आपके द्वारा SDK जोड़ने के बाद, Firebase स्वचालित रूप से स्वचालित अवधि के निशान और स्वचालित HTTP / S नेटवर्क अनुरोधों की निगरानी करना शुरू कर देता है।

सीडीएन से

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

CDN से प्रदर्शन निगरानी SDK को शामिल करने के लिए, आपके पास दो विकल्प हैं:

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

स्टैंडअलोन एसडीके

यदि आपके एप्लिकेशन में प्रदर्शन मॉनिटरिंग केवल फायरबेस उत्पाद है, तो यदि आप रुचि रखते हैं, तो स्टैंडअलोन प्रदर्शन मॉनिटरिंग एसडीके (और नीचे दी गई हेडर स्क्रिप्ट) का उपयोग करें:

अपने एसडीके पैकेज का आकार कम करना
आपके पेज लोड होने के बाद तक SDK के आरंभ में देरी

अपने ऐप में स्टैंडअलोन परफॉर्मेंस मॉनिटरिंग एसडीके को शामिल करना और अपने पेज लोड होने के बाद इसकी इनिशियलाइज़ेशन में देरी करना:

अपनी अनुक्रमणिका फ़ाइल के शीर्ष लेख में निम्न स्क्रिप्ट जोड़ें।
अपने ऐप के फायरबेस प्रोजेक्ट कॉन्फ़िगरेशन ऑब्जेक्ट को जोड़ना सुनिश्चित करें।

(function(sa,fbc){function load(f,c){var a=document.createElement('script');
a.async=1;a.src=f;var s=document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(a,s);}load(sa);
window.addEventListener('load',function(){firebase.initializeApp(fbc).performance()});
})( performance_standalone , firebaseConfig );

कहाँ पे,

performance_standalone 'https://www.gstatic.com/firebasejs/7.17.1/firebase-performance-standalone.js'
firebaseConfig आपके ऐप का Firebase config ऑब्जेक्ट है

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

स्टैंडअलोन प्रदर्शन निगरानी एसडीके और हेडर स्क्रिप्ट के बारे में जानें

यह स्टैंडअलोन एसडीके आकार के लिए अनुकूलित है; Gzipped, यह लगभग 10kb है। इसमें फायरबेस परफॉर्मेंस मॉनिटरिंग की सभी फंक्शंस के साथ-साथ फायरबेस कोर एसडीके फंक्शंस की एक न्यूनतम सेट है।

Firebase प्रदर्शन की निगरानी का उपयोग करता है fetch और Promise एपीआई जो पुराने ब्राउज़र पर उपलब्ध नहीं हैं। इन एपीआई के लिए पॉलीफ़िल को मानक फायरबेस प्रदर्शन निगरानी जेएस एसडीके में शामिल किया गया है, लेकिन आकार को कम करने के लिए उन्हें स्टैंडअलोन एसडीके से छोड़ा गया है।

प्रदर्शन मॉनिटरिंग एसडीके, ब्राउज़र से पेज लोड मेट्रिक्स प्राप्त करने के लिए संसाधन समय एपीआई पर निर्भर करता है।

निम्नलिखित स्निपेट हेडर स्क्रिप्ट को तोड़ता है जिसमें SDK का आरंभिक विलम्ब शामिल है:

(function(sdkSource, firebaseConfigObject) {
   function load(f, c) {
       // Creates a script tag to load the standalone SDK
       var sdkScript = document.createElement('script');

       // Sets it to an async script so that it doesn't interfere with page load
       sdkScript.async = 1;

       // Sets the source of the script
       sdkScript.src = f;

       // Inserts the script into the head of the page
       var s = document.getElementsByTagName('script')[0];
       s.parentNode.insertBefore(sdkScript, s);
   }

   // Calls the load method
   load(sdkSource);

   // Initializes the SDK only when the onload method is called
   window.addEventListener('load', function() {
       firebase.initializeApp(firebaseConfigObject).performance();
   });
})( performance_standalone , firebaseConfig );

कहाँ पे,

performance_standalone 'https://www.gstatic.com/firebasejs/7.17.1/firebase-performance-standalone.js'
firebaseConfig आपके ऐप का Firebase config ऑब्जेक्ट है

मानक एसडीके

यदि आप अपने ऐप में अन्य फायरबेस उत्पादों (जैसे प्रमाणीकरण या क्लाउड फायरस्टोर) का उपयोग कर रहे हैं, तो मानक प्रदर्शन निगरानी एसडीके शामिल करें।

ध्यान दें कि इस एसडीके के लिए आवश्यक है कि आप अलग मानक फायरबेस कोर एसडीके को शामिल करें और एक अलग स्क्रिप्ट में फायरबेस और प्रदर्शन निगरानी को प्रारंभ करें।

मानक प्रदर्शन मॉनिटरिंग एसडीके को शामिल करने के लिए, निम्न स्क्रिप्ट्स को अपने <body> टैग के नीचे जोड़ें, लेकिन इससे पहले कि आप किसी भी फ़ायरफ़ॉक्स का उपयोग करें:

 <body>
  <!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->

  <!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
  <script src="https://www.gstatic.com/firebasejs/7.17.1/firebase-app.js"></script>

  <!-- Add the standard Performance Monitoring library -->
  <script src="https://www.gstatic.com/firebasejs/7.17.1/firebase-performance.js"></script>
<body>

अपने ऐप में फायरबेस और प्रदर्शन निगरानी शुरू करें:

<body>
<!-- Previously loaded Firebase SDKs -->

<script>
  // TODO: Replace the following with your app's Firebase project configuration
  var firebaseConfig = {
    // ...
  };

  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);

  // Initialize Performance Monitoring and get a reference to the service
  var perf = firebase.performance();
</script>
</body>

होस्टिंग URL से

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

इस सेटअप विकल्प के साथ, आप फायरबेस में तैनात होने के बाद, आपका ऐप फायरबेस प्रोजेक्ट से फायरबेस कॉन्फ़िगरेशन ऑब्जेक्ट को स्वचालित रूप से खींचता है, जिसे आपने तैनात किया है। आप कई फायरबेस परियोजनाओं के लिए एक ही कोडबेस को तैनात कर सकते हैं, लेकिन आपको फायरबेस कॉन्फ़िगरेशन को ट्रैक करने की आवश्यकता नहीं है जिसका उपयोग आप firebase.initializeApp() लिए कर रहे हैं।

प्रदर्शन निगरानी एसडीके को शामिल करने के लिए, अपने <body> टैग के नीचे निम्नलिखित स्क्रिप्ट जोड़ें, लेकिन इससे पहले कि आप किसी भी Firebase सेवाओं का उपयोग करें:

 <body>
  <!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->

  <!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
  <script src="/__/firebase/7.17.1/firebase-app.js"></script>

  <!-- Add the Performance Monitoring library -->
  <script src="/__/firebase/7.17.1/firebase-performance.js"></script>
</body>

अपने ऐप में फायरबेस और प्रदर्शन की निगरानी शुरू करें (आरक्षित होस्टिंग URL का उपयोग करते समय अपने फायरबेस कॉन्फ़िगरेशन ऑब्जेक्ट को शामिल करने की आवश्यकता नहीं है):
```
<body>
  

  
  <script src="/__/firebase/init.js"></script>

  
  <script>
    var perf = firebase.performance();
    // ...
  </script>
</body>
```

आरक्षित होस्टिंग URL का उपयोग करते समय अपने प्रदर्शन निगरानी एकीकरण का स्थानीय रूप से परीक्षण करें

स्थानीय स्तर पर अपने प्रदर्शन निगरानी एकीकरण का परीक्षण करने के लिए, firebase serve वर्तमान में /__/firebase/init.js URL के माध्यम से प्रदर्शन निगरानी के लिए /__/firebase/init.js को आरंभ करने का समर्थन नहीं करता है। इसके बजाय, अपने Firebase config ऑब्जेक्ट को शामिल करें और Firebase को ऐसे शुरू करें:

  <body>
    <!-- Previously loaded Firebase SDKs (via Hosting URLs) -->

    <script>
      // TODO: Replace the following with your app's Firebase project configuration
      var firebaseConfig = {
        // ...
      };

      // Initialize Firebase
      firebase.initializeApp(firebaseConfig);

      // Initialize Performance Monitoring and get a reference to the service
      var perf = firebase.performance();
    </script>
  </body>

मॉड्यूल बंडलर का उपयोग करना

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

firebase npm पैकेज स्थापित करें और इसे अपने package.json सहेजें package.json रनिंग फ़ाइल को चलाकर:
```
npm install --save firebase
```

प्रदर्शन निगरानी एसडीके को शामिल करने के लिए, फायरबेस मॉड्यूल import करें:

 // Firebase App (the core Firebase SDK) is always required and must be listed first
import * as firebase from "firebase/app";

// Add the Performance Monitoring library
import "firebase/performance";

अपने ऐप में फायरबेस और प्रदर्शन की निगरानी शुरू करें:

// TODO: Replace the following with your app's Firebase project configuration
const firebaseConfig = {
  // ...
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

// Initialize Performance Monitoring and get a reference to the service
const perf = firebase.performance();

चरण 2 : पहली इनपुट देरी पॉलीफिल लाइब्रेरी जोड़ें

पहले इनपुट देरी मीट्रिक को मापने के लिए, आपको इस मीट्रिक के लिए पॉलीफिल लाइब्रेरी जोड़ना होगा। स्थापना निर्देशों के लिए, लाइब्रेरी के दस्तावेज़ देखें ।

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

चरण 3 : प्रारंभिक डेटा प्रदर्शन के लिए प्रदर्शन की घटनाओं को उत्पन्न करें

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

अपने वेब ऐप को स्थानीय वातावरण में परोसें और देखें।
अपनी साइट के लिए उपपृष्ठ लोड करके, अपने ऐप के साथ सहभागिता करके और / या नेटवर्क अनुरोधों को ट्रिगर करके ईवेंट बनाएं। पृष्ठ लोड होने के बाद ब्राउज़र टैब को कम से कम 10 सेकंड तक खुला रखना सुनिश्चित करें।
फायरबेस कंसोल के प्रदर्शन अनुभाग पर जाएं यह देखने के लिए कि फायरबेस ने एसडीके का पता लगाया है या नहीं।
यदि आपको "एसडीके का पता चला" संदेश नहीं दिखता है, तो समस्या निवारण युक्तियों की समीक्षा करें।
प्रदर्शन मॉनिटरिंग प्रदर्शन डैशबोर्ड में इसे प्रदर्शित करने से पहले प्रदर्शन इवेंट डेटा को संसाधित करता है। आपको एसडीके डिटेक्शन मैसेज देखने के 24 घंटे के भीतर अपना प्रारंभिक डेटा डिस्प्ले देखना चाहिए।
यदि आपको अपने प्रारंभिक डेटा का प्रदर्शन दिखाई नहीं देता है, तो समस्या निवारण युक्तियों की समीक्षा करें।

चरण 4 : (वैकल्पिक) प्रदर्शन घटनाओं के लिए लॉग संदेश देखें

अपने ब्राउज़र के डेवलपर टूल खोलें (उदाहरण के लिए, क्रोम देव टूल्स के लिए नेटवर्क टैब या फ़ायरफ़ॉक्स के लिए नेटवर्क मॉनिटर में )।
ब्राउज़र में अपने वेब ऐप को रिफ्रेश करें।
किसी भी त्रुटि संदेश के लिए अपने लॉग संदेशों की जाँच करें।
कुछ सेकंड के बाद, अपने ब्राउज़र के डेवलपर टूल में firebaselogging.googleapis.com नेटवर्क कॉल देखें। उस नेटवर्क कॉल की उपस्थिति से पता चलता है कि ब्राउज़र फायरबेस को प्रदर्शन डेटा भेज रहा है।

यदि आपका ऐप प्रदर्शन घटनाओं में प्रवेश नहीं कर रहा है, तो समस्या निवारण युक्तियों की समीक्षा करें।

चरण 5 : (वैकल्पिक) विशिष्ट कोड के लिए कस्टम मॉनिटरिंग जोड़ें

आप अपने ऐप में विशिष्ट कोड से जुड़े प्रदर्शन डेटा की निगरानी के लिए कस्टम निशान बना सकते हैं।

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

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

इन सुविधाओं के बारे में अधिक जानने के लिए विशिष्ट ऐप कोड के लिए कस्टम मॉनिटरिंग जोड़ें और उन्हें अपने ऐप में कैसे जोड़ें।

चरण 6 : अपने ऐप को नियुक्त करें फिर परिणामों की समीक्षा करें

आपके द्वारा प्रदर्शन निगरानी को मान्य करने के बाद, आप अपने उपयोगकर्ताओं के लिए अपने ऐप के अपडेटेड संस्करण को तैनात कर सकते हैं।

आप फायरबेस कंसोल के प्रदर्शन डैशबोर्ड में प्रदर्शन डेटा की निगरानी कर सकते हैं।

अगला कदम

वेब कोडेलैब के लिए फायरबेस परफॉर्मेंस मॉनिटरिंग के साथ हाथों का अनुभव प्राप्त करें।
के बारे में अधिक जानने: