ওয়েবের জন্য পারফর্ম্যান্স মনিটরিং ব্যবহার শুরু করা

শুরু করার আগে

আপনি যদি আগে থেকে না করে থাকেন, তাহলে আপনার JavaScript প্রোজেক্টে Firebase যোগ করুন লিঙ্কে গিয়ে কীভাবে নিম্নলিখিত কাজগুলি করবেন তা জানুন:

  • Firebase প্রোজেক্ট তৈরি করা

  • Firebase-এ আপনার ওয়েব অ্যাপ রেজিস্টার করুন

মনে রাখবেন, আপনার অ্যাপে Firebase যোগ করার সময়, এই পৃষ্ঠায় পরে বর্ণনা করা কিছু ধাপ আপনি সম্পূর্ণ করতে পারেন (যেমন, SDK যোগ করা এবং Firebase শুরু করা)।

ধাপ ১: Performance Monitoring যোগ ও ইনিশিয়ালাইজ করুন

  1. আপনি আগে না করে থাকলে, Firebase JS SDK ইনস্টল করুন এবং Firebase শুরু করুন।

  2. Performance Monitoring JS SDK যোগ করুন এবং Performance Monitoring শুরু করুন:

Web 

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 

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

Performance Monitoring SDK অটোমেটিক Core Web Vitals রেকর্ড করে।

ধাপ ২: প্রাথমিক ডেটা দেখানোর জন্য পারফর্ম্যান্স ইভেন্ট জেনারেট করুন

আপনার অ্যাপে SDK যোগ করার পর Firebase ইভেন্ট প্রসেস করা শুরু করে। আপনি যদি এখনও লোকালভাবে ডেভেলপ করেন, তাহলে প্রাথমিক ডেটা সংগ্রহ ও প্রসেস করার জন্য ইভেন্ট তৈরি করতে আপনার অ্যাপের সাথে ইন্টার‍্যাক্ট করুন।

  1. লোকাল এনভায়রনমেন্টে আপনার ওয়েব অ্যাপ পরিবেশন করুন ও দেখুন।

  2. আপনার সাইটের জন্য সাবপেজ লোড করে, আপনার অ্যাপের সাথে ইন্টার‌্যাক্ট করে এবং/অথবা নেটওয়ার্ক অনুরোধ ট্রিগার করে ইভেন্ট জেনারেট করুন। পৃষ্ঠা লোড হওয়ার পরে ব্রাউজার ট্যাবটি কমপক্ষে ১০ সেকেন্ড খোলা রাখতে ভুলবেন না।

  3. Firebase কনসোলের পারফর্ম্যান্স ড্যাশবোর্ডে যান। কয়েক মিনিটের মধ্যে আপনার প্রাথমিক ডেটা ডিসপ্লে দেখতে পাবেন।

    আপনার প্রাথমিক ডেটা দেখতে না পেলে, সমস্যার সমাধানকরণ পরামর্শ পর্যালোচনা করুন।

ধাপ ৩: (ঐচ্ছিক) পারফর্ম্যান্স ইভেন্টের জন্য লগ মেসেজ দেখুন

  1. আপনার ব্রাউজারের ডেভেলপার টুল খুলুন (যেমন, Chrome Dev টুলের জন্য নেটওয়ার্ক ট্যাব অথবা Firefox-এর জন্য নেটওয়ার্ক মনিটর)।

  2. ব্রাউজারে আপনার ওয়েব অ্যাপ রিফ্রেশ করুন।

  3. কোনও ত্রুটি মেসেজ আছে কিনা তা জানতে আপনার লগ মেসেজ চেক করুন।

  4. কয়েক সেকেন্ড পরে, আপনার ব্রাউজারের ডেভেলপার টুলে firebaselogging.googleapis.com-এ নেটওয়ার্ক কল খুঁজুন। সেই নেটওয়ার্ক কলের উপস্থিতি দেখায় যে ব্রাউজার Firebase-এ পারফর্ম্যান্স ডেটা পাঠাচ্ছে।

আপনার অ্যাপ পারফর্ম্যান্স ইভেন্ট লগ না করলে, সমস্যার সমাধানকরণ পরামর্শ পর্যালোচনা করুন।

ধাপ ৪: (ঐচ্ছিক) নির্দিষ্ট কোডের জন্য কাস্টম মনিটরিং যোগ করুন

আপনার অ্যাপে নির্দিষ্ট কোডের সাথে সম্পর্কিত পারফর্ম্যান্স ডেটা মনিটর করতে, আপনি কাস্টম কোড ট্রেস ইন্সট্রুমেন্ট করতে পারেন।

কাস্টম কোড ট্রেসের মাধ্যমে, আপনার অ্যাপের কোনও নির্দিষ্ট টাস্ক বা টাস্কের সেট সম্পূর্ণ করতে কত সময় লাগে তা পরিমাপ করতে পারবেন, যেমন, ছবির সেট লোড করা বা আপনার ডেটাবেস কোয়েরি করা। কাস্টম কোড ট্রেসের ডিফল্ট মেট্রিক হল এর সময়সীমা, তবে আপনি কাস্টম মেট্রিকও যোগ করতে পারেন, যেমন ক্যাশে হিট এবং মেমরি সংক্রান্ত সতর্কতা।

আপনার কোডে, আপনি Performance Monitoring SDK-এর মাধ্যমে প্রদান করা API ব্যবহার করে কাস্টম কোড ট্রেসের শুরু এবং শেষ (এবং যেকোনও পছন্দসই কাস্টম মেট্রিক যোগ করুন) নির্ধারণ করেন।

এইসব ফিচার সম্পর্কে এবং কীভাবে আপনার অ্যাপে সেগুলি যোগ করবেন সেই বিষয়ে আরও জানতে নির্দিষ্ট কোডের জন্য মনিটরিং যোগ করুন লিঙ্কে যান।

ধাপ ৫: আপনার অ্যাপ ডিপ্লয় করুন এবং তারপর ফলাফল পর্যালোচনা করুন

আপনি Performance Monitoring যাচাই করার পরে, আপনার অ্যাপের আপডেট করা ভার্সন ব্যবহারকারীদের জন্য ডিপ্লয় করতে পারবেন।

আপনি Firebase কনসোলের পারফর্ম্যান্স ড্যাশবোর্ড থেকে পারফর্ম্যান্স ডেটা মনিটর করতে পারবেন।

পরবর্তী ধাপ