🥇जावास्क्रिप्ट में लिखे गए फ्रंट-एंड एप्लिकेशन में सेंट्री का उपयोग करके त्रुटियों की निगरानी करना: भाग 1

सेवा पहरेदार आपको फ्रंट-एंड एप्लिकेशन में लिखे गए बगों की दूर से निगरानी करने की अनुमति देता है जावास्क्रिप्ट.

फ्रंट-एंड एप्लिकेशन में समस्याओं को ठीक करने का प्रयास किया जा रहा है जावास्क्रिप्ट मुश्किल हो सकता है क्योंकि वे उपयोगकर्ता के ब्राउज़र में उत्पन्न होते हैं, जिस तक आपकी पहुंच अक्सर नहीं होती है। तथापि, पहरेदार बग्स की दूर से निगरानी करना संभव बनाता है।

यहां आप इस आलेख में चर्चा किए गए समाधान डाउनलोड कर सकते हैं।

क्या जरूरी है?

यदि आप इन उदाहरणों का उपयोग करना चाहते हैं, तो आपको इसकी आवश्यकता होगी:

Node.js: एक सुविधा संपन्न विकास उपकरण जो एप्लिकेशन का हिस्सा नहीं है। हमने नवीनतम एलटीएस संस्करण (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

मानक उपयोग

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

पहला उदाहरण मानक है जावास्क्रिप्ट. यहाँ दो बटन हैं: "नमस्ते" (हेलो और "गलती" (गलती)।

बटन पर क्लिक करने के बाद "नमस्ते", स्क्रीन रीबूट हो जाएगी और ब्लॉक हो जाएगी कोशिश बग का पता लगाएगा और उसे पकड़ेगा। बग "पकड़े जाने" के बाद, त्रुटि रिपोर्ट मैन्युअल रूप से सेवा को भेजी जाती है पहरेदार.

"त्रुटि" बटन आपको बग का आसानी से पता लगाने की अनुमति देता है।

वेनिला/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>

नोट:

संतरी को एक सीडीएन से स्थापित किया जाता है और एक वैश्विक चर के रूप में प्रदर्शित किया जाता है
कुछ समय पहले हमने अपनी जावास्क्रिप्ट में सेंट्री लॉन्च किया था

इस उदाहरण का परीक्षण करने के लिए, हम एक स्थिर वेब सर्वर प्लेटफ़ॉर्म का उपयोग कर सकते हैं Node.js: http सर्वर. उस फ़ोल्डर पर जाएँ जहाँ फ़ाइल संग्रहीत है सूचकांक, और ब्राउज़र में पता खोलने के लिए निम्न पंक्ति दर्ज करें (कैशिंग अक्षम करता है वाला विकल्प)। http://localhost:8080.

पकड़े गए बग कैसे प्रदर्शित होते हैं

सबसे पहले बटन पर क्लिक करें "नमस्ते".

हमने एक बग पकड़ा है, इसलिए यह कॉल स्टैक को पॉप अप नहीं करेगा, और इसलिए कंसोल में इसकी निगरानी नहीं की जाती है। हालाँकि, चूँकि हम भेजते हैं पहरेदार बग की मैन्युअल रूप से रिपोर्ट करें, हम आपके खाते में इसके बारे में एक संदेश देखेंगे।

नोट:

हम पता लगा सकते हैं कि किस पंक्ति (24) में बग है
इसके अलावा, ब्रेडक्रंब ट्रेल उन ब्राउज़र क्रियाओं को प्रदर्शित करता है जिनके कारण त्रुटि हुई।

न पकड़े गए बग कैसे प्रदर्शित होते हैं

बटन पर क्लिक करना "त्रुटि"।

बग कॉल स्टैक को बुलबुला बनाता है और इस प्रकार कंसोल पर एक त्रुटि संदेश प्रदर्शित होता है। इसके बाद, सेंट्री बिना किसी अतिरिक्त कार्रवाई के स्वचालित रूप से बग की निगरानी करता है।

नोट:

हम देख सकते हैं कि किस पंक्ति (30) में बग खो गया है
कोई ब्रेडक्रंब ट्रेल नहीं है (मुझे समझ में नहीं आता कि क्यों)

प्रोजेक्ट सुरक्षा कैसे सुनिश्चित करें

आपने देखा होगा कि हम किस तरह से नियंत्रित करते हैं कि कौन से पेज हमारे प्रोजेक्ट में त्रुटियों की रिपोर्ट कर सकते हैं पहरेदार; मदद से डीएसएन अभिलेख. समस्या यह है कि इनपुट को कोई भी व्यक्ति देख सकता है जो आपके पृष्ठ का स्रोत कोड देखता है।

इससे बचने के लिए, हमें उन डोमेन की संख्या सीमित करने की आवश्यकता है जो हमारे प्रोजेक्ट में त्रुटि रिपोर्ट सबमिट कर सकते हैं। इस उदाहरण में हमने प्रयोग किया स्थानीय होस्ट (स्थानीय होस्ट). यह विकल्प सेटिंग टैब में कॉन्फ़िगर किया गया है पहरेदार-परियोजना, संतरी परियोजना सेटिंग.

विज्ञप्ति

अगर आप सोच रहे हैं कि कैसे इस्तेमाल करें पहरेदार हमारे एप्लिकेशन के विभिन्न रूपों में, तो हमें किसी प्रकार के तंत्र की आवश्यकता होती है जो संस्करण संख्या के साथ त्रुटियों को चिह्नित करेगा।

आख़िरकार, हम नहीं चाहते कि जिस बग को हमने ठीक किया है वह दोबारा सामने आए, और हम सोचते हैं कि जो हमने ठीक किया वह काम नहीं कर रहा है। यह भी हो सकता है कि उपयोगकर्ता ने एप्लिकेशन का पुराना, कैश्ड संस्करण लॉन्च किया हो।

समस्या को हल करने के लिए, आपको पहचानकर्ता दर्ज करना होगा रिहाई (संस्करण) स्टार्टअप पर पहरेदार.

वेनिला/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

एक टिप्पणी जोड़ें उत्तर रद्द