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

তুমি শুরু করার আগে

আপনি ইতিমধ্যে থাকে তবে এখানে যান আপনার জাভাস্ক্রিপ্ট প্রকল্প Firebase যোগ করা শিখতে:

  • ফায়ারবেস প্রকল্প তৈরি করুন

  • ফায়ারবেস দিয়ে আপনার ওয়েব অ্যাপ্লিকেশন নিবন্ধন করুন

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

ধাপ 1: যোগ কর্মক্ষমতা নিরীক্ষণের এবং Firebase আরম্ভ

যদি আপনি ইতিমধ্যে না পেয়ে থাকেন তবে পারফরম্যান্স মনিটরিং এসডিকে যুক্ত করুন এবং নীচের বিকল্পগুলির মধ্যে একটি ব্যবহার করে আপনার অ্যাপ্লিকেশনটিতে ফায়ারবেস শুরু করুন। আপনার বিকল্পগুলির মধ্যে চয়ন করতে আপনাকে সাহায্য করার জন্য নিম্নলিখিতগুলি বিবেচনা করুন (আরও বিস্তারিত তথ্যের জন্য স্বতন্ত্র ট্যাবগুলি দেখুন):

  • যা CDN থেকে (স্বতন্ত্র SDK এর) - কর্মক্ষমতা নিরীক্ষণের আপনার অ্যাপে শুধুমাত্র Firebase পণ্য, এই বিকল্পটি লোড একটি একক, লাইটার-ওজন যা CDN থেকে SDK এর হয়।

  • যা CDN (আদর্শ SDK এর) থেকে - আপনি আপনার app এর মধ্যে অন্যান্য Firebase পণ্য ব্যবহার করেন, তাহলে এই অপশনটি লোড পারফরমেন্স যা CDN থেকে অন্য Firebase লাইব্রেরি সহ মনিটরিং SDK এর।

  • হোস্টিং URL গুলি থেকে - আপনি Firebase হোস্টিং, এই বিকল্প অফার আপনার Firebase কনফিগারেশন পরিচালনার যখন Firebase আরম্ভের জন্য একটি সুবিধার ব্যবহার করেন, তাহলে।

  • মডিউল bundlers ব্যবহার - আপনি যদি একটি bundler (Browserify বা webpack মত) ব্যবহার করেন, তাহলে প্রতিটি মডিউল আমদানি করতে আপনার প্রয়োজনের সময় এই অপশনটি ব্যবহার করুন।

পরে আপনার কর্মক্ষমতা নিরীক্ষণের SDK এর জুড়েছেন, Firebase স্বয়ংক্রিয়ভাবে আপনার অ্যাপ্লিকেশনের জন্য তথ্য সংগ্রহ শুরু হয় পৃষ্ঠা লোড এবং HTTP- র / এস নেটওয়ার্কের অনুরোধ

সিডিএন থেকে

আপনি ফায়ারবেস জাভাস্ক্রিপ্ট এসডিকে আংশিক আমদানি কনফিগার করতে পারেন এবং কেবল আপনার প্রয়োজন ফায়ারবেস লাইব্রেরি লোড করতে পারেন। ফায়ারবেস ফায়ারবেস জাভাস্ক্রিপ্ট এসডিকে প্রতিটি লাইব্রেরি আমাদের গ্লোবাল সিডিএন (সামগ্রী বিতরণ নেটওয়ার্ক) এ সঞ্চয় করে।

সিডিএন থেকে পারফরম্যান্স মনিটরিং এসডিকে অন্তর্ভুক্ত করতে আপনার কাছে দুটি বিকল্প রয়েছে:

  • স্বতন্ত্র SDK এর - কর্মক্ষমতা নিরীক্ষণের শুধুমাত্র Firebase পণ্য যা আপনি আপনার অ্যাপে ব্যবহার করা হয়।
  • মান SDK এর - তুমি পারফরমেন্স আপনার অ্যাপে অন্যান্য Firebase পণ্যের সঙ্গে বরাবর মনিটরিং ব্যবহার করছেন।

স্বতন্ত্র SDK

পারফরম্যান্স মনিটরিং যদি আপনার অ্যাপের একমাত্র ফায়ারবেস পণ্য হয় তবে আপনি যদি আগ্রহী হন তবে স্বতন্ত্র পারফরম্যান্স মনিটরিং এসডিকে (এবং নীচে প্রস্তাবিত শিরোনাম স্ক্রিপ্ট) ব্যবহার করুন:

  • আপনার এসডিকে প্যাকেজের আকার হ্রাস করছে
  • আপনার পৃষ্ঠা লোড হওয়ার পরে অবধি এসডিকে শুরু করতে বিলম্ব করা

আপনার অ্যাপ্লিকেশনটিতে স্ট্যান্ডেলোন পারফরম্যান্স মনিটরিং এসডিকে অন্তর্ভুক্ত করতে এবং এটির পৃষ্ঠায়িতকরণের পরে এর সূচনাটি বিলম্ব করতে:

  1. আপনার সূচক ফাইলের শিরোনামে নিম্নলিখিত স্ক্রিপ্টটি যুক্ত করুন।
  2. আপনার অ্যাপ্লিকেশনের যোগ করার জন্য নিশ্চিত করুন Firebase প্রকল্পের কনফিগারেশন বস্তুর
(function(sa,fbc){function load(f,c){var a=document.createElement('script');
a.async=1;a.src=f;var s=document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(a,s);}load(sa);
window.addEventListener('load',function(){firebase.initializeApp(fbc).performance()});
})(performance_standalone, firebaseConfig);

কোথায়,

  • performance_standalone হয় 'https://www.gstatic.com/firebasejs/8.8.0/firebase-performance-standalone.js'
  • firebaseConfig আপনার অ্যাপ্লিকেশনের হয় Firebase কনফিগ বস্তুর

উপরে স্ক্রিপ্ট দ্বারা অ্যাসিঙ্ক্রোনাস লোড স্বতন্ত্র SDK এর তারপর উইন্ডোর পর Firebase সূচনা onload ঘটনা দাবানল। এই যুদ্ধকৌশল প্রভাব SDK এর আছে পারে যে হ্রাস পৃষ্ঠা লোড মেট্রিক্স যেহেতু ব্রাউজার ইতিমধ্যে তার লোডিং মেট্রিক্স জানিয়েছেন যখন আপনি SDK এর আরম্ভ।

স্ট্যান্ডার্ড এসডিকে

আপনি যদি অন্য ফায়ারবেস পণ্য ব্যবহার করেন (যেমন আপনার অ্যাপ্লিকেশনটিতে প্রমাণীকরণ বা ক্লাউড ফায়ার স্টোর, স্ট্যান্ডার্ড পারফরম্যান্স মনিটরিং এসডিকে অন্তর্ভুক্ত)।

নোট করুন যে এই এসডিকে আপনার পৃথক স্ট্যান্ডার্ড ফায়ারবেস কোর এসডিকে অন্তর্ভুক্ত করা উচিত এবং একটি পৃথক স্ক্রিপ্টে ফায়ারবেস এবং পারফরম্যান্স মনিটরিং শুরু করুন।

  1. মান কর্মক্ষমতা নিরীক্ষণের SDK এর অন্তর্ভুক্ত করার জন্য, আপনার নীচে নিম্নলিখিত স্ক্রিপ্ট যোগ <body> ট্যাগ, কিন্তু আগে আপনার কোন Firebase পরিষেবাগুলি ব্যবহার:

    <body>
      <!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->
    
      <!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
      <script src="https://www.gstatic.com/firebasejs/8.8.0/firebase-app.js"></script>
    
      <!-- Add the standard Performance Monitoring library -->
      <script src="https://www.gstatic.com/firebasejs/8.8.0/firebase-performance.js"></script>
    <body>
    
  2. আপনার অ্যাপে ফায়ারবেস এবং পারফরম্যান্স মনিটরিং শুরু করুন:

    <body>
    <!-- Previously loaded Firebase SDKs -->
    
    <script>
      // TODO: Replace the following with your app's Firebase project configuration
      var firebaseConfig = {
        // ...
      };
    
      // Initialize Firebase
      firebase.initializeApp(firebaseConfig);
    
      // Initialize Performance Monitoring and get a reference to the service
      var perf = firebase.performance();
    </script>
    </body>
    

হোস্টিং ইউআরএল থেকে

আপনি যখন ফায়ারবেস হোস্টিং ব্যবহার করেন, তখন আপনি ফায়ারবেস জাভাস্ক্রিপ্ট এসডিকে লাইব্রেরিগুলি সংরক্ষিত ইউআরএল থেকে গতিশীল লোড করতে আপনার অ্যাপ্লিকেশনটি কনফিগার করতে পারেন। সম্পর্কে আরও জানুন সংরক্ষিত হোস্টিং URL- এর মাধ্যমে SDK আছে যোগ

এই সেটআপ বিকল্প সঙ্গে, পরে আপনি Firebase যাও স্থাপন , আপনার অ্যাপ্লিকেশন স্বয়ংক্রিয়ভাবে Firebase প্রকল্পে আপনার মোতায়েন করেছেন সেগুলি থেকে Firebase কনফিগারেশন বস্তুর pulls। আপনি একাধিক Firebase প্রকল্পে একই কোডবেস স্থাপন করতে, কিন্তু আপনি Firebase কনফিগারেশন যে আপনার জন্য ব্যবহার করছেন ট্র্যাক করতে হবে না firebase.initializeApp()

  1. কর্মক্ষমতা নিরীক্ষণের SDK এর অন্তর্ভুক্ত করার জন্য, আপনার নীচে নিম্নলিখিত স্ক্রিপ্ট যোগ <body> ট্যাগ, কিন্তু আগে আপনার কোন Firebase পরিষেবাগুলি ব্যবহার:

    <body>
      <!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->
    
      <!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
      <script src="/__/firebase/8.8.0/firebase-app.js"></script>
    
      <!-- Add the Performance Monitoring library -->
      <script src="/__/firebase/8.8.0/firebase-performance.js"></script>
    </body>
    
  2. আপনার অ্যাপে ফায়ারবেস এবং পারফরম্যান্স মনিটরিং শুরু করুন (সংরক্ষিত হোস্টিং ইউআরএলগুলি ব্যবহার করার সময় আপনার ফায়ারবেস কনফিগারেশন অবজেক্টটি অন্তর্ভুক্ত করার দরকার নেই):

    <body>
      <!-- Previously loaded Firebase SDKs -->
    
      <!-- Initialize Firebase -->
      <script src="/__/firebase/init.js"></script>
    
      <!-- Initialize Performance Monitoring and get a reference to the service -->
      <script>
        var perf = firebase.performance();
        // ...
      </script>
    </body>
    

মডিউল বান্ডলার ব্যবহার

আপনি ফায়ারবেস জাভাস্ক্রিপ্ট এসডিকে আংশিক আমদানি কনফিগার করতে পারেন এবং কেবল আপনার প্রয়োজন ফায়ারবেস পণ্য লোড করতে পারেন। আপনি যদি একটি bundler (Browserify বা webpack মত) ব্যবহার করেন, তাহলে আপনি পারেন import পৃথক Firebase পণ্য যখন আপনি তাদের প্রয়োজন।

  1. ইনস্টল করুন firebase npm প্যাকেজ এবং আপনার সংরক্ষণ package.json চালিয়ে ফাইল:

    npm install --save firebase
  2. কর্মক্ষমতা নিরীক্ষণের SDK এর অন্তর্ভুক্ত করার জন্য, import Firebase মডিউল:

    // Firebase App (the core Firebase SDK) is always required and must be listed first
    import firebase from "firebase/app";
    
    // If you are using v7 or any earlier version of the JS SDK, you should import firebase using namespace import
    // import * as firebase from "firebase/app"
    
    // Add the Performance Monitoring library
    import "firebase/performance";
    
  3. আপনার অ্যাপে ফায়ারবেস এবং পারফরম্যান্স মনিটরিং শুরু করুন:

    // TODO: Replace the following with your app's Firebase project configuration
    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. আপনার ব্রাউজারের ডেভেলপার টুলস খুলুন (উদাহরণস্বরূপ, নেটওয়ার্ক ক্রোম দেব সরঞ্জাম করার জন্য ট্যাব অথবা ফায়ারফক্স জন্য নেটওয়ার্ক মনিটর )।

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

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

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

আপনার অ্যাপ্লিকেশন কর্মক্ষমতা ঘটনা লগিং না থাকে, পর্যালোচনা সমস্যা সমাধান টিপসের

পদক্ষেপ 5: (ঐচ্ছিক) কাস্টম নির্দিষ্ট কোডের জন্য পর্যবেক্ষণ যোগ

, আপনি উপকরণ পারেন আপনার অ্যাপে নির্দিষ্ট কোডের মাধ্যমে যুক্ত কর্মক্ষমতা ডেটা পর্যবেক্ষণ করতে পারেন কাস্টম কোড ট্রেস

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

আপনার কোডে, আপনি পারফরম্যান্স মনিটরিং এসডিকে সরবরাহিত এপিআই ব্যবহার করে একটি কাস্টম কোড ট্রেস (এবং কোনও পছন্দসই কাস্টম মেট্রিক যুক্ত করুন) এর শুরু এবং শেষের সংজ্ঞা দিয়েছেন।

পরিদর্শন জন্য নির্দিষ্ট কোড পর্যবেক্ষণ যোগ করুন এই বৈশিষ্ট্যগুলি এবং কিভাবে তাদের আপনার অ্যাপ্লিকেশানে যোগ করার পদ্ধতি সম্পর্কে আরও জানতে।

পদক্ষেপ 6: স্থাপন আপনার অ্যাপ তারপর পর্যালোচনা ফলাফল

পারফরম্যান্স মনিটরিং যাচাই করার পরে, আপনি আপনার অ্যাপ্লিকেশনটির আপডেট হওয়া সংস্করণটি আপনার ব্যবহারকারীদের কাছে স্থাপন করতে পারেন।

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

পরবর্তী পদক্ষেপ