🥇 Monitoring errors using Sentry in front-end applications ທີ່ຂຽນດ້ວຍ JavaScript: ພາກທີ 1

ການບໍລິການ ທະຫານເຮືອ ອະນຸຍາດໃຫ້ທ່ານຫ່າງໄກສອກຫຼີກຕິດຕາມ bug ໃນຄໍາຮ້ອງສະຫມັກທາງຫນ້າທີ່ຂຽນໄວ້ໃນ JavaScript.

ພະຍາຍາມແກ້ໄຂບັນຫາໃນແອັບພລິເຄຊັນທາງຫນ້າ JavaScript ອາດຈະເປັນເລື່ອງຍາກເພາະວ່າພວກມັນມາຈາກຕົວທ່ອງເວັບຂອງຜູ້ໃຊ້, ທີ່ທ່ານມັກຈະບໍ່ມີການເຂົ້າເຖິງ. ແນວໃດກໍ່ຕາມ, ທະຫານເຮືອ ເຮັດໃຫ້ມັນເປັນໄປໄດ້ໃນການຕິດຕາມກວດກາຫ່າງໄກສອກຫຼີກບັກ.

ມັນເປັນ ທ່ານສາມາດດາວໂຫລດວິທີແກ້ໄຂທີ່ໄດ້ສົນທະນາໃນບົດຄວາມນີ້.

ສິ່ງທີ່ ຈຳ ເປັນ

ຖ້າທ່ານຕ້ອງການໃຊ້ຕົວຢ່າງເຫຼົ່ານີ້, ທ່ານຈະຕ້ອງ:

Nodejs: ເຄື່ອງມືພັດທະນາຄຸນສົມບັດທີ່ອຸດົມສົມບູນທີ່ບໍ່ແມ່ນສ່ວນຫນຶ່ງຂອງແອັບພລິເຄຊັນ. ພວກເຮົາໄດ້ດາວໂຫຼດ 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. ມີສອງປຸ່ມຢູ່ທີ່ນີ້: "ສະບາຍດີ" (ສະບາຍດີ) ແລະ "ຜິດພາດ" (ຜິດພາດ).

ຫຼັງຈາກທີ່ທ່ານຄລິກໃສ່ປຸ່ມ "ສະບາຍດີ", ຫນ້າຈໍຈະ reboot ແລະຕັນ ພະຍາຍາມ ຈະກວດພົບແລະຈັບແມງໄມ້. ຫຼັງຈາກແມງໄມ້ຖືກ "ຈັບໄດ້", ບົດລາຍງານຄວາມຜິດພາດຈະຖືກສົ່ງໄປຫາບໍລິການດ້ວຍຕົນເອງ ທະຫານເຮືອ.

ປຸ່ມ "ຄວາມຜິດພາດ" ຊ່ວຍໃຫ້ທ່ານສາມາດກວດພົບຂໍ້ບົກພ່ອງໄດ້ຢ່າງງ່າຍດາຍ.

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 ຂອງພວກເຮົາ

ເພື່ອທົດສອບຕົວຢ່າງນີ້, ພວກເຮົາສາມາດໃຊ້ແພລະຕະຟອມເຊີຟເວີເວັບແບບຄົງທີ່ Nodejs: http server. ໄປທີ່ໂຟນເດີທີ່ໄຟລ໌ຖືກເກັບໄວ້ index.html, ແລະໃສ່ (ທາງເລືອກທີ່ມີການປິດການເກັບຂໍ້ມູນ) ແຖວຕໍ່ໄປນີ້ເພື່ອເປີດທີ່ຢູ່ໃນຕົວທ່ອງເວັບ http://localhost:8080.

ວິທີການຈັບແມງໄມ້ຖືກສະແດງ

ທໍາອິດໃຫ້ຄລິກໃສ່ປຸ່ມ "ສະບາຍດີ".

ພວກເຮົາໄດ້ຕິດຕັ້ງຂໍ້ຜິດພາດໄດ້, ສະນັ້ນມັນຈະບໍ່ຂຶ້ນເຖິງ stack ການໂທ, ແລະດັ່ງນັ້ນຈຶ່ງບໍ່ໄດ້ຕິດຕາມກວດກາໃນ console ໄດ້. ຢ່າງໃດກໍຕາມ, ນັບຕັ້ງແຕ່ພວກເຮົາສົ່ງໄປ ທະຫານເຮືອ ລາຍງານຂໍ້ຜິດພາດດ້ວຍຕົນເອງ, ພວກເຮົາຈະເຫັນຂໍ້ຄວາມກ່ຽວກັບມັນຢູ່ໃນບັນຊີຂອງທ່ານ.

ຫມາຍເຫດ:

ພວກເຮົາສາມາດຕິດຕາມທີ່ເສັ້ນ (24) ມີ bug ໄດ້
ນອກຈາກນັ້ນ, ເສັ້ນທາງ breadcrumb ສະແດງການກະທໍາຂອງຕົວທ່ອງເວັບທີ່ນໍາໄປສູ່ຄວາມຜິດພາດ.

ແມງໄມ້ທີ່ບໍ່ສາມາດຈັບໄດ້ຈະສະແດງແນວໃດ

ການຄລິກໃສ່ປຸ່ມ "ຜິດພາດ".

bug bugs ເຖິງ stack ການໂທຫາແລະດັ່ງນັ້ນຈຶ່ງມີຂໍ້ຄວາມສະແດງຄວາມຜິດພາດໃນ console ໄດ້. ຫຼັງຈາກນີ້, Sentry ຈະກວດສອບຂໍ້ຜິດພາດໂດຍອັດຕະໂນມັດ, ໂດຍບໍ່ມີການປະຕິບັດເພີ່ມເຕີມໃດໆ.

ຫມາຍເຫດ:

ພວກເຮົາສາມາດເບິ່ງວ່າໃນເສັ້ນ (30) bug ໄດ້ສູນເສຍໄປ
ບໍ່ມີເສັ້ນທາງ breadcrumb (ຂ້ອຍບໍ່ເຂົ້າໃຈວ່າເປັນຫຍັງ)

ວິທີການຮັບປະກັນຄວາມປອດໄພຂອງໂຄງການ

ທ່ານອາດຈະໄດ້ສັງເກດເຫັນວິທີທີ່ພວກເຮົາຄວບຄຸມວ່າຫນ້າເວັບໃດສາມາດລາຍງານຂໍ້ຜິດພາດກັບໂຄງການຂອງພວກເຮົາ ທະຫານເຮືອ; ດ້ວຍຄວາມຊ່ວຍເຫຼືອ dsn ບັນທຶກ. ບັນຫາແມ່ນວ່າການປ້ອນຂໍ້ມູນສາມາດເຫັນໄດ້ໂດຍທຸກຄົນທີ່ເບິ່ງລະຫັດແຫຼ່ງຂອງຫນ້າຂອງທ່ານ.

ເພື່ອຫຼີກເວັ້ນການນີ້, ພວກເຮົາຈໍາເປັນຕ້ອງຈໍາກັດຈໍານວນໂດເມນທີ່ສາມາດສົ່ງລາຍງານຄວາມຜິດພາດໃຫ້ກັບໂຄງການຂອງພວກເຮົາ. ໃນຕົວຢ່າງນີ້ພວກເຮົາໄດ້ໃຊ້ localhost (ເຈົ້າພາບທ້ອງຖິ່ນ). ຕົວເລືອກນີ້ຖືກຕັ້ງຄ່າໃນແຖບການຕັ້ງຄ່າ ທະຫານເຮືອ- ໂຄງການ, ການຕັ້ງຄ່າໂຄງການ Sentry.

ການປ່ອຍ

ຖ້າທ່ານຄິດກ່ຽວກັບວິທີການນໍາໃຊ້ ທະຫານເຮືອ ໃນການປ່ຽນແປງທີ່ແຕກຕ່າງກັນຂອງຄໍາຮ້ອງສະຫມັກຂອງພວກເຮົາ, ຫຼັງຈາກນັ້ນພວກເຮົາຕ້ອງການບາງປະເພດຂອງກົນໄກທີ່ຈະຫມາຍຄວາມຜິດພາດທີ່ມີຈໍານວນສະບັບ.

ຫຼັງຈາກທີ່ທັງຫມົດ, ພວກເຮົາບໍ່ຕ້ອງການ bug ທີ່ພວກເຮົາແກ້ໄຂປາກົດຂຶ້ນອີກເທື່ອຫນຶ່ງ, ແລະພວກເຮົາຄິດວ່າສິ່ງທີ່ພວກເຮົາແກ້ໄຂບໍ່ໄດ້ຜົນ. ມັນອາດຈະເປັນທີ່ຜູ້ໃຊ້ເປີດແອັບພລິເຄຊັນທີ່ເກົ່າກວ່າ, ຢູ່ໃນຖານຄວາມຈໍາ.

ເພື່ອແກ້ໄຂບັນຫາ, ທ່ານຈໍາເປັນຕ້ອງໃສ່ຕົວລະບຸ ປ່ອຍຕົວ (ຮຸ່ນ) ໃນຕອນເລີ່ມຕົ້ນ ທະຫານເຮືອ.

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

ເພີ່ມຄວາມຄິດເຫັນ Отменитьответ