🥇 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) માં બગ છે
વધુમાં, બ્રેડક્રમ્બ ટ્રેઇલ એ બ્રાઉઝર ક્રિયાઓ દર્શાવે છે જે ભૂલ તરફ દોરી જાય છે.

કેવી રીતે પકડાયેલ ભૂલો પ્રદર્શિત થાય છે

બટન પર ક્લિક કરો "ભૂલ".

બગ કોલ સ્ટેકને બબલ્સ કરે છે અને આમ કન્સોલ પર એક એરર મેસેજ પ્રદર્શિત થાય છે. આ પછી, સેન્ટ્રી કોઈપણ વધારાની ક્રિયાઓ વિના, આપમેળે બગનું નિરીક્ષણ કરે છે.

નોંધ:

આપણે જોઈ શકીએ છીએ કે કઈ લાઈનમાં (30) ભૂલ ખોવાઈ ગઈ છે
ત્યાં કોઈ બ્રેડક્રમ્બ ટ્રેઇલ નથી (મને શા માટે બરાબર સમજાતું નથી)

પ્રોજેક્ટ સુરક્ષા કેવી રીતે સુનિશ્ચિત કરવી

અમારા પ્રોજેક્ટમાં કયા પૃષ્ઠો ભૂલોની જાણ કરી શકે તે રીતે અમે નિયંત્રિત કરીએ છીએ તે તમે નોંધ્યું હશે સેન્ટ્રી; મદદ સાથે ડીએસએન રેકોર્ડ સમસ્યા એ છે કે તમારા પૃષ્ઠનો સ્રોત કોડ જોનાર કોઈપણ વ્યક્તિ ઇનપુટ જોઈ શકે છે.

આને અવગણવા માટે, અમારે અમારા પ્રોજેક્ટમાં ભૂલ રિપોર્ટ સબમિટ કરી શકે તેવા ડોમેન્સની સંખ્યાને મર્યાદિત કરવાની જરૂર છે. આ ઉદાહરણમાં અમે ઉપયોગ કર્યો લોકલહોસ્ટ (સ્થાનિક યજમાન). આ વિકલ્પ સેટિંગ્સ ટેબમાં ગોઠવેલ છે સેન્ટ્રી- પ્રોજેક્ટ, સંત્રી પ્રોજેક્ટ સેટિંગ.

રિલીઝ કરે છે

જો તમે ઉપયોગ કેવી રીતે કરવો તે વિશે વિચારો સેન્ટ્રી અમારી એપ્લિકેશનના વિવિધ ફેરફારોમાં, પછી અમને અમુક પ્રકારની મિકેનિઝમની જરૂર છે જે સંસ્કરણ નંબર સાથે ભૂલોને ચિહ્નિત કરશે.

છેવટે, અમે નથી ઇચ્છતા કે અમે સુધારેલ બગ ફરીથી પોપ અપ થાય, અને અમને લાગે છે કે અમે જે સુધારેલ છે તે કામ કરતું નથી. એવું પણ બની શકે છે કે વપરાશકર્તાએ એપ્લિકેશનનું જૂનું, કેશ્ડ વર્ઝન લોન્ચ કર્યું હોય.

સમસ્યા હલ કરવા માટે, તમારે ઓળખકર્તા દાખલ કરવાની જરૂર છે પ્રકાશન (સંસ્કરણો) સ્ટાર્ટઅપ પર સેન્ટ્રી.

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

એક ટિપ્પણી ઉમેરો જવાબ રદ