🥇جاوا اسڪرپٽ ۾ لکيل فرنٽ-اينڊ ايپليڪيشنن ۾ Sentry استعمال ڪندي غلطين جي نگراني: حصو 1

خدمت فيڪٽري توهان کي ريموٽ جي نگراني ڪرڻ جي اجازت ڏئي ٿي فرنٽ-اينڊ ايپليڪيشنن ۾ لکيل JavaScript.

تي فرنٽ-آخر ايپليڪيشنن ۾ مسئلا حل ڪرڻ جي ڪوشش JavaScript مشڪل ٿي سگهي ٿو ڇاڪاڻ ته اهي صارف جي برائوزر ۾ پيدا ٿين ٿا، جنهن کي توهان وٽ اڪثر رسائي نه هوندي آهي. بهرحال، فيڪٽري اهو ممڪن بڻائي ٿو ريموٽ جي نگراني ڪرڻ لاء.

اهو آهي توھان ڊائون لوڊ ڪري سگھوٿا ھن مضمون ۾ بحث ڪيل حل.

ڇا ضروري آهي؟

جيڪڏھن توھان انھن مثالن کي استعمال ڪرڻ چاھيو ٿا، توھان کي ضرورت پوندي:

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

معياري استعمال

شروع ڪرڻ لاءِ، سروس ويب سائيٽ تان نئون شامل ڪريو فيڪٽري- ايپليڪيشن لاء پروجيڪٽ. گهربل ٻولي چونڊڻ کان پوء، توهان کي لاڳاپيل دستاويز ملي ويندا. اسان جي صورت ۾ اسان کي چونڊيو JavaScript.

پهريون مثال معياري آهي JavaScript. هتي ٻه بٽڻ آهن: "هيلو" (هيلو) ۽ "غلطي" (غلطي).

توھان کان پوء بٽڻ تي ڪلڪ ڪريو "هيلو"، اسڪرين کي ريبوٽ ڪندو ۽ بلاڪ ڪوشش ڪر بگ کي ڳولي ۽ پڪڙيندو. بگ کان پوءِ ”پڪڙجي ويو“، غلطي جي رپورٽ دستي طور تي خدمت ڏانهن موڪلي وئي آهي فيڪٽري.

"غلطي" بٽڻ توهان کي آساني سان بگ ڳولڻ جي اجازت ڏئي ٿي.

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>

نوٽ:

سينٽرري سي ڊي اين مان انسٽال ٿيل آهي ۽ عالمي متغير جي طور تي ظاهر ڪيو ويو آهي
ٿورو اڳ اسان پنهنجي جاوا اسڪرپٽ ۾ Sentry شروع ڪئي

ھن مثال کي جانچڻ لاءِ، اسان استعمال ڪري سگھون ٿا جامد ويب سرور پليٽ فارم Node.js: http سرور. فولڊر ڏانھن وڃو جتي فائل ذخيرو ٿيل آھي index.html، ۽ داخل ڪريو (اختيار سان گڏ ڪيشنگ کي غير فعال ڪري ٿو) برائوزر ۾ ايڊريس کولڻ لاءِ هيٺين لائن http://localhost:8080.

ڪيئن پڪڙيا بگ ڏيکاريا ويا آهن

پهرين بٽڻ تي ڪلڪ ڪريو "هيلو".

اسان هڪ بگ پڪڙيو، تنهنڪري اهو ڪال اسٽيڪ کي پاپ اپ نه ڪندو، ۽ تنهن ڪري ڪنسول ۾ مانيٽر نه ڪيو ويو آهي. تنهن هوندي، اسان کي موڪلڻ کان پوء فيڪٽري هڪ بگ کي دستي طور تي رپورٽ ڪريو، اسان توهان جي اڪائونٽ ۾ ان بابت هڪ پيغام ڏسندا سين.

نوٽ:

اسان معلوم ڪري سگھون ٿا ته ڪهڙي ليڪ (24) ۾ بگ شامل آهي
ان کان علاوه، بريڊ ڪرمب پيچرو ڏيکاري ٿو برائوزر ڪارناما جيڪي غلطي جي ڪري ٿي.

ڪيئن نه پڪڙيل بگ ڏيکاريا ويا آهن

بٽڻ تي ڪلڪ ڪندي "غلطي".

بگ بلبلز ڪال اسٽيڪ کي مٿي ڪري ٿو ۽ اهڙي طرح هڪ غلطي پيغام ڪنسول تي ظاهر ٿئي ٿو. ان کان پوء، Sentry خود بخود بگ مانيٽر ڪري ٿو، بغير ڪنهن اضافي عملن جي.

نوٽ:

اسان ڏسي سگهون ٿا ته ڪهڙي لڪير ۾ (30) بگ گم ٿي ويو آهي
هتي ڪو به بريڊ ڪرمب پيچرو ناهي (مون کي سمجهه ۾ نه ٿو اچي ته ڇو)

پروجيڪٽ جي سيڪيورٽي کي ڪيئن يقيني بڻايو وڃي

توھان محسوس ڪيو ھوندو آھي اسان جي ڪنٽرول ڪرڻ جو طريقو جيڪو صفحا اسان جي پروجيڪٽ ۾ غلطين جي رپورٽ ڪري سگھن ٿا فيڪٽري؛ مدد سان ڊي ايس اين رڪارڊ. مسئلو اهو آهي ته ان پٽ هر ڪنهن کي ڏسي سگهجي ٿو جيڪو توهان جي صفحي جو سورس ڪوڊ ڏسي ٿو.

هن کان بچڻ لاء، اسان کي ڊومين جي تعداد کي محدود ڪرڻ جي ضرورت آهي جيڪي اسان جي منصوبي تي غلطي رپورٽون جمع ڪري سگھن ٿيون. هن مثال ۾ اسان استعمال ڪيو مقامي هلو (مقامي ميزبان). هي اختيار سيٽنگون ٽيب ۾ ترتيب ڏنل آهي فيڪٽري- پروجيڪٽ، سينٽري پروجيڪٽ سيٽنگ.

جاري ڪري ٿو

جيڪڏهن توهان سوچيو ته ڪيئن استعمال ڪجي فيڪٽري اسان جي ايپليڪيشن جي مختلف تبديلين ۾، پوء اسان کي ڪجهه قسم جي ميکانيزم جي ضرورت آهي جيڪا غلطي کي نشان لڳندي نسخي نمبر سان.

آخرڪار، اسان نه ٿا چاهيون ته اهو بگ جيڪو اسان مقرر ڪيو آهي اهو ٻيهر پاپ اپ ٿئي، ۽ اسان سوچيو ته جيڪو اسان مقرر ڪيو اهو ڪم نه ڪيو. اهو پڻ ٿي سگهي ٿو ته صارف ايپليڪيشن جو هڪ پراڻو، ڪيش ٿيل ورزن شروع ڪيو.

مسئلو حل ڪرڻ لاء، توهان کي سڃاڻپ ڪندڙ داخل ڪرڻ جي ضرورت آهي جاري ڪيو (نسخ) شروعاتي تي فيڪٽري.

vanilla/index.html

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

ان کان پوء، سڀني نئين غلطيون نشان لڳل هونديون ڇڏڻ (0.1.0)، اهو آهي، اهي ڪوڊ جي صحيح ورزن سان ڳنڍيل هوندا.

نوٽ:

اسان رليز استعمال ڪرڻ جو هڪ آسان طريقو ڳولي ورتو آهي
Sentry توهان کي وڌيڪ استعمال ڪرڻ جي اجازت ڏئي ٿو پيچيده سندن جي استعمال، جيڪو ويجهي سان لاڳاپيل آهي GitHub. هي فنڪشن ڪجهه عملن کي انجام ڏيڻ کان پهريان ڪيچ کي ٽريڪ ڪرڻ ممڪن بڻائي ٿو.

پي ايس ٻيو حصو ڊگهو آهي ان ڪري الڳ پوسٽ ۾ هوندو.

پي ايس ٽيليگرام چيٽ سينٽر https://t.me/sentry_ru

PS مان اهو ظاهر ڪرڻ وساري ويٺو آهيان ته هي پوسٽ جو ترجمو آهي https://codeburst.io/sentry-error-reporting-by-example-part-1-999b2df11556

جو ذريعو: www.habr.com

جاوا اسڪرپٽ ۾ لکيل فرنٽ-اينڊ ايپليڪيشنن ۾ سينٽرري سان غلطي جي نگراني: حصو 1

تبصرو شامل ڪريو جواب منسوخ