🥇جاوا اسکرپٹ میں لکھی گئی فرنٹ اینڈ ایپلی کیشنز میں سنٹری کا استعمال کرتے ہوئے غلطیوں کی نگرانی: حصہ 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 سے انسٹال کیا جاتا ہے اور عالمی متغیر کے طور پر سامنے آتا ہے۔
کچھ دیر پہلے ہم نے اپنے جاوا اسکرپٹ میں Sentry کا آغاز کیا۔

اس مثال کو جانچنے کے لیے، ہم ایک جامد ویب سرور پلیٹ فارم استعمال کر سکتے ہیں۔ Node.js: HTTP سرور. اس فولڈر میں جائیں جہاں فائل محفوظ ہے۔ index.html، اور براؤزر میں ایڈریس کھولنے کے لیے درج ذیل لائن (کیچنگ کو غیر فعال کرنے کے ساتھ آپشن) درج کریں۔ http://localhost:8080.

پکڑے گئے کیڑے کیسے دکھائے جاتے ہیں۔

پہلے بٹن پر کلک کریں۔ "ہیلو".

ہم نے ایک بگ پکڑا ہے، لہذا یہ کال اسٹیک کو پاپ اپ نہیں کرے گا، اور اس وجہ سے کنسول میں اس کی نگرانی نہیں کی جاتی ہے۔ تاہم، چونکہ ہم بھیجتے ہیں۔ سنتری دستی طور پر بگ کی اطلاع دیں، ہم آپ کے اکاؤنٹ میں اس کے بارے میں ایک پیغام دیکھیں گے۔

نوٹ:

ہم پتہ لگا سکتے ہیں کہ کون سی لائن (24) میں بگ ہے۔
اس کے علاوہ، بریڈ کرمب ٹریل براؤزر کی کارروائیوں کو دکھاتا ہے جس کی وجہ سے خرابی ہوئی۔

نہ پکڑے ہوئے کیڑے کیسے دکھائے جاتے ہیں۔

بٹن پر کلک کریں۔ "خرابی"۔

بگ کال اسٹیک کو بلبلا دیتا ہے اور اس طرح کنسول پر ایک ایرر میسج ظاہر ہوتا ہے۔ اس کے بعد، Sentry بغیر کسی اضافی کارروائی کے خود بخود بگ کی نگرانی کرتا ہے۔

نوٹ:

ہم دیکھ سکتے ہیں کہ کس لائن (30) میں بگ کھو گیا ہے۔
کوئی بریڈ کرمب ٹریل نہیں ہے (میں بالکل سمجھ نہیں آتا کیوں)

منصوبے کی حفاظت کو کیسے یقینی بنایا جائے۔

آپ نے دیکھا ہوگا کہ ہم کس طرح کنٹرول کرتے ہیں کہ کون سے صفحات ہمارے پروجیکٹ میں غلطیوں کی اطلاع دے سکتے ہیں۔ سنتری; مدد کے ساتھ ڈی ایس این ریکارڈز مسئلہ یہ ہے کہ ان پٹ کو ہر وہ شخص دیکھ سکتا ہے جو آپ کے صفحہ کا سورس کوڈ دیکھتا ہے۔

اس سے بچنے کے لیے، ہمیں ڈومینز کی تعداد کو محدود کرنے کی ضرورت ہے جو ہمارے پروجیکٹ میں غلطی کی رپورٹیں جمع کر سکتے ہیں۔ اس مثال میں ہم نے استعمال کیا۔ localhost (مقامی میزبان)۔ یہ اختیار ترتیبات کے ٹیب میں ترتیب دیا گیا ہے۔ سنتری- پروجیکٹ، سنتری پروجیکٹ کی ترتیب.

جاری کرتا ہے۔

اگر آپ استعمال کرنے کا طریقہ سوچتے ہیں۔ سنتری ہماری درخواست کے مختلف تغیرات میں، پھر ہمیں کسی قسم کے طریقہ کار کی ضرورت ہے جو غلطیوں کو ورژن نمبر کے ساتھ نشان زد کرے۔

بہر حال، ہم نہیں چاہتے کہ ہم نے جو بگ ٹھیک کیا ہے وہ دوبارہ پاپ اپ ہو، اور ہم سمجھتے ہیں کہ جو ہم نے ٹھیک کیا ہے وہ کام نہیں کرتا ہے۔ یہ بھی ہو سکتا ہے کہ صارف نے ایپلیکیشن کا پرانا، کیشڈ ورژن لانچ کیا ہو۔

مسئلہ کو حل کرنے کے لیے، آپ کو شناخت کنندہ درج کرنے کی ضرورت ہے۔ رہائی (ورژن) آغاز پر سنتری.

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

نیا تبصرہ شامل کریں جواب منسوخ کریں