Google is committed to advancing racial equity for Black communities. See how.
इस पेज का अनुवाद Cloud Translation API से किया गया है.
Switch to English

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

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

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

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

  • Firebase के साथ अपना वेब ऐप पंजीकृत करें

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

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

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

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

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

  • होस्टिंग URL से - यदि आप फायरबेस होस्टिंग का उपयोग कर रहे हैं, तो यह विकल्प फायरबेस को आरंभ करते समय आपके फायरबेस कॉन्फ़िगरेशन को प्रबंधित करने की सुविधा प्रदान करता है।

  • मॉड्यूल बंडलर का उपयोग करना - यदि आप एक बंडलर का उपयोग करते हैं (जैसे ब्राउज़रवाइज़ या वेबपैक), तो इस विकल्प का उपयोग व्यक्तिगत मॉड्यूल को आयात करने के लिए करें जब आपको उनकी आवश्यकता हो।

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

सीडीएन से

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

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

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

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

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

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

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

  1. अपनी स्क्रिप्ट फ़ाइल के शीर्ष लेख में निम्न स्क्रिप्ट जोड़ें।
  2. अपने ऐप के फायरबेस प्रोजेक्ट कॉन्फ़िगरेशन ऑब्जेक्ट को जोड़ना सुनिश्चित करें।
(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);

कहाँ पे,

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

मानक एसडीके

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

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

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

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

    <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 से

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

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

  1. प्रदर्शन मॉनिटरिंग एसडीके को शामिल करने के लिए, अपने <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/8.2.3/firebase-app.js"></script>
    
      <!-- Add the Performance Monitoring library -->
      <script src="/__/firebase/8.2.3/firebase-performance.js"></script>
    </body>
    
  2. अपने ऐप में फायरबेस और प्रदर्शन की निगरानी शुरू करें (आरक्षित होस्टिंग URL का उपयोग करते समय अपने फायरबेस कॉन्फ़िगरेशन ऑब्जेक्ट को शामिल करने की कोई आवश्यकता नहीं है):

    <body>
      <!-- Previously loaded Firebase SDKs -->
    
      <!-- Initialize Firebase -->
      <script src="/__/firebase/init.js"></script>
    
      <!-- Initialize Performance Monitoring and get a reference to the service -->
      <script>
        var perf = firebase.performance();
        // ...
      </script>
    </body>
    

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

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

  1. firebase एनपीएम पैकेज को स्थापित करें और इसे अपने package.json सहेजें package.json रनिंग फ़ाइल:

    npm install --save firebase
  2. प्रदर्शन मॉनिटरिंग एसडीके को शामिल करने के लिए, फायरबेस मॉड्यूल import करें:

    // Firebase App (the core Firebase SDK) is always required and must be listed first
    import firebase from "firebase/app";
    
    // If you are using v7 or any earlier version of the JS SDK, you should import firebase using namespace import
    // import * as firebase from "firebase/app"
    
    // Add the Performance Monitoring library
    import "firebase/performance";
    
  3. अपने ऐप में फायरबेस और प्रदर्शन निगरानी शुरू करें:

    // 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 : प्रारंभिक डेटा प्रदर्शन के लिए प्रदर्शन की घटनाओं को उत्पन्न करें

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

  1. अपने वेब ऐप को स्थानीय वातावरण में परोसें और देखें।

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

  3. फायरबेस कंसोल के प्रदर्शन डैशबोर्ड पर जाएं यह देखने के लिए कि क्या फायरबेस ने एसडीके का पता लगाया है।

    यदि आपको "एसडीके का पता चला" संदेश नहीं दिखता है, तो समस्या निवारण युक्तियों की समीक्षा करें।

  4. प्रदर्शन मॉनिटरिंग, प्रदर्शन डैशबोर्ड में प्रदर्शित करने से पहले प्रदर्शन इवेंट डेटा को संसाधित करता है। आपको एसडीके डिटेक्शन मैसेज देखने के 24 घंटे के भीतर अपना प्रारंभिक डेटा डिस्प्ले देखना चाहिए।

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

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

  1. अपने ब्राउज़र के डेवलपर टूल खोलें (उदाहरण के लिए, क्रोम देव टूल्स के लिए नेटवर्क टैब या फ़ायरफ़ॉक्स के लिए नेटवर्क मॉनिटर में )।

  2. ब्राउज़र में अपने वेब ऐप को रिफ्रेश करें।

  3. किसी भी त्रुटि संदेश के लिए अपने लॉग संदेशों की जाँच करें।

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

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

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

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

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

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

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

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

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

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

अगला कदम