🥇 JavaScript मध्ये लिहिलेल्या फ्रंट-एंड ऍप्लिकेशन्समध्ये सेंट्रीचा वापर करून त्रुटींचे निरीक्षण करणे: भाग 1

सेवा सेंट्री मध्ये लिहिलेल्या फ्रंट-एंड ऍप्लिकेशन्समधील बग्सचे दूरस्थपणे निरीक्षण करण्याची परवानगी देते जावास्क्रिप्ट.

फ्रंट-एंड ऍप्लिकेशन्समधील समस्यांचे निराकरण करण्याचा प्रयत्न करत आहे जावास्क्रिप्ट ते अवघड असू शकते कारण ते वापरकर्त्याच्या ब्राउझरमध्ये उद्भवतात, ज्यामध्ये तुम्हाला सहसा प्रवेश नसतो. तथापि, सेंट्री दूरस्थपणे बगचे निरीक्षण करणे शक्य करते.

तो आहे आपण या लेखात चर्चा केलेले उपाय डाउनलोड करू शकता.

काय आवश्यक आहे

आपण ही उदाहरणे वापरू इच्छित असल्यास, आपल्याला याची आवश्यकता असेल:

Node.js: एक वैशिष्ट्यपूर्ण विकास साधन जे अनुप्रयोगाचा भाग नाही. आम्ही नवीनतम LTS आवृत्ती डाउनलोड केली (8.12.0)
सेंट्री: एकतर सेन्ट्री सेवेतील खाते (तुम्ही दरमहा 10 हजार बग मोफत रेकॉर्ड करू शकता) किंवा स्थापित स्थानिक सेंटरी - https://github.com/getsentry/onpremise

आपल्या सर्व्हरवर स्थापना

तुमच्या सर्व्हरवर सेंट्री ऑन-प्रिमाइस स्थापित करण्यासाठी तुम्ही 2 मार्गांनी जाऊ शकता

आरपीएम तयार करा आणि स्थापित करा - https://habr.com/ru/post/500632/

अधिकृत इंस्टॉलर वापरा:

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

मानक वापर

प्रारंभ करण्यासाठी, सेवा वेबसाइटवरून एक नवीन जोडा सेंट्री- अर्जासाठी प्रकल्प. इच्छित भाषा निवडल्यानंतर, तुम्हाला संबंधित कागदपत्रे प्राप्त होतील. आमच्या बाबतीत आम्ही निवडले जावास्क्रिप्ट.

पहिले उदाहरण मानक आहे जावास्क्रिप्ट. येथे दोन बटणे आहेत: "नमस्कार" (हॅलो) आणि "त्रुटी" (त्रुटी).

आपण बटण क्लिक केल्यानंतर "नमस्कार", स्क्रीन रीबूट होईल आणि ब्लॉक होईल प्रयत्न बग शोधेल आणि पकडेल. बग "पकडले" नंतर, त्रुटी अहवाल व्यक्तिचलितपणे सेवेकडे पाठविला जातो सेंट्री.

"त्रुटी" बटण तुम्हाला बग सहजपणे शोधू देते.

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>

टिपा:

सेन्ट्री CDN वरून स्थापित केली जाते आणि जागतिक व्हेरिएबल म्हणून उघड केली जाते
थोड्या आधी आम्ही आमच्या JavaScript मध्ये Sentry लाँच केली

या उदाहरणाची चाचणी करण्यासाठी, आम्ही स्थिर वेब सर्व्हर प्लॅटफॉर्म वापरू शकतो Node.js: http सर्व्हर. फाईल साठवलेल्या फोल्डरवर जा Index.html, आणि ब्राउझरमध्‍ये पत्ता उघडण्‍यासाठी खालील ओळ एंटर करा (कॅशिंग अक्षम करा सह पर्याय). http://localhost:8080.

पकडलेले बग कसे प्रदर्शित केले जातात

प्रथम बटणावर क्लिक करा "नमस्कार".

आम्ही एक बग पकडला, त्यामुळे तो कॉल स्टॅक पॉप अप होणार नाही, आणि म्हणून कन्सोलमध्ये त्याचे परीक्षण केले जात नाही. मात्र, आम्ही पाठवल्यापासून सेंट्री बगची व्यक्तिचलितपणे तक्रार करा, आम्हाला तुमच्या खात्यात त्याबद्दल संदेश दिसेल.

टिपा:

कोणत्या ओळीत (24) बग आहे ते आपण शोधू शकतो
याव्यतिरिक्त, ब्रेडक्रंब ट्रेल ब्राउझर क्रिया दर्शविते ज्यामुळे त्रुटी आली.

न पकडलेले बग कसे प्रदर्शित केले जातात

बटणावर क्लिक करा "एरर".

बग कॉल स्टॅकला बबल करतो आणि अशा प्रकारे कन्सोलवर एक त्रुटी संदेश प्रदर्शित होतो. यानंतर, सेंट्री कोणत्याही अतिरिक्त कृतीशिवाय बगचे स्वयंचलितपणे निरीक्षण करते.

टिपा:

कोणत्या ओळीत (३०) बग हरवला आहे ते आपण पाहू शकतो
ब्रेडक्रंब ट्रेल नाही (मला का ते समजत नाही)

प्रकल्प सुरक्षितता कशी सुनिश्चित करावी

आमच्या प्रकल्पात कोणती पृष्ठे त्रुटी नोंदवू शकतात हे आम्ही नियंत्रित करण्याचा मार्ग तुमच्या लक्षात आला असेल सेंट्री; मदतीने dsn नोंदी. समस्या अशी आहे की इनपुट आपल्या पृष्ठाचा स्त्रोत कोड पाहणाऱ्या कोणीही पाहू शकतो.

हे टाळण्यासाठी, आम्हाला आमच्या प्रकल्पात त्रुटी अहवाल सबमिट करू शकतील अशा डोमेनची संख्या मर्यादित करणे आवश्यक आहे. या उदाहरणात आम्ही वापरले localhost (स्थानिक होस्ट). हा पर्याय सेटिंग्ज टॅबमध्ये कॉन्फिगर केलेला आहे सेंट्री- प्रकल्प, संतरी प्रकल्प सेटिंग.

सोडते

कसे वापरायचे याचा विचार केला तर सेंट्री आमच्या ऍप्लिकेशनच्या विविध भिन्नतेमध्ये, नंतर आम्हाला काही प्रकारची यंत्रणा आवश्यक आहे जी आवृत्ती क्रमांकासह त्रुटी चिन्हांकित करेल.

शेवटी, आम्ही निराकरण केलेला बग पुन्हा पॉप अप होऊ इच्छित नाही आणि आम्हाला वाटते की आम्ही जे निराकरण केले ते कार्य करत नाही. असे देखील होऊ शकते की वापरकर्त्याने अनुप्रयोगाची जुनी, कॅशे केलेली आवृत्ती लॉन्च केली आहे.

समस्येचे निराकरण करण्यासाठी, आपल्याला अभिज्ञापक प्रविष्ट करणे आवश्यक आहे रीलिझ (आवृत्त्या) स्टार्टअपवर सेंट्री.

vanilla/index.html

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

यानंतर, सर्व नवीन त्रुटी म्हणून चिन्हांकित केले जातील रिलीज (0.1.0), म्हणजे, ते कोडच्या योग्य आवृत्तीशी जोडले जातील.

टिपा:

आम्ही रिलीझ वापरण्याचा एक सोपा मार्ग शोधला आहे
संतरी तुम्हाला अधिक वापरण्याची परवानगी देते जटिल त्यांच्या वापर, ज्याचा जवळचा संबंध आहे GitHub. हे कार्य विशिष्ट ऑपरेशन्स करण्यापूर्वी बग ट्रॅक करणे शक्य करते.

PS दुसरा भाग मोठा आहे, म्हणून तो वेगळ्या पोस्टमध्ये असेल.

पीएस टेलीग्राम गप्पा संतरी https://t.me/sentry_ru

PS मी हे सूचित करण्यास विसरलो की हे पोस्टचे भाषांतर आहे https://codeburst.io/sentry-error-reporting-by-example-part-1-999b2df11556

स्त्रोत: www.habr.com

जावास्क्रिप्टमध्ये लिहिलेल्या फ्रंट-एंड ऍप्लिकेशन्समधील सेन्ट्रीसह त्रुटींचे निरीक्षण करणे: भाग 1

एक टिप्पणी जोडा Отменить ответ