JavaScript дээр бичигдсэн Front-End програмууд дахь Sentry-ийн алдааг хянах: 1-р хэсэг

үйлчилгээ Sentry Бичсэн урд талын програмуудын алдааг алсаас хянах боломжийг танд олгоно JavaScript.

JavaScript дээр бичигдсэн Front-End програмууд дахь Sentry-ийн алдааг хянах: 1-р хэсэг

Урд талын програмуудын асуудлыг засах гэж оролдож байна JavaScript Учир нь тэдгээр нь хэрэглэгчийн вэб хөтчөөс үүсэлтэй тул танд хандах боломжгүй байдаг. Гэсэн хэдий ч, Sentry алдааг алсаас хянах боломжтой болгодог.

энд Та энэ нийтлэлд хэлэлцсэн шийдлүүдийг татаж авах боломжтой.

Шаардлагатай зүйл

Хэрэв та эдгээр жишээг ашиглахыг хүсвэл танд дараахь зүйл хэрэгтэй болно.

  • Node.js: Програмын нэг хэсэг биш онцлог шинж чанартай хөгжүүлэлтийн хэрэгсэл. Бид хамгийн сүүлийн үеийн LTS хувилбарыг (8.12.0) татаж авсан.
  • Sentry: Хамгаалалтын үйлчилгээний данс (та сард 10 мянга хүртэлх алдааг үнэгүй бүртгэх боломжтой) эсвэл суулгасан орон нутгийн Sentry - https://github.com/getsentry/onpremise

Таны сервер дээр суурилуулалт

Та сервер дээрээ Sentry On-Premise-г суулгахын тулд 2 аргаар явж болно

  1. Эрг / мин үүсгэж, суулгана уу - https://habr.com/ru/post/500632/

  2. Албан ёсны суулгагчийг ашиглана уу:

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

Стандарт хэрэглээ

Эхлэхийн тулд үйлчилгээний вэбсайтаас шинийг нэмнэ үү Sentry- өргөдөл гаргах төсөл. Хүссэн хэлээ сонгосны дараа та холбогдох баримт бичгийг хүлээн авах болно. Манай тохиолдолд бид сонгосон JavaScript.

Эхний жишээ бол стандарт юм JavaScript. Энд хоёр товчлуур байна: "Сайн уу" (Сайн уу) ба "Алдаа" (Алдаа).

Та товчлуур дээр дарсны дараа "Сайн уу", дэлгэц дахин ачаалж блоклоно оролдох алдааг илрүүлж, барих болно. Алдааг "барьсны" дараа алдааны тайланг гар аргаар үйлчилгээ рүү илгээдэг Sentry.

"Алдаа" товчлуур нь алдааг амархан илрүүлэх боломжийг танд олгоно.

ваниль/индекс.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-ээс суулгаж, глобал хувьсагч болгон гаргадаг
  • Хэсэг хугацааны өмнө бид JavaScript дээр Sentry-г эхлүүлсэн

Энэ жишээг шалгахын тулд бид статик вэб сервер платформыг ашиглаж болно Node.js: http сервер. Файл хадгалагдсан хавтас руу очно уу index.html, мөн хөтөч дээр хаягийг нээхийн тулд дараах мөрийг (кэшийг идэвхгүй болгох сонголт) оруулна уу http://localhost:8080.

Баригдсан алдаанууд хэрхэн харагдана

Эхлээд товчлуур дээр дарна уу "Сайн уу".

JavaScript дээр бичигдсэн Front-End програмууд дахь Sentry-ийн алдааг хянах: 1-р хэсэг

Бид алдаа илрүүлсэн тул дуудлагын стек гарч ирэхгүй тул консол дээр хянагдахгүй. Гэсэн хэдий ч, бид илгээхээс хойш Sentry алдааг гараар мэдээлвэл бид таны бүртгэлд энэ тухай мессежийг харах болно.

JavaScript дээр бичигдсэн Front-End програмууд дахь Sentry-ийн алдааг хянах: 1-р хэсэг

Тэмдэглэл:

  • Бид аль мөрөнд (24) алдаа байгааг олж мэдэх боломжтой
  • Нэмж дурдахад, Breadcrumb Trail нь алдаа гаргахад хүргэсэн хөтөчийн үйлдлүүдийг харуулдаг.

Баригдаагүй алдаанууд хэрхэн харагдаж байна

Товчлуур дээр дарна уу "Алдаа".

JavaScript дээр бичигдсэн Front-End програмууд дахь Sentry-ийн алдааг хянах: 1-р хэсэг

Алдаа нь дуудлагын стекийг бөмбөлөг болгож, консол дээр алдааны мэдэгдэл гарч ирнэ. Үүний дараа Sentry нь нэмэлт үйлдэл хийхгүйгээр алдааг автоматаар хянадаг.

JavaScript дээр бичигдсэн Front-End програмууд дахь Sentry-ийн алдааг хянах: 1-р хэсэг

Тэмдэглэл:

  • Бид аль мөрөнд (30) алдаа алдагдсаныг харж болно
  • Талхны мөр байхгүй (яагаад гэдгийг би сайн ойлгохгүй байна)

Төслийн аюулгүй байдлыг хэрхэн хангах вэ

Манай төслийн алдааг мэдээлэх ямар хуудсууд биднийг хянадагийг та анзаарсан байх Sentry; тусламжтайгаар dsn бичлэгүүд. Асуудал нь оролтыг таны хуудасны эх кодыг үзсэн хүн бүр харж болно.

Үүнээс зайлсхийхийн тулд манай төсөлд алдааны тайланг илгээх боломжтой домайнуудын тоог хязгаарлах хэрэгтэй. Энэ жишээнд бид ашигласан тестлээрэй (орон нутгийн хост). Энэ сонголтыг тохиргооны таб дээр тохируулсан болно Sentry-төсөл, Sentry төслийн тохиргоо.

JavaScript дээр бичигдсэн Front-End програмууд дахь Sentry-ийн алдааг хянах: 1-р хэсэг

Хувилбарууд

Хэрэв та хэрхэн ашиглах талаар бодож байгаа бол Sentry Манай програмын янз бүрийн хувилбаруудад алдааг хувилбарын дугаараар тэмдэглэх ямар нэгэн механизм хэрэгтэй болно.

Эцсийн эцэст, бид зассан алдаа дахин гарч ирэхийг хүсэхгүй байгаа бөгөөд бидний зассан зүйл ажиллахгүй байна гэж бодож байна. Энэ нь хэрэглэгч програмын хуучин, кэштэй хувилбарыг эхлүүлсэн байж магадгүй юм.

Асуудлыг шийдэхийн тулд танигчийг оруулах шаардлагатай суллах (хувилбарууд) эхлүүлэх үед Sentry.

ваниль/индекс.html

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

Үүний дараа бүх шинэ алдаанууд гэж тэмдэглэгдэх болно хувилбар (0.1.0), өөрөөр хэлбэл, тэдгээр нь кодын зөв хувилбартай холбоотой байх болно.

JavaScript дээр бичигдсэн Front-End програмууд дахь Sentry-ийн алдааг хянах: 1-р хэсэг

Тэмдэглэл:

  • Бид хувилбаруудыг ашиглах энгийн аргыг олж мэдсэн
  • Sentry нь илүү ихийг ашиглах боломжийг олгодог цогцолбор Тэдний ашиглах, энэ нь нягт холбоотой GitHub. Энэ функц нь зарим үйлдлийг гүйцэтгэхээс өмнө алдааг хянах боломжийг олгодог.

Жич XNUMX-р хэсэг нь илүү урт тул тусдаа нийтлэлд оруулах болно.

PS Telegram чат Sentry https://t.me/sentry_ru

Жич Энэ бол нийтлэлийн орчуулга гэдгийг хэлэхээ мартсан байна https://codeburst.io/sentry-error-reporting-by-example-part-1-999b2df11556

Эх сурвалж: www.habr.com

сэтгэгдэл нэмэх