🥇 JavaScript ဖြင့်ရေးသားထားသော ရှေ့ဆုံးအပလီကေးရှင်းများတွင် Sentry ကိုအသုံးပြု၍ အမှားများကို စောင့်ကြည့်ခြင်း- အပိုင်း 1

ဝန်ဆောင်မှု ကင်းစောင့် ရေးထားတဲ့ front-end applications တွေမှာ bug တွေကို အဝေးကနေ စောင့်ကြည့်နိုင်စေတယ်။ JavaScript ကို.

Front-end အပလီကေးရှင်းများတွင် ပြဿနာများကို ဖြေရှင်းရန် ကြိုးစားနေပါသည်။ JavaScript ကို သင်မကြာခဏဝင်ရောက်ခွင့်မရှိသောအသုံးပြုသူ၏ဘရောက်ဆာမှအစပြုသောကြောင့်ရှုပ်ထွေးနိုင်သည်။ သို့သော်၊ ကင်းစောင့် bug များကို အဝေးမှ စောင့်ကြည့်ရန် ဖြစ်နိုင်သည်။

ဒါဟာဖြစ်ပါတယ် ဤဆောင်းပါးတွင် ဆွေးနွေးထားသော ဖြေရှင်းချက်များကို သင်ဒေါင်းလုဒ်လုပ်နိုင်ပါသည်။

ဘာလိုအပ်တယ်

ဤဥပမာများကိုအသုံးပြုလိုပါက၊ သင်လိုအပ်လိမ့်မည်-

Node.js: အပလီကေးရှင်း၏အစိတ်အပိုင်းမဟုတ်သော အင်္ဂါရပ်ကြွယ်ဝသော ဖွံ့ဖြိုးတိုးတက်ရေးတူးလ်။ ကျွန်ုပ်တို့သည် နောက်ဆုံးထွက် LTS ဗားရှင်း (8.12.0) ကို ဒေါင်းလုဒ်လုပ်ထားပါသည်။
ကင်းစောင့်- Sentry ဝန်ဆောင်မှုတွင် အကောင့်တစ်ခု (သင် တစ်လလျှင် ချို့ယွင်းချက် 10 အထိ အခမဲ့ မှတ်တမ်းတင်နိုင်သည်) သို့မဟုတ် ထည့်သွင်းထားသော ဒေသဆိုင်ရာ Sentry - https://github.com/getsentry/onpremise

သင်၏ဆာဗာတွင်ထည့်သွင်းခြင်း။

Sentry On-Premise ကို သင့်ဆာဗာတွင် ထည့်သွင်းရန် နည်းလမ်း ၂ သွယ်ဖြင့် သွားနိုင်သည်။

rpm ကိုတည်ဆောက်ပြီး၎င်းတို့ကိုထည့်သွင်းပါ - https://habr.com/ru/post/500632/

တရားဝင်ထည့်သွင်းမှုကို အသုံးပြုပါ-

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

စံချိန်မီအသုံးပြုမှု

စတင်ရန် ဝန်ဆောင်မှုဝဘ်ဆိုဒ်မှ အသစ်တစ်ခုကို ထည့်ပါ။ ကင်းစောင့်- လျှောက်လွှာအတွက်စီမံကိန်း။ လိုချင်သောဘာသာစကားကို ရွေးချယ်ပြီးနောက်၊ သက်ဆိုင်သောစာရွက်စာတမ်းများကို သင်ရရှိမည်ဖြစ်သည်။ ငါတို့ကိစ္စမှာ ငါတို့ရွေးတယ်။ JavaScript ကို.

ပထမဥပမာက စံပါ။ JavaScript ကို. ဤနေရာတွင် ခလုတ်နှစ်ခုရှိသည်။ "ဟယ်လို" (မင်္ဂလာပါ) နှင့် "အမှား" (အမှား)။

ခလုတ်ကိုနှိပ်ပြီးနောက် "ဟယ်လို"မျက်နှာပြင်သည် ပြန်လည်စတင်လာပြီး ပိတ်ဆို့သွားမည်ဖြစ်သည်။ ကြိုးစား bug ကိုရှာဖွေပြီးဖမ်းပါလိမ့်မယ်။ ချွတ်ယွင်းချက်ကို "ဖမ်းမိ" ပြီးနောက်၊ အမှားအယွင်းအစီရင်ခံစာကို ဝန်ဆောင်မှုသို့ ကိုယ်တိုင်ပေးပို့သည်။ ကင်းစောင့်.

“Error” ခလုတ်သည် သင့်အား bug တစ်ခုကို အလွယ်တကူ ရှာဖွေနိုင်စေပါသည်။

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 ကို CDN တစ်ခုမှ တပ်ဆင်ပြီး global variable အဖြစ် ဖော်ထုတ်ထားသည်။
အစောပိုင်းက ကျွန်ုပ်တို့သည် ကျွန်ုပ်တို့၏ JavaScript တွင် Sentry ကို စတင်ခဲ့သည်။

ဤဥပမာကို စမ်းသပ်ရန်၊ ကျွန်ုပ်တို့သည် တည်ငြိမ်သော ဝဘ်ဆာဗာ ပလပ်ဖောင်းကို အသုံးပြုနိုင်သည်။ Node.js: http server. ဖိုင်သိမ်းထားသည့် ဖိုဒါသို့သွားပါ။ index.htmlနှင့် ဘရောက်ဆာတွင် လိပ်စာကိုဖွင့်ရန် အောက်ပါစာကြောင်းကို (option with disables caching) ရိုက်ထည့်ပါ။ http://localhost:8080.

မည်ကဲ့သို့ ပိုးကောင်များ ဖမ်းမိသည်ကို ဖော်ပြသည်။

ပထမဆုံး ခလုတ်ကိုနှိပ်ပါ။ "ဟယ်လို".

ကျွန်ုပ်တို့သည် ချွတ်ယွင်းချက်တစ်ခုကို ဖမ်းမိသောကြောင့် ၎င်းသည် ခေါ်ဆိုမှုအစုအဝေးတွင် ပေါ်လာမည်မဟုတ်သောကြောင့် ကွန်ဆိုးလ်တွင် စောင့်ကြည့်မနေပါ။ ဒါပေမယ့် ကျနော်တို့က စပြီး ပေးလိုက်တာ။ ကင်းစောင့် ချို့ယွင်းချက်တစ်ခုကို ကိုယ်တိုင်သတင်းပို့ပါ၊ သင့်အကောင့်တွင် ၎င်းနှင့်ပတ်သက်သည့် မက်ဆေ့ချ်တစ်ခုကို ကျွန်ုပ်တို့တွေ့ရပါမည်။

မှတ်ချက်တွေ:

ဘယ်စာကြောင်း (24) မှာ bug ပါတယ်ဆိုတာကို ခြေရာခံနိုင်ပါတယ်။
ထို့အပြင်၊ breadcrumb trail သည် error ဖြစ်စေသော browser လုပ်ဆောင်ချက်များကို ပြသသည်။

ဖမ်းမမိသော ပိုးကောင်များကို မည်သို့ပြသမည်နည်း။

ခလုတ်ကိုနှိပ်ပါ။ "အမှား"

ချို့ယွင်းချက်သည် ခေါ်ဆိုမှုအစုအဝေးကို ပူဖောင်းပေါက်စေပြီး ကွန်ဆိုးလ်ပေါ်တွင် အမှားအယွင်း မက်ဆေ့ချ်တစ်ခု ပြသသည်။ ၎င်းပြီးနောက်၊ Sentry သည် နောက်ထပ်လုပ်ဆောင်မှုများမရှိဘဲ bug ကို အလိုအလျောက် စောင့်ကြည့်သည်။

မှတ်ချက်တွေ:

ဘယ်စာကြောင်း (30) မှာ bug ပျောက်သွားတာကို တွေ့နိုင်တယ်။
ပေါင်မုန့်အတက်အဆင်းလမ်း မရှိဘူး (ဘာလို့လဲ နားမလည်ဘူး)

ပရောဂျက်လုံခြုံရေးကို ဘယ်လိုအာမခံမလဲ။

ကျွန်ုပ်တို့၏ပရောဂျက်အတွက် အမှားအယွင်းများကို သတင်းပို့နိုင်သည့် စာမျက်နှာများကို ထိန်းချုပ်နည်းကို သင်သတိပြုမိပေမည်။ ကင်းစောင့်; အကူအညီဖြင့် dsn မှတ်တမ်းများ ပြဿနာမှာ သင့်စာမျက်နှာ၏ အရင်းအမြစ်ကုဒ်ကို ကြည့်ရှုသူတိုင်းက ထည့်သွင်းမှုကို မြင်နိုင်သောကြောင့် ဖြစ်သည်။

ယင်းကိုရှောင်ရှားရန်၊ ကျွန်ုပ်တို့၏ပရောဂျက်သို့ အမှားအယွင်းအစီရင်ခံချက်များကို တင်သွင်းနိုင်သည့် ဒိုမိန်းအရေအတွက်ကို ကန့်သတ်ရန် လိုအပ်သည်။ ဤဥပမာတွင်ကျွန်ုပ်တို့အသုံးပြုခဲ့သည်။ localhost (ပြည်တွင်းအိမ်ရှင်)။ ဤရွေးချယ်မှုကို ဆက်တင်များတက်ဘ်တွင် စီစဉ်သတ်မှတ်ထားသည်။ ကင်းစောင့်- ပရောဂျက်၊ Sentry Project Setting.

ထုတ်ဝေသည်။

ဘယ်လိုသုံးရမလဲ စဉ်းစားရင် ကင်းစောင့် ကျွန်ုပ်တို့၏ အက်ပ်လီကေးရှင်း၏ မတူညီသော ဗားရှင်းများတွင်၊ ထို့နောက် ဗားရှင်းနံပါတ်ဖြင့် အမှားများကို အမှတ်အသားပြုမည့် ယန္တရားမျိုး လိုအပ်ပါသည်။

နောက်ဆုံးတွင်၊ ကျွန်ုပ်တို့ပြင်ဆင်ထားသော bug သည် နောက်တစ်ကြိမ်ထပ်မပေါ်လာချင်တော့ဘဲ ကျွန်ုပ်တို့ပြင်ဆင်ထားသည့်အရာသည် အလုပ်မဖြစ်ဟု ကျွန်ုပ်တို့ထင်ပါသည်။ အသုံးပြုသူသည် အပလီကေးရှင်း၏ ကက်ရှ်ဗားရှင်းအဟောင်းကို ဖွင့်ခဲ့ခြင်းလည်း ဖြစ်နိုင်သည်။

ပြဿနာကိုဖြေရှင်းရန်၊ သင်သည် identifier ကိုထည့်သွင်းရန်လိုအပ်သည်။ လွှတ်ပေး စတင်ချိန်တွင် (ဗားရှင်းများ) ကင်းစောင့်.

vanilla/index.html

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

၎င်းပြီးနောက်၊ အမှားအယွင်းအားလုံးကို အသစ်အဖြစ် အမှတ်အသားပြုပါမည်။ ထုတ်ဝေမှု (0.1.0)ဆိုလိုသည်မှာ၊ ၎င်းတို့သည် ကုဒ်၏ မှန်ကန်သောဗားရှင်းနှင့် ချိတ်ဆက်မည်ဖြစ်သည်။

မှတ်ချက်တွေ:

ထုတ်ဝေမှုများကို အသုံးပြုရန် ရိုးရှင်းသောနည်းလမ်းကို ကျွန်ုပ်တို့ ရှာဖွေတွေ့ရှိထားပါသည်။
Sentry က သင့်ကို ပိုသုံးနိုင်စေတယ်။ ရှုပ်ထွေးသည်။ သူတို့၏ ၏အသုံးပြုမှုနှင့် နီးကပ်စွာဆက်စပ်နေပါသည်။ GitHub. ဤလုပ်ဆောင်ချက်သည် အချို့သောလုပ်ဆောင်ချက်များကို မလုပ်ဆောင်မီ ချွတ်ယွင်းချက်များကို ခြေရာခံရန် ဖြစ်နိုင်ချေရှိသည်။

PS ဒုတိယအပိုင်းက ပိုရှည်တာမို့ သီးခြားပို့စ်မှာ ရေးပါမယ်။

PS Telegram chat Sentry https://t.me/sentry_ru

PS ဒီပို့စ်ကို ဘာသာပြန်ထားတာ ညွှန်ဖို့ မေ့သွားတယ်။ https://codeburst.io/sentry-error-reporting-by-example-part-1-999b2df11556

source: www.habr.com

JavaScript ဖြင့်ရေးသားထားသော Front-End အပလီကေးရှင်းများတွင် Sentry ဖြင့် အမှားများကို စောင့်ကြည့်ခြင်း- အပိုင်း 1

မှတ်ချက် Add

JavaScript ဖြင့်ရေးသားထားသော Front-End အပလီကေးရှင်းများတွင် Sentry ဖြင့် အမှားများကို စောင့်ကြည့်ခြင်း- အပိုင်း 1

မှတ်ချက် Add ပြန်ကြားချက်ကိုပယ်ဖျက်

မှတ်ချက် Add