🥇Monitoring errors using Sentry in front-end applications write in JavaScript: Part 1

RЎRμSЂRІRёSЃ ឆ្មាំ។ អនុញ្ញាតឱ្យអ្នកត្រួតពិនិត្យពីចម្ងាយនូវកំហុសនៅក្នុងកម្មវិធីផ្នែកខាងមុខដែលបានសរសេរនៅក្នុង JavaScript.

កំពុងព្យាយាមដោះស្រាយបញ្ហានៅក្នុងកម្មវិធីខាងមុខដែលបើក JavaScript អាចជារឿងពិបាក ពីព្រោះពួកវាមានប្រភពចេញពីកម្មវិធីរុករកតាមអ៊ីនធឺណិតរបស់អ្នកប្រើ ដែលជារឿយៗអ្នកមិនមានសិទ្ធិចូលប្រើ។ ទោះយ៉ាងណាក៏ដោយ ឆ្មាំ។ ធ្វើឱ្យវាអាចត្រួតពិនិត្យកំហុសពីចម្ងាយ។

វាគឺជាការ អ្នកអាចទាញយកដំណោះស្រាយដែលបានពិភាក្សានៅក្នុងអត្ថបទនេះ។

អ្វីដែលចាំបាច់

ប្រសិនបើអ្នកចង់ប្រើឧទាហរណ៍ទាំងនេះ អ្នកនឹងត្រូវការ៖

Node.js៖ ឧបករណ៍អភិវឌ្ឍន៍ដែលសំបូរទៅដោយលក្ខណៈពិសេសដែលមិនមែនជាផ្នែកនៃកម្មវិធី។ យើងបានទាញយកកំណែ LTS ចុងក្រោយបំផុត (8.12.0)
ឆ្មាំ។៖ ទាំងគណនីនៅក្នុងសេវា Sentry (អ្នកអាចកត់ត្រាកំហុសរហូតដល់ 10 ពាន់ក្នុងមួយខែដោយឥតគិតថ្លៃ) ឬ Sentry ក្នុងតំបន់ដែលបានដំឡើង - https://github.com/getsentry/onpremise

ការដំឡើងនៅលើម៉ាស៊ីនមេរបស់អ្នក។

ដើម្បីដំឡើង Sentry On-Premise នៅលើម៉ាស៊ីនមេរបស់អ្នក អ្នកអាចទៅតាម 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 ត្រូវបានដំឡើងពី CDN ហើយលាតត្រដាងជាអថេរសកល
មុននេះបន្តិច យើងបានបើកដំណើរការ Sentry នៅក្នុង JavaScript របស់យើង។

ដើម្បីសាកល្បងឧទាហរណ៍នេះ យើងអាចប្រើវេទិកាម៉ាស៊ីនមេបណ្តាញឋិតិវន្ត Node.js: ម៉ាស៊ីនមេ http. ចូលទៅកាន់ថតដែលឯកសារត្រូវបានរក្សាទុក index.htmlហើយបញ្ចូល (ជម្រើសបិទដំណើរការឃ្លាំងសម្ងាត់) បន្ទាត់ខាងក្រោមដើម្បីបើកអាសយដ្ឋាននៅក្នុងកម្មវិធីរុករក http://localhost:8080.

របៀបចាប់កំហុសត្រូវបានបង្ហាញ

ដំបូងចុចប៊ូតុង "សួស្តី".

យើងចាប់បានកំហុស ដូច្នេះវានឹងមិនលេចឡើងជង់ការហៅទេ ដូច្នេះហើយមិនត្រូវបានត្រួតពិនិត្យនៅក្នុងកុងសូលទេ។ ទោះយ៉ាងណាក៏ដោយចាប់តាំងពីយើងផ្ញើទៅ ឆ្មាំ។ រាយការណ៍អំពីបញ្ហាដោយដៃ យើងនឹងឃើញសារអំពីវានៅក្នុងគណនីរបស់អ្នក។

ចំណាំ:

យើងអាចតាមដានមួយបន្ទាត់ (24) ដែលមានកំហុស
លើសពីនេះទៀត ផ្លូវលំ breadcrumb បង្ហាញសកម្មភាពរបស់កម្មវិធីរុករកតាមអ៊ីនធឺណិតដែលនាំឱ្យមានកំហុស។

របៀបដែលកំហុសដែលមិនបានចាប់ត្រូវបានបង្ហាញ

ចុចប៊ូតុង "កំហុស" ។

កំហុសបង្កពពុះឡើងលើការហៅទូរសព្ទ ហើយដូច្នេះសារកំហុសត្រូវបានបង្ហាញនៅលើកុងសូល។ បន្ទាប់ពីនេះ Sentry ត្រួតពិនិត្យកំហុសដោយស្វ័យប្រវត្តិ ដោយគ្មានសកម្មភាពបន្ថែមណាមួយឡើយ។

ចំណាំ:

យើងអាចមើលឃើញថានៅក្នុងបន្ទាត់ (30) កំហុសត្រូវបានបាត់បង់
មិនមានផ្លូវលំហែរទេ (ខ្ញុំមិនយល់ច្បាស់ទេថាហេតុអ្វី)

របៀបធានាសុវត្ថិភាពគម្រោង

អ្នកប្រហែលជាបានកត់សម្គាល់ឃើញពីរបៀបដែលយើងគ្រប់គ្រងទំព័រណាមួយដែលអាចរាយការណ៍កំហុសទៅគម្រោងរបស់យើង។ ឆ្មាំ។; ដោយមានជំនួយ dsn កំណត់ត្រា។ បញ្ហាគឺថាការបញ្ចូលអាចត្រូវបានគេមើលឃើញដោយនរណាម្នាក់ដែលមើលកូដប្រភពនៃទំព័ររបស់អ្នក។

ដើម្បីជៀសវាងបញ្ហានេះ យើងត្រូវកំណត់ចំនួនដែនដែលអាចបញ្ជូនរបាយការណ៍កំហុសទៅគម្រោងរបស់យើង។ ក្នុងឧទាហរណ៍នេះយើងបានប្រើ localhost (ម្ចាស់ផ្ទះក្នុងស្រុក) ។ ជម្រើសនេះត្រូវបានកំណត់រចនាសម្ព័ន្ធនៅក្នុងផ្ទាំងការកំណត់ ឆ្មាំ។- គម្រោង ការកំណត់គម្រោង Sentry.

ការចេញផ្សាយ

ប្រសិនបើអ្នកគិតពីរបៀបប្រើ ឆ្មាំ។ នៅក្នុងកំណែផ្សេងៗគ្នានៃកម្មវិធីរបស់យើង បន្ទាប់មកយើងត្រូវការយន្តការមួយចំនួនដែលនឹងសម្គាល់កំហុសជាមួយនឹងលេខកំណែ។

យ៉ាងណាមិញ យើងមិនចង់ឱ្យកំហុសដែលយើងបានជួសជុលលេចឡើងម្ដងទៀតទេ ហើយយើងគិតថាអ្វីដែលយើងបានជួសជុលមិនដំណើរការ។ វាក៏អាចថាអ្នកប្រើប្រាស់បានបើកដំណើរការកំណែចាស់ដែលមានឃ្លាំងសម្ងាត់នៃកម្មវិធី។

ដើម្បីដោះស្រាយបញ្ហាអ្នកត្រូវបញ្ចូលឧបករណ៍កំណត់អត្តសញ្ញាណ ការដោះលែង (កំណែ) នៅពេលចាប់ផ្តើម ឆ្មាំ។.

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

ប្រភព: www.habr.com

ការត្រួតពិនិត្យកំហុសជាមួយ Sentry នៅក្នុងកម្មវិធី Front-End សរសេរក្នុង JavaScript៖ ផ្នែកទី 1

បន្ថែមមតិយោបល់ ответОтменить