🥇შეცდომების მონიტორინგი Sentry-ის გამოყენებით JavaScript-ში დაწერილ წინა აპლიკაციებში: ნაწილი 1

სამსახურის Sentry საშუალებას გაძლევთ დისტანციურად აკონტროლოთ შეცდომები წინა აპლიკაციებში დაწერილი JavaScript.

წინა აპლიკაციების პრობლემების გადაჭრის მცდელობა ჩართულია JavaScript შეიძლება იყოს სახიფათო, რადგან ისინი წარმოიქმნება მომხმარებლის ბრაუზერში, რომელზეც ხშირად არ გაქვთ წვდომა. თუმცა, Sentry შესაძლებელს ხდის შეცდომების დისტანციურად მონიტორინგს.

აქ შეგიძლიათ ჩამოტვირთოთ ამ სტატიაში განხილული გადაწყვეტილებები.

რა არის საჭირო

თუ გსურთ გამოიყენოთ ეს მაგალითები, დაგჭირდებათ:

Node.js: ფუნქციებით მდიდარი განვითარების ინსტრუმენტი, რომელიც არ არის აპლიკაციის ნაწილი. ჩვენ ჩამოვტვირთეთ უახლესი LTS ვერსია (8.12.0)
Sentry: ან ანგარიში 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

სტანდარტული გამოყენება

დასაწყებად, დაამატეთ ახალი სერვისის ვებსაიტიდან Sentry-პროექტი განაცხადისთვის. სასურველი ენის შერჩევის შემდეგ მიიღებთ შესაბამის დოკუმენტაციას. ჩვენს შემთხვევაში ჩვენ ავირჩიეთ JavaScript.

პირველი მაგალითი სტანდარტულია JavaScript. აქ არის ორი ღილაკი: "გამარჯობა" (გამარჯობა) და "შეცდომა" (შეცდომა).

მას შემდეგ რაც დააჭირეთ ღილაკს "გამარჯობა", ეკრანი გადაიტვირთება და დაიბლოკება ცდილობენ აღმოაჩენს და დაიჭერს შეცდომას. შეცდომის „დაჭერის“ შემდეგ, შეცდომის ანგარიში ხელით ეგზავნება სერვისს Sentry.

ღილაკი "შეცდომა" საშუალებას გაძლევთ მარტივად აღმოაჩინოთ ხარვეზი.

ვანილი/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.

როგორ არის ნაჩვენები დაჭერილი შეცდომები

ჯერ დააჭირეთ ღილაკს "გამარჯობა".

ჩვენ დავაფიქსირეთ შეცდომა, ასე რომ, ის არ გამოჩნდება ზარის დასტაზე და, შესაბამისად, არ არის მონიტორინგი კონსოლში. თუმცა, ვინაიდან ჩვენ ვაგზავნით Sentry შეატყობინეთ შეცდომის შესახებ ხელით, ჩვენ ვნახავთ შეტყობინებას ამის შესახებ თქვენს ანგარიშში.

შენიშვნები:

ჩვენ შეგვიძლია მივაკვლიოთ რომელი ხაზი (24) შეიცავს შეცდომას
გარდა ამისა, breadcrumb ბილიკი აჩვენებს ბრაუზერის მოქმედებებს, რამაც გამოიწვია შეცდომა.

როგორ არის ნაჩვენები დაუჭერელი შეცდომები

დააჭირეთ ღილაკს "შეცდომა".

ხარვეზი ბუშტუკებს აჩენს ზარის დასტას და, შესაბამისად, შეცდომის შეტყობინება გამოჩნდება კონსოლზე. ამის შემდეგ Sentry ავტომატურად აკონტროლებს შეცდომას, ყოველგვარი დამატებითი ქმედებების გარეშე.

შენიშვნები:

ჩვენ ვხედავთ, რომელ სტრიქონში (30) იკარგება შეცდომა
არ არსებობს პურის კვალი (მე არ მესმის რატომ)

როგორ უზრუნველვყოთ პროექტის უსაფრთხოება

თქვენ შეიძლება შეამჩნიეთ, თუ როგორ ვაკონტროლებთ, რომელ გვერდებს შეუძლიათ შეატყობინონ შეცდომები ჩვენს პროექტს Sentry; დახმარებით dsn ჩანაწერები. პრობლემა ის არის, რომ შეყვანის ნახვა შეუძლია ყველას, ვინც ნახულობს თქვენი გვერდის წყაროს კოდს.

ამის თავიდან ასაცილებლად, ჩვენ უნდა შევზღუდოთ დომენების რაოდენობა, რომლებსაც შეუძლიათ შეცდომის შესახებ ანგარიშების გაგზავნა ჩვენს პროექტში. ამ მაგალითში ჩვენ გამოვიყენეთ localhost (ადგილობრივი მასპინძელი). ეს პარამეტრი კონფიგურირებულია პარამეტრების ჩანართში Sentry- პროექტი, Sentry პროექტის პარამეტრი.

რელიზები

თუ ფიქრობთ როგორ გამოიყენოთ Sentry ჩვენი აპლიკაციის სხვადასხვა ვარიაციებში, მაშინ ჩვენ გვჭირდება რაიმე სახის მექანიზმი, რომელიც მონიშნავს შეცდომებს ვერსიის ნომრით.

ბოლოს და ბოლოს, ჩვენ არ გვინდა, რომ ჩვენს მიერ გამოსწორებული ხარვეზი კვლავ გამოჩნდეს და ვფიქრობთ, რომ ის, რაც გამოვასწორეთ, არ მუშაობდა. შესაძლოა, მომხმარებელმა გაუშვა აპლიკაციის ძველი, ქეშირებული ვერსია.

პრობლემის გადასაჭრელად, თქვენ უნდა შეიყვანოთ იდენტიფიკატორი გაათავისუფლა (ვერსიები) გაშვებისას Sentry.

ვანილი/index.html

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

ამის შემდეგ, ყველა ახალი შეცდომა მოინიშნება როგორც გამოშვება (0.1.0), ანუ ისინი მიბმული იქნებიან კოდის სწორ ვერსიასთან.

შენიშვნები:

ჩვენ გამოვიკვლიეთ რელიზების გამოყენების მარტივი გზა
Sentry გაძლევთ საშუალებას გამოიყენოთ მეტი კომპლექსი მათი გამოყენების, რომელიც მჭიდროდ არის დაკავშირებული GitHub. ეს ფუნქცია შესაძლებელს ხდის შეცდომების თვალყურის დევნებას გარკვეული ოპერაციების შესრულებამდე.

PS მეორე ნაწილი უფრო გრძელია, ამიტომ ცალკე პოსტში იქნება.

PS Telegram ჩატი Sentry https://t.me/sentry_ru

პ.ს დამავიწყდა მეთქვა რომ ეს პოსტის თარგმანია https://codeburst.io/sentry-error-reporting-by-example-part-1-999b2df11556

წყარო: www.habr.com

Sentry შეცდომების მონიტორინგი JavaScript-ში დაწერილი წინა აპლიკაციებში: ნაწილი 1

ახალი კომენტარის დამატება

Sentry შეცდომების მონიტორინგი JavaScript-ში დაწერილი წინა აპლიკაციებში: ნაწილი 1

ახალი კომენტარის დამატება პასუხის გასაუქმებლად

ახალი კომენტარის დამატება