Catch up on highlights from Firebase at Google I/O 2023. Learn more

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

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

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

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

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

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

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

  1. यदि आपके पास पहले से नहीं है, तो Firebase JS SDK इंस्टॉल करें और Firebase को इनिशियलाइज़ करें ।

  2. प्रदर्शन मॉनिटरिंग JS SDK जोड़ें और प्रदर्शन मॉनिटरिंग आरंभ करें:

वेब मॉड्यूलर एपीआई

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);

वेब नेमस्पेस्ड एपीआई

import firebase from "firebase/compat/app";
import "firebase/compat/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 : आरंभिक डेटा प्रदर्शन के लिए प्रदर्शन ईवेंट उत्पन्न करें

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

अगले कदम