🥇JavaScript-ൽ എഴുതിയ ഫ്രണ്ട്-എൻഡ് ആപ്ലിക്കേഷനുകളിൽ സെൻട്രി ഉപയോഗിച്ചുള്ള മോണിറ്ററിംഗ് പിശകുകൾ: ഭാഗം 1

സേവനം സെന്റി ഫ്രണ്ട്-എൻഡ് ആപ്ലിക്കേഷനുകളിലെ ബഗുകൾ വിദൂരമായി നിരീക്ഷിക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു ജാവാസ്ക്രിപ്റ്റ്.

ഫ്രണ്ട്-എൻഡ് ആപ്ലിക്കേഷനുകളിലെ പ്രശ്നങ്ങൾ പരിഹരിക്കാൻ ശ്രമിക്കുന്നു ജാവാസ്ക്രിപ്റ്റ് നിങ്ങൾക്ക് പലപ്പോഴും ആക്‌സസ്സ് ഇല്ലാത്ത ഉപയോക്താവിന്റെ ബ്രൗസറിൽ നിന്നാണ് അവ ഉത്ഭവിക്കുന്നത് എന്നതിനാൽ ഇത് ബുദ്ധിമുട്ടായിരിക്കും. എന്നിരുന്നാലും, സെന്റി ബഗുകൾ വിദൂരമായി നിരീക്ഷിക്കുന്നത് സാധ്യമാക്കുന്നു.

ഇത് ഈ ലേഖനത്തിൽ ചർച്ച ചെയ്ത പരിഹാരങ്ങൾ നിങ്ങൾക്ക് ഡൗൺലോഡ് ചെയ്യാം.

എന്താണ് വേണ്ടത്

നിങ്ങൾക്ക് ഈ ഉദാഹരണങ്ങൾ ഉപയോഗിക്കണമെങ്കിൽ, നിങ്ങൾക്ക് ഇത് ആവശ്യമാണ്:

നൊദെ.ജ്സ്: ആപ്ലിക്കേഷന്റെ ഭാഗമല്ലാത്ത ഫീച്ചറുകളാൽ സമ്പന്നമായ ഒരു വികസന ഉപകരണം. ഞങ്ങൾ ഏറ്റവും പുതിയ LTS പതിപ്പ് ഡൗൺലോഡ് ചെയ്തു (8.12.0)
സെന്റി: ഒന്നുകിൽ സെൻട്രി സേവനത്തിലെ ഒരു അക്കൗണ്ട് (നിങ്ങൾക്ക് പ്രതിമാസം 10 ആയിരം ബഗുകൾ വരെ സൗജന്യമായി റെക്കോർഡ് ചെയ്യാം) അല്ലെങ്കിൽ ഇൻസ്റ്റാൾ ചെയ്ത ലോക്കൽ സെൻട്രി - 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

സാധാരണ ഉപയോഗം

ആരംഭിക്കുന്നതിന്, സേവന വെബ്‌സൈറ്റിൽ നിന്ന് പുതിയൊരെണ്ണം ചേർക്കുക സെന്റി- അപേക്ഷയ്ക്കുള്ള പദ്ധതി. ആവശ്യമുള്ള ഭാഷ തിരഞ്ഞെടുത്ത ശേഷം, നിങ്ങൾക്ക് അനുബന്ധ ഡോക്യുമെന്റേഷൻ ലഭിക്കും. ഞങ്ങളുടെ കാര്യത്തിൽ ഞങ്ങൾ തിരഞ്ഞെടുത്തു ജാവാസ്ക്രിപ്റ്റ്.

ആദ്യ ഉദാഹരണം സ്റ്റാൻഡേർഡ് ആണ് ജാവാസ്ക്രിപ്റ്റ്. ഇവിടെ രണ്ട് ബട്ടണുകൾ ഉണ്ട്: "ഹലോ" (ഹലോ) ഒപ്പം "പിശക്" (പിശക്).

നിങ്ങൾ ബട്ടൺ ക്ലിക്ക് ചെയ്ത ശേഷം "ഹലോ", സ്‌ക്രീൻ റീബൂട്ട് ചെയ്യുകയും ബ്ലോക്ക് ചെയ്യുകയും ചെയ്യും ശ്രമിക്കൂ ബഗ് കണ്ടെത്തി പിടിക്കും. ബഗ് "പിടിച്ചു" കഴിഞ്ഞാൽ, പിശക് റിപ്പോർട്ട് സ്വമേധയാ സേവനത്തിലേക്ക് അയയ്ക്കുന്നു സെന്റി.

ഒരു ബഗ് എളുപ്പത്തിൽ കണ്ടെത്താൻ "പിശക്" ബട്ടൺ നിങ്ങളെ അനുവദിക്കുന്നു.

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-ൽ സെൻട്രി സമാരംഭിച്ചു

ഈ ഉദാഹരണം പരിശോധിക്കുന്നതിന്, ഞങ്ങൾക്ക് ഒരു സ്റ്റാറ്റിക് വെബ് സെർവർ പ്ലാറ്റ്ഫോം ഉപയോഗിക്കാം നൊദെ.ജ്സ്: http സെർവർ. ഫയൽ സൂക്ഷിച്ചിരിക്കുന്ന ഫോൾഡറിലേക്ക് പോകുക Index.html, ബ്രൗസറിൽ വിലാസം തുറക്കാൻ ഇനിപ്പറയുന്ന വരി നൽകുക (കാഷിംഗ് പ്രവർത്തനരഹിതമാക്കുന്ന ഓപ്ഷൻ). http://localhost:8080.

പിടിക്കപ്പെട്ട ബഗുകൾ എങ്ങനെ പ്രദർശിപ്പിക്കും

ആദ്യം ബട്ടൺ ക്ലിക്ക് ചെയ്യുക "ഹലോ".

ഞങ്ങൾക്ക് ഒരു ബഗ് പിടികിട്ടി, അതിനാൽ ഇത് കോൾ സ്റ്റാക്ക് പോപ്പ് അപ്പ് ചെയ്യില്ല, അതിനാൽ കൺസോളിൽ നിരീക്ഷിക്കപ്പെടുന്നില്ല. എന്നിരുന്നാലും, ഞങ്ങൾ അയയ്ക്കുന്നതിനാൽ സെന്റി ഒരു ബഗ് സ്വമേധയാ റിപ്പോർട്ട് ചെയ്യുക, നിങ്ങളുടെ അക്കൗണ്ടിൽ അതിനെക്കുറിച്ചുള്ള ഒരു സന്ദേശം ഞങ്ങൾ കാണും.

കുറിപ്പുകൾ:

ഏത് ലൈനിലാണ് (24) ബഗ് അടങ്ങിയിരിക്കുന്നതെന്ന് നമുക്ക് കണ്ടെത്താനാകും
കൂടാതെ, ബ്രെഡ്ക്രംബ് ട്രയൽ പിശകിലേക്ക് നയിച്ച ബ്രൗസർ പ്രവർത്തനങ്ങൾ പ്രദർശിപ്പിക്കുന്നു.

പിടിക്കപ്പെടാത്ത ബഗുകൾ എങ്ങനെ പ്രദർശിപ്പിക്കും

ബട്ടൺ ക്ലിക്ക് ചെയ്യുക "പിശക്".

ബഗ് ബബിൾസ് കോൾ സ്റ്റാക്കിനെ ഉയർത്തുകയും അങ്ങനെ ഒരു പിശക് സന്ദേശം കൺസോളിൽ പ്രദർശിപ്പിക്കുകയും ചെയ്യുന്നു. ഇതിനുശേഷം, അധിക പ്രവർത്തനങ്ങളൊന്നുമില്ലാതെ, സെൻട്രി സ്വയമേ ബഗ് നിരീക്ഷിക്കുന്നു.

കുറിപ്പുകൾ:

ഏത് വരിയിലാണ് (30) ബഗ് നഷ്ടപ്പെട്ടതെന്ന് നമുക്ക് കാണാൻ കഴിയും
ബ്രെഡ്ക്രംബ് ട്രയൽ ഇല്ല (എന്തുകൊണ്ടാണെന്ന് എനിക്ക് മനസ്സിലാകുന്നില്ല)

പദ്ധതിയുടെ സുരക്ഷ എങ്ങനെ ഉറപ്പാക്കാം

ഞങ്ങളുടെ പ്രോജക്റ്റിലേക്ക് പിശകുകൾ റിപ്പോർട്ട് ചെയ്യാൻ കഴിയുന്ന പേജുകൾ നിയന്ത്രിക്കുന്ന രീതി നിങ്ങൾ ശ്രദ്ധിച്ചിരിക്കാം സെന്റി; സഹായത്തോടെ dsn രേഖകള്. നിങ്ങളുടെ പേജിന്റെ സോഴ്സ് കോഡ് കാണുന്ന ആർക്കും ഇൻപുട്ട് കാണാൻ കഴിയും എന്നതാണ് പ്രശ്നം.

ഇത് ഒഴിവാക്കാൻ, ഞങ്ങളുടെ പ്രോജക്റ്റിലേക്ക് പിശക് റിപ്പോർട്ടുകൾ സമർപ്പിക്കാൻ കഴിയുന്ന ഡൊമെയ്‌നുകളുടെ എണ്ണം പരിമിതപ്പെടുത്തേണ്ടതുണ്ട്. ഈ ഉദാഹരണത്തിൽ ഞങ്ങൾ ഉപയോഗിച്ചു ലോക്കൽഹോസ്റ്റിൽ (പ്രാദേശിക ഹോസ്റ്റ്). ഈ ഓപ്‌ഷൻ ക്രമീകരണ ടാബിൽ ക്രമീകരിച്ചിരിക്കുന്നു സെന്റി- പദ്ധതി, സെൻട്രി പ്രോജക്റ്റ് ക്രമീകരണം.

റിലീസുകൾ

എങ്ങനെ ഉപയോഗിക്കണമെന്ന് നിങ്ങൾ ചിന്തിച്ചാൽ സെന്റി ഞങ്ങളുടെ ആപ്ലിക്കേഷന്റെ വ്യത്യസ്ത വ്യതിയാനങ്ങളിൽ, ഒരു പതിപ്പ് നമ്പർ ഉപയോഗിച്ച് പിശകുകൾ അടയാളപ്പെടുത്തുന്ന ഒരുതരം സംവിധാനം ഞങ്ങൾക്ക് ആവശ്യമാണ്.

എല്ലാത്തിനുമുപരി, ഞങ്ങൾ പരിഹരിച്ച ബഗ് വീണ്ടും പോപ്പ് അപ്പ് ചെയ്യാൻ ഞങ്ങൾ ആഗ്രഹിക്കുന്നില്ല, ഞങ്ങൾ പരിഹരിച്ചത് പ്രവർത്തിച്ചില്ലെന്ന് ഞങ്ങൾ കരുതുന്നു. ആപ്ലിക്കേഷന്റെ പഴയതും കാഷെ ചെയ്തതുമായ പതിപ്പ് ഉപയോക്താവ് സമാരംഭിച്ചതും ആകാം.

പ്രശ്നം പരിഹരിക്കാൻ, നിങ്ങൾ ഐഡന്റിഫയർ നൽകേണ്ടതുണ്ട് റിലീസ് (പതിപ്പുകൾ) തുടക്കത്തിൽ സെന്റി.

vanilla/index.html

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

ഇതിനുശേഷം, എല്ലാ പുതിയ പിശകുകളും ഇതായി അടയാളപ്പെടുത്തും റിലീസ് (0.1.0), അതായത്, അവ കോഡിന്റെ ശരിയായ പതിപ്പുമായി ബന്ധിപ്പിക്കും.

കുറിപ്പുകൾ:

റിലീസുകൾ ഉപയോഗിക്കുന്നതിനുള്ള ഒരു ലളിതമായ മാർഗം ഞങ്ങൾ കണ്ടെത്തി
കൂടുതൽ ഉപയോഗിക്കാൻ സെൻട്രി നിങ്ങളെ അനുവദിക്കുന്നു സങ്കീർണ്ണമായ അവരുടെ ഉപയോഗം, എന്നിവയുമായി അടുത്ത ബന്ധമുണ്ട് സാമൂഹികം. ചില പ്രവർത്തനങ്ങൾ നടത്തുന്നതിന് മുമ്പ് ബഗുകൾ ട്രാക്ക് ചെയ്യുന്നത് ഈ ഫംഗ്ഷൻ സാധ്യമാക്കുന്നു.

PS രണ്ടാം ഭാഗം ദൈർഘ്യമേറിയതാണ്, അതിനാൽ ഇത് ഒരു പ്രത്യേക പോസ്റ്റിൽ ആയിരിക്കും.

PS ടെലിഗ്രാം ചാറ്റ് സെൻട്രി https://t.me/sentry_ru

PS ഇത് പോസ്റ്റിന്റെ പരിഭാഷയാണെന്ന് സൂചിപ്പിക്കാൻ ഞാൻ മറന്നു https://codeburst.io/sentry-error-reporting-by-example-part-1-999b2df11556

അവലംബം: www.habr.com

JavaScript-ൽ എഴുതിയ ഫ്രണ്ട്-എൻഡ് ആപ്ലിക്കേഷനുകളിലെ സെൻട്രി ഉപയോഗിച്ച് മോണിറ്ററിംഗ് പിശകുകൾ: ഭാഗം 1

ഒരു അഭിപ്രായം ചേർക്കുക

JavaScript-ൽ എഴുതിയ ഫ്രണ്ട്-എൻഡ് ആപ്ലിക്കേഷനുകളിലെ സെൻട്രി ഉപയോഗിച്ച് മോണിറ്ററിംഗ് പിശകുകൾ: ഭാഗം 1

ഒരു അഭിപ്രായം ചേർക്കുക മറുപടി റദ്ദാക്കാൻ

ഒരു അഭിപ്രായം ചേർക്കുക