🥇 জাভাস্ক্রিপ্টে লেখা ফ্রন্ট-এন্ড অ্যাপ্লিকেশনগুলিতে সেন্ট্রি ব্যবহার করে ত্রুটিগুলি পর্যবেক্ষণ করা: পার্ট 1

সেবা প্রহরী এতে লিখিত ফ্রন্ট-এন্ড অ্যাপ্লিকেশনগুলিতে বাগগুলি দূরবর্তীভাবে নিরীক্ষণ করার অনুমতি দেয় জাভাস্ক্রিপ্ট.

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

এটা হল আপনি এই নিবন্ধে আলোচনা করা সমাধান ডাউনলোড করতে পারেন.

প্রয়োজনীয় কি

আপনি যদি এই উদাহরণগুলি ব্যবহার করতে চান তবে আপনার প্রয়োজন হবে:

node.js: একটি বৈশিষ্ট্য সমৃদ্ধ ডেভেলপমেন্ট টুল যা অ্যাপ্লিকেশনের অংশ নয়। আমরা সর্বশেষ LTS সংস্করণ ডাউনলোড করেছি (8.12.0)
প্রহরী: হয় সেন্ট্রি পরিষেবাতে একটি অ্যাকাউন্ট (আপনি বিনামূল্যে প্রতি মাসে 10 হাজার বাগ রেকর্ড করতে পারেন) অথবা একটি ইনস্টল করা স্থানীয় সেন্ট্রি - https://github.com/getsentry/onpremise

আপনার সার্ভারে ইনস্টলেশন

আপনার সার্ভারে সেন্ট্রি অন-প্রিমাইজ ইনস্টল করতে আপনি 2 উপায়ে যেতে পারেন

rpm তৈরি করুন এবং তাদের ইনস্টল করুন - https://habr.com/ru/post/500632/

অফিসিয়াল ইনস্টলার ব্যবহার করুন:

Установить на сервер docker и docker-compose
git clone https://github.com/getsentry/onpremise.git
./install.sh

স্ট্যান্ডার্ড ব্যবহার

শুরু করতে, পরিষেবার ওয়েবসাইট থেকে একটি নতুন যোগ করুন প্রহরী- আবেদনের জন্য প্রকল্প। পছন্দসই ভাষা নির্বাচন করার পরে, আপনি সংশ্লিষ্ট ডকুমেন্টেশন পাবেন। আমাদের ক্ষেত্রে আমরা বেছে নিয়েছি জাভাস্ক্রিপ্ট.

প্রথম উদাহরণটি আদর্শ জাভাস্ক্রিপ্ট. এখানে দুটি বোতাম আছে: "হ্যালো" (ওহে এবং "ত্রুটি" (ত্রুটি).

আপনি বাটন ক্লিক করার পরে "হ্যালো", স্ক্রীন রিবুট হবে এবং ব্লক হবে চেষ্টা বাগ সনাক্ত এবং ধরা হবে. বাগ "ধরা" পরে, ত্রুটি রিপোর্ট ম্যানুয়ালি পরিষেবাতে পাঠানো হয় প্রহরী.

"ত্রুটি" বোতামটি আপনাকে সহজেই একটি বাগ সনাক্ত করতে দেয়৷

vanilla/index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vanilla</title>
</head>
<body>
  <button id="hello">Hello</button>
  <button id="error">Error</button>
  <div id="output"></div>
  <script src="https://browser.sentry-cdn.com/4.0.5/bundle.min.js" crossorigin="anonymous"></script>
  <script>
    (function () {
      'use strict';
      Sentry.init({ dsn: 'https://[email protected]/1289664' });
      var helloEl = document.getElementById('hello');
      var errorEl = document.getElementById('error');
      var outputEl = document.getElementById('output');
      helloEl.addEventListener('click', handleHelloClick);
      errorEl.addEventListener('click', handleErrorClick);
      function handleHelloClick() {
        outputEl.innerHTML = 'Hello World';
        try {
          throw new Error('Caught');
        } catch (err) {
          Sentry.captureException(err);
        }
      }
      function handleErrorClick() {
        throw new Error('Uncaught');
      }
    })();
  </script>
</body>
</html>

মন্তব্য সমূহ:

সেন্ট্রি একটি CDN থেকে ইনস্টল করা হয় এবং একটি গ্লোবাল ভেরিয়েবল হিসাবে প্রকাশ করা হয়
একটু আগে আমরা আমাদের জাভাস্ক্রিপ্টে সেন্ট্রি চালু করেছি

এই উদাহরণটি পরীক্ষা করার জন্য, আমরা একটি স্ট্যাটিক ওয়েব সার্ভার প্ল্যাটফর্ম ব্যবহার করতে পারি node.js: http সার্ভার. ফাইলটি যে ফোল্ডারে সংরক্ষিত আছে সেখানে যান index.html, এবং ব্রাউজারে ঠিকানাটি খুলতে নিম্নলিখিত লাইনটি প্রবেশ করুন (ক্যাশিং নিষ্ক্রিয় করে বিকল্প) http://localhost:8080.

কিভাবে ধরা বাগ প্রদর্শিত হয়

প্রথমে বাটনে ক্লিক করুন "হ্যালো".

আমরা একটি বাগ ধরেছি, তাই এটি কল স্ট্যাক পপ আপ করবে না, এবং তাই কনসোলে নিরীক্ষণ করা হয় না। যাইহোক, যেহেতু আমরা পাঠাই প্রহরী ম্যানুয়ালি একটি বাগ রিপোর্ট করুন, আমরা আপনার অ্যাকাউন্টে এটি সম্পর্কে একটি বার্তা দেখতে পাব।

মন্তব্য সমূহ:

আমরা ট্রেস করতে পারি কোন লাইনে (24) বাগ রয়েছে
উপরন্তু, ব্রেডক্রাম্ব ট্রেইল ব্রাউজার ক্রিয়াগুলি প্রদর্শন করে যা ত্রুটির দিকে পরিচালিত করে।

কিভাবে ধরা না পড়া বাগ প্রদর্শিত হয়

বোতামে ক্লিক করুন "ত্রুটি".

বাগটি কল স্ট্যাককে বুদবুদ করে এবং এইভাবে কনসোলে একটি ত্রুটি বার্তা প্রদর্শিত হয়। এর পরে, সেন্ট্রি স্বয়ংক্রিয়ভাবে বাগটি নিরীক্ষণ করে, কোন অতিরিক্ত ক্রিয়া ছাড়াই।

মন্তব্য সমূহ:

আমরা দেখতে পারি কোন লাইনে (30) বাগ হারিয়ে গেছে
কোন ব্রেডক্রাম্ব ট্রেইল নেই (আমি ঠিক বুঝতে পারছি না কেন)

কিভাবে প্রকল্পের নিরাপত্তা নিশ্চিত করা যায়

কোন পৃষ্ঠাগুলি আমাদের প্রকল্পে ত্রুটিগুলি রিপোর্ট করতে পারে তা আমরা নিয়ন্ত্রণ করার উপায় আপনি হয়তো লক্ষ্য করেছেন৷ প্রহরী; সাহায্যে ডিএসএন রেকর্ড সমস্যা হল যে আপনার পৃষ্ঠার সোর্স কোড দেখেন এমন যে কেউ ইনপুটটি দেখতে পারেন।

এটি এড়াতে, আমাদের প্রকল্পে ত্রুটি প্রতিবেদন জমা দিতে পারে এমন ডোমেনের সংখ্যা সীমিত করতে হবে। এই উদাহরণে আমরা ব্যবহার করেছি স্থানীয় হোস্ট (স্থানীয় হোস্ট)। এই বিকল্পটি সেটিংস ট্যাবে কনফিগার করা আছে প্রহরী-প্রকল্প, সেন্ট্রি প্রজেক্ট সেটিং.

মুক্তি দেয়

আপনি যদি চিন্তা করেন কিভাবে ব্যবহার করবেন প্রহরী আমাদের অ্যাপ্লিকেশনের বিভিন্ন বৈচিত্র্যের মধ্যে, তারপর আমাদের এমন কিছু পদ্ধতির প্রয়োজন যা একটি সংস্করণ নম্বর দিয়ে ত্রুটি চিহ্নিত করবে।

সর্বোপরি, আমরা যে বাগ সংশোধন করেছি তা আবার পপ আপ করতে চাই না এবং আমরা মনে করি যে আমরা যা ঠিক করেছি তা কাজ করেনি। এটি এমনও হতে পারে যে ব্যবহারকারী অ্যাপ্লিকেশনটির একটি পুরানো, ক্যাশে সংস্করণ চালু করেছেন৷

সমস্যা সমাধানের জন্য, আপনাকে সনাক্তকারী প্রবেশ করতে হবে মুক্তি (সংস্করণ) শুরুতে প্রহরী.

vanilla/index.html

...
var RELEASE = '0.1.0';
Sentry.init({
  dsn: 'https://[email protected]/1289664',
  release: RELEASE,
});
...

এর পরে, সমস্ত নতুন ত্রুটি হিসাবে চিহ্নিত করা হবে মুক্তি (0.1.0), অর্থাৎ, তারা কোডের সঠিক সংস্করণে বাঁধা হবে।

মন্তব্য সমূহ:

আমরা রিলিজ ব্যবহার করার একটি সহজ উপায় বের করেছি
সেন্ট্রি আপনাকে আরও ব্যবহার করতে দেয় জটিল তাদের ব্যবহারের, যা ঘনিষ্ঠভাবে সম্পর্কিত GitHub. এই ফাংশনটি নির্দিষ্ট অপারেশন করার আগে বাগ ট্র্যাক করা সম্ভব করে তোলে।

PS দ্বিতীয় অংশটি দীর্ঘ, তাই এটি একটি পৃথক পোস্টে থাকবে।

পিএস টেলিগ্রাম চ্যাট সেন্ট্রি https://t.me/sentry_ru

PS আমি ইঙ্গিত করতে ভুলে গেছি যে এটি পোস্টটির একটি অনুবাদ https://codeburst.io/sentry-error-reporting-by-example-part-1-999b2df11556

উত্স: www.habr.com

জাভাস্ক্রিপ্টে লিখিত ফ্রন্ট-এন্ড অ্যাপ্লিকেশনগুলিতে সেন্ট্রির সাথে ত্রুটিগুলি পর্যবেক্ষণ করা: পার্ট 1

একটি মন্তব্য জুড়ুন উত্তর বাতিল