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

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

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

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

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

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

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

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

  2. प्रदर्शन मॉनिटरिंग जेएस एसडीके जोड़ें और प्रदर्शन मॉनिटरिंग प्रारंभ करें:

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

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 : प्रारंभिक डेटा प्रदर्शन के लिए प्रदर्शन ईवेंट उत्पन्न करें

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

अगले कदम