Check out what’s new from Firebase at Google I/O 2022. Learn more

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

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

यदि आपने पहले से ऐसा नहीं किया है, तो यह जानने के लिए अपने JavaScript प्रोजेक्ट में Firebase जोड़ें पर जाएं:

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

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

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

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

  1. यदि आपने पहले से ऐसा नहीं किया है, तो Firebase JS SDK स्थापित करें और Firebase प्रारंभ करें ।

  2. प्रदर्शन निगरानी जेएस एसडीके जोड़ें और प्रदर्शन निगरानी शुरू करें:

Web version 9

import { initializeApp } from "firebase/app";
import { getPerformance } from "firebase/performance";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);


// Initialize Performance Monitoring and get a reference to the service
const perf = getPerformance(app);

Web version 8

import firebase from "firebase/app";
import "firebase/performance";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);


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

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

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

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

चरण 3 : प्रारंभिक डेटा प्रदर्शन के लिए प्रदर्शन ईवेंट उत्पन्न करें

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

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

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

  3. फायरबेस कंसोल के परफॉर्मेंस डैशबोर्ड पर जाएं। आपको कुछ ही मिनटों में अपना प्रारंभिक डेटा प्रदर्शन देखना चाहिए।

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

अगले कदम