🥇जाभास्क्रिप्टमा लेखिएका फ्रन्ट-एन्ड एप्लिकेसनहरूमा सेन्ट्री प्रयोग गरेर त्रुटिहरू निगरानी गर्दै: भाग 1

सेवा Sentry तपाईंलाई अगाडि-अन्तमा लेखिएका अनुप्रयोगहरूमा बगहरू टाढाबाट निगरानी गर्न अनुमति दिन्छ जाभास्क्रिप्ट.

अगाडि-अन्त अनुप्रयोगहरूमा समस्याहरू समाधान गर्ने प्रयास गर्दै जाभास्क्रिप्ट कठिन हुन सक्छ किनभने तिनीहरू प्रयोगकर्ताको ब्राउजरमा उत्पन्न हुन्छन्, जसमा तपाइँ प्रायः पहुँच गर्नुहुन्न। तर, Sentry यसलाई टाढाबाट बगहरू निगरानी गर्न सम्भव बनाउँछ।

यो छ तपाईं यस लेखमा छलफल गरिएका समाधानहरू डाउनलोड गर्न सक्नुहुन्छ।

के आवश्यक छ

यदि तपाइँ यी उदाहरणहरू प्रयोग गर्न चाहनुहुन्छ भने, तपाइँलाई आवश्यक पर्दछ:

Node.js: एक सुविधा सम्पन्न विकास उपकरण जुन अनुप्रयोगको भाग होइन। हामीले नवीनतम LTS संस्करण डाउनलोड गर्यौं (8.12.0)
Sentry: या त सेन्ट्री सेवामा खाता (तपाईले प्रति महिना 10 हजार बगहरू निःशुल्क रेकर्ड गर्न सक्नुहुन्छ) वा स्थापित स्थानीय सेन्ट्री - https://github.com/getsentry/onpremise

तपाईंको सर्भरमा स्थापना

तपाईंको सर्भरमा सेन्ट्री अन-प्रिमाइस स्थापना गर्न तपाईं २ तरिकामा जान सक्नुहुन्छ

rpm बनाउनुहोस् र तिनीहरूलाई स्थापना गर्नुहोस् - https://habr.com/ru/post/500632/

आधिकारिक स्थापनाकर्ता प्रयोग गर्नुहोस्:

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

मानक प्रयोग

सुरु गर्न, सेवा वेबसाइटबाट एउटा नयाँ थप्नुहोस् Sentry- आवेदन को लागी परियोजना। इच्छित भाषा चयन गरेपछि, तपाईंले सम्बन्धित कागजातहरू प्राप्त गर्नुहुनेछ। हाम्रो सन्दर्भमा हामीले रोज्यौं जाभास्क्रिप्ट.

पहिलो उदाहरण मानक हो जाभास्क्रिप्ट। यहाँ दुईवटा बटनहरू छन्: "नमस्कार" (नमस्ते) र "त्रुटि" (त्रुटि)।

तपाईंले बटन क्लिक गरेपछि "नमस्कार", स्क्रिन रिबुट हुनेछ र ब्लक हुनेछ प्रयास बग पत्ता लगाउने र समात्ने छ। बग "पक्रिएको" पछि, त्रुटि रिपोर्ट म्यानुअल रूपमा सेवामा पठाइन्छ Sentry.

"त्रुटि" बटनले तपाईंलाई सजिलै बग पत्ता लगाउन अनुमति दिन्छ।

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 बाट स्थापना गरिएको छ र विश्वव्यापी चरको रूपमा उजागर गरिएको छ
अलि पहिले हामीले हाम्रो जाभास्क्रिप्टमा सेन्ट्री सुरु गर्यौं

यो उदाहरण परीक्षण गर्न, हामी एक स्थिर वेब सर्भर प्लेटफर्म प्रयोग गर्न सक्नुहुन्छ Node.js: http सर्भर। फोल्डरमा जानुहोस् जहाँ फाइल भण्डारण गरिएको छ index.html, र ब्राउजरमा ठेगाना खोल्नको लागि निम्न लाइन प्रविष्ट गर्नुहोस् (क्यासिङ असक्षम गर्ने विकल्प) http://localhost:8080.

कसरी समातिएका बगहरू प्रदर्शित हुन्छन्

पहिले बटन क्लिक गर्नुहोस् "नमस्कार".

हामीले एउटा बग समात्यौं, त्यसैले यसले कल स्ट्याक पप अप गर्दैन, र त्यसैले कन्सोलमा निगरानी गरिँदैन। तर, हामीले पठाएकोले Sentry म्यानुअल रूपमा बग रिपोर्ट गर्नुहोस्, हामी तपाईंको खातामा यसको बारेमा सन्देश देख्नेछौं।

टिप्पणीहरू:

हामी कुन लाइन (24) मा बग समावेश ट्रेस गर्न सक्छौं
थप रूपमा, ब्रेडक्रम्ब ट्रेलले त्रुटि निम्त्याउने ब्राउजर कार्यहरू प्रदर्शन गर्दछ।

कसरी नपढिएका बगहरू प्रदर्शित हुन्छन्

बटन क्लिक गर्नुहोस् "त्रुटि"।

बगले कल स्ट्याकलाई बबल गर्छ र यसरी कन्सोलमा त्रुटि सन्देश प्रदर्शित हुन्छ। यस पछि, सेन्ट्रीले कुनै पनि अतिरिक्त कार्य बिना बगलाई स्वचालित रूपमा निगरानी गर्दछ।

टिप्पणीहरू:

हामी कुन लाइनमा देख्न सक्छौं (30) बग हराएको छ
त्यहाँ कुनै ब्रेडक्रम्ब ट्रेल छैन (किन मैले धेरै बुझिन)

परियोजना सुरक्षा कसरी सुनिश्चित गर्ने

हामीले कुन पृष्ठहरूले हाम्रो परियोजनामा त्रुटिहरू रिपोर्ट गर्न सक्छन् भनेर नियन्त्रण गर्ने तरिका तपाईंले याद गर्नुभएको होला Sentry; मद्दत संग dsn रेकर्डहरू। समस्या यो हो कि इनपुट तपाईंको पृष्ठको स्रोत कोड हेर्ने जो कोहीले देख्न सक्छ।

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

विमोचन गर्दछ

यदि तपाइँ कसरी प्रयोग गर्ने बारे सोच्नुहुन्छ Sentry हाम्रो एप्लिकेसनको विभिन्न भिन्नताहरूमा, त्यसोभए हामीलाई कुनै प्रकारको संयन्त्र चाहिन्छ जसले त्रुटिहरूलाई संस्करण नम्बरसँग चिन्ह लगाउनेछ।

आखिर, हामीले फिक्स गरेको बग फेरि पप अप होस् भन्ने हामी चाहँदैनौं, र हामीले फिक्स गरेको कुराले काम गरेन भन्ने हामीलाई लाग्छ। यो पनि हुन सक्छ कि प्रयोगकर्ताले अनुप्रयोगको पुरानो, क्यास संस्करण सुरु गर्यो।

समस्या समाधान गर्न, तपाईंले पहिचानकर्ता प्रविष्ट गर्न आवश्यक छ रिलीज (संस्करण) स्टार्टअपमा Sentry.

vanilla/index.html

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

यस पछि, सबै नयाँ त्रुटिहरू रूपमा चिन्ह लगाइनेछ रिलीज (०.१.०), त्यो हो, तिनीहरू कोडको सही संस्करणमा बाँधिनेछन्।

टिप्पणीहरू:

हामीले रिलिजहरू प्रयोग गर्ने सरल तरिका पत्ता लगाएका छौं
सेन्ट्रीले तपाईंलाई थप प्रयोग गर्न अनुमति दिन्छ जटिल आफ्नो को प्रयोग, जससँग नजिकको सम्बन्ध छ GitHub। यो प्रकार्यले निश्चित कार्यहरू गर्नु अघि बगहरू ट्र्याक गर्न सम्भव बनाउँछ।

PS दोस्रो भाग लामो छ, त्यसैले यो एक अलग पोस्ट मा हुनेछ।

PS टेलीग्राम च्याट सेन्ट्री https://t.me/sentry_ru

PS मैले यो पोष्टको अनुवाद हो भनेर संकेत गर्न बिर्सें https://codeburst.io/sentry-error-reporting-by-example-part-1-999b2df11556

स्रोत: www.habr.com

जाभास्क्रिप्टमा लेखिएका फ्रन्ट-एन्ड एप्लिकेसनहरूमा सेन्ट्रीसँग अनुगमन त्रुटिहरू: भाग १

एक टिप्पणी थप्न Отменить ответ