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

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

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

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

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

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

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

  1. आप पहले से ही नहीं है, तो Firebase जे एस एसडीके स्थापित करने और Firebase प्रारंभ ।

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

    वेब संस्करण 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);

    वेब संस्करण 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: पहला इनपुट देरी polyfill पुस्तकालय जोड़े

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

अगला कदम