🥇በጃቫ ስክሪፕት የተፃፉ ሴንትሪን በመጠቀም ስህተቶችን መከታተል፡ ክፍል 1

አገልግሎት Sentry በ ውስጥ የተፃፉ የፊት-መጨረሻ መተግበሪያዎች ላይ ስህተቶችን በርቀት እንዲቆጣጠሩ ያስችልዎታል ጃቫስክሪፕት.

በፊት-መጨረሻ መተግበሪያዎች ላይ ችግሮችን ለማስተካከል በመሞከር ላይ ጃቫስክሪፕት ተንኮለኛ ሊሆን ይችላል ምክንያቱም እነሱ ከተጠቃሚው አሳሽ ስለሚመነጩ ብዙ ጊዜ ሊደርሱበት አይችሉም። ሆኖም፣ Sentry በርቀት ስህተቶችን ለመቆጣጠር ያስችላል።

ይህ ነው በዚህ ጽሑፍ ውስጥ የተብራሩትን መፍትሄዎች ማውረድ ይችላሉ.

አስፈላጊ የሆነው ነገር

እነዚህን ምሳሌዎች ለመጠቀም ከፈለጉ, ያስፈልግዎታል:

Node.jsየመተግበሪያው አካል ያልሆነ በባህሪ የበለጸገ የእድገት መሳሪያ። የቅርብ ጊዜውን LTS ስሪት አውርደናል (8.12.0)
Sentryበሴንትሪ አገልግሎት ውስጥ ያለ መለያ (በወር እስከ 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

መደበኛ አጠቃቀም

ለመጀመር ከአገልግሎት ድህረ ገጽ ላይ አዲስ ያክሉ Sentry- ለትግበራው ፕሮጀክት. የሚፈለገውን ቋንቋ ከመረጡ በኋላ ተጓዳኝ ሰነዶችን ይቀበላሉ. በእኛ ሁኔታ እኛ መረጥን ጃቫስክሪፕት.

የመጀመሪያው ምሳሌ መደበኛ ነው ጃቫስክሪፕት. እዚህ ሁለት አዝራሮች አሉ: "እው ሰላም ነው" (ሰላም) እና "ስህተት" (ስህተት)

አዝራሩን ጠቅ ካደረጉ በኋላ "እው ሰላም ነው", ማያ ገጹ እንደገና ይነሳል እና እገዳው ይሆናል ሙከራ ስህተቱን ፈልጎ ይይዛል። ስህተቱ "ከተያዘ" በኋላ የስህተት ሪፖርቱ በእጅ ወደ አገልግሎቱ ይላካል Sentry.

የ "ስህተት" ቁልፍ በቀላሉ ስህተትን እንዲያገኙ ያስችልዎታል.

ቫኒላ/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 አገልጋይ. ፋይሉ ወደተቀመጠበት አቃፊ ይሂዱ index.html, እና በአሳሹ ውስጥ አድራሻውን ለመክፈት (መሸጎጫውን በማሰናከል አማራጭ) የሚከተለውን መስመር ያስገቡ http://localhost:8080.

የተያዙ ሳንካዎች እንዴት እንደሚታዩ

በመጀመሪያ አዝራሩን ጠቅ ያድርጉ "እው ሰላም ነው".

ስህተት ያዝን፣ ስለዚህ የጥሪው ቁልል ብቅ ስለማይል በኮንሶሉ ውስጥ ክትትል አይደረግበትም። ቢሆንም, እኛ መላክ ጀምሮ Sentry ስህተትን በእጅ ሪፖርት ያድርጉ ፣ ስለ እሱ መልእክት በመለያዎ ውስጥ እናያለን።

ማስታወሻዎች

የትኛው መስመር (24) ስህተት እንደያዘ መከታተል እንችላለን
በተጨማሪም, የዳቦ ፍርፋሪ ዱካ ወደ ስህተቱ ምክንያት የሆነውን የአሳሽ ድርጊቶችን ያሳያል.

ያልተያዙ ሳንካዎች እንዴት እንደሚታዩ

አዝራሩን ጠቅ ያድርጉ "ስህተት".

ስህተቱ የጥሪ ቁልል ላይ አረፋ ስለሚፈጥር የስህተት መልእክት በኮንሶሉ ላይ ይታያል። ከዚህ በኋላ ሴንትሪ ምንም ተጨማሪ እርምጃዎች ሳይኖር ስህተቱን በራስ-ሰር ይቆጣጠራል።

ማስታወሻዎች

ስህተቱ በየትኛው መስመር (30) እንደጠፋ ማየት እንችላለን
የዳቦ ፍርፋሪ መንገድ የለም (ለምን እንደሆነ በደንብ አልገባኝም)

የፕሮጀክት ደህንነትን እንዴት ማረጋገጥ እንደሚቻል

የትኛዎቹ ገጾች ስህተቶችን ለፕሮጀክታችን ሪፖርት ማድረግ እንደሚችሉ የምንቆጣጠርበትን መንገድ አስተውለህ ይሆናል። Sentry; ከእርዳታ ጋር DSn መዝገቦች. ችግሩ ግብአቱ የገጽዎን ምንጭ ኮድ ለሚመለከት ማንኛውም ሰው ሊታይ ይችላል።

ይህንን ለማስቀረት የስህተት ሪፖርቶችን ወደ ፕሮጀክታችን የሚያቀርቡትን የጎራዎች ብዛት መገደብ አለብን። በዚህ ምሳሌ ውስጥ ተጠቅመንበታል localhost (አካባቢያዊ አስተናጋጅ)። ይህ አማራጭ በቅንብሮች ትር ውስጥ ተዋቅሯል። Sentry- ፕሮጀክት; የሴንትሪ ፕሮጀክት ቅንብር.

የሚለቀቁ

እንዴት እንደሚጠቀሙ ካሰቡ Sentry በተለያዩ የመተግበሪያችን ልዩነቶች ፣ ከዚያ በስሪት ቁጥር ስህተቶችን የሚጠቁም አንድ ዓይነት ዘዴ እንፈልጋለን።

ከሁሉም በላይ, ያስተካክለው ስህተት እንደገና ብቅ እንዲል አንፈልግም, እና ያስተካከልነው አልሰራም ብለን እናስባለን. እንዲሁም ተጠቃሚው የቆየ የተሸጎጠ የመተግበሪያውን ስሪት አስፍቶ ሊሆን ይችላል።

ችግሩን ለመፍታት መለያውን ማስገባት ያስፈልግዎታል መልቀቅ ፡፡ (ስሪቶች) ጅምር ላይ Sentry.

ቫኒላ/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

ምንጭ: hab.com

በጃቫ ስክሪፕት የተፃፉ ከሴንትሪ ጋር ስህተቶችን የመቆጣጠር ሂደት፡ ክፍል 1

አስተያየት ያክሉ ምላሽ መሰረዝ