🥇ජාවාස්ක්‍රිප්ට් වලින් ලියා ඇති ඉදිරිපස යෙදුම්වල සෙන්ට්‍රි භාවිතයෙන් දෝෂ නිරීක්ෂණය කිරීම: 1 කොටස

සේවා වූ දමිල්වානි බ්රිතාන්යයෙන් ලියා ඇති ඉදිරිපස යෙදුම්වල දෝෂ දුරස්ථව නිරීක්ෂණය කිරීමට ඔබට ඉඩ සලසයි ජාවාස්ක්රිප්ට්.

ඉදිරිපස-අන්ත යෙදුම්වල ගැටළු විසඳීමට උත්සාහ කරමින් ජාවාස්ක්රිප්ට් ඔබට බොහෝ විට ප්‍රවේශය නොමැති පරිශීලකයාගේ බ්‍රවුසරයෙන් ඒවා ආරම්භ වන නිසා උපක්‍රමශීලී විය හැක. කෙසේ වුවද, වූ දමිල්වානි බ්රිතාන්යයෙන් දුරස්ථව දෝෂ නිරීක්ෂණය කිරීමට හැකි වේ.

එය මෙම ලිපියේ සාකච්ඡා කර ඇති විසඳුම් ඔබට බාගත හැකිය.

අවශ්ය දේ

ඔබට මෙම උදාහරණ භාවිතා කිරීමට අවශ්‍ය නම්, ඔබට අවශ්‍ය වනු ඇත:

Node.js: යෙදුමේ කොටසක් නොවන විශේෂාංගවලින් පොහොසත් සංවර්ධන මෙවලමක්. අපි නවතම LTS අනුවාදය බාගත කළෙමු (8.12.0)
වූ දමිල්වානි බ්රිතාන්යයෙන්: එක්කෝ Sentry සේවාවේ ගිණුමක් (ඔබට මසකට දෝෂ 10ක් දක්වා නොමිලේ පටිගත කළ හැක) හෝ ස්ථාපිත දේශීය Sentry එකක් - 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

සම්මත භාවිතය

ආරම්භ කිරීමට, සේවා වෙබ් අඩවියෙන් අලුත් එකක් එක් කරන්න වූ දමිල්වානි බ්රිතාන්යයෙන්- යෙදුම සඳහා ව්යාපෘතිය. අපේක්ෂිත භාෂාව තේරීමෙන් පසු, ඔබට අදාළ ලියකියවිලි ලැබෙනු ඇත. අපගේ නඩුවේදී අපි තෝරා ගත්තෙමු ජාවාස්ක්රිප්ට්.

පළමු උදාහරණය සම්මත වේ ජාවාස්ක්රිප්ට්. මෙහි බොත්තම් දෙකක් තිබේ: "ආයුබෝවන්" (ආයුබෝවන්) සහ "දෝෂය" (දෝෂය).

ඔබ බොත්තම ක්ලික් කළ පසු "ආයුබෝවන්", තිරය නැවත ආරම්භ කර අවහිර කරනු ඇත උත්සාහ දෝෂය හඳුනාගෙන අල්ලා ගනු ඇත. දෝෂය "අල්ලා ගැනීමෙන්" පසු, දෝෂ වාර්තාව අතින් සේවාව වෙත යවනු ලැබේ වූ දමිල්වානි බ්රිතාන්යයෙන්.

"දෝෂය" බොත්තම ඔබට පහසුවෙන් දෝෂයක් හඳුනා ගැනීමට ඉඩ සලසයි.

වැනිලා/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>

Примечания:

Sentry CDN එකකින් ස්ථාපනය කර ගෝලීය විචල්‍යයක් ලෙස නිරාවරණය වේ
ටිකක් කලින් අපි අපේ JavaScript වල Sentry දියත් කළා

මෙම උදාහරණය පරීක්ෂා කිරීම සඳහා, අපට ස්ථිතික වෙබ් සේවාදායක වේදිකාවක් භාවිතා කළ හැකිය Node.js: http සේවාදායකය. ගොනුව ගබඩා කර ඇති ෆෝල්ඩරය වෙත යන්න index.html, සහ බ්‍රවුසරයේ ලිපිනය විවෘත කිරීමට පහත පේළිය ඇතුළත් කරන්න (අක්‍රීය හැඹිලි සහිත විකල්පය). http://localhost:8080.

හසු වූ දෝෂ දර්ශනය වන ආකාරය

මුලින්ම බොත්තම ක්ලික් කරන්න "ආයුබෝවන්".

අපි දෝෂයක් අල්ලා ගත්තෙමු, එබැවින් එය ඇමතුම් තොගය උත්පතන නොවනු ඇත, එබැවින් කොන්සෝලය තුළ නිරීක්ෂණය නොකෙරේ. කෙසේ වෙතත්, අපි යවන බැවින් වූ දමිල්වානි බ්රිතාන්යයෙන් දෝෂයක් අතින් වාර්තා කරන්න, අපි ඔබේ ගිණුමේ ඒ ගැන පණිවිඩයක් දකිමු.

Примечания:

දෝෂය අඩංගු වන්නේ කුමන පේළියේ (24) දැයි අපට සොයා ගත හැක
ඊට අමතරව, බ්‍රෙඩ්ක්‍රම්බ් ට්‍රේල් දෝෂයට තුඩු දුන් බ්‍රව්සර් ක්‍රියා පෙන්වයි.

හසු නොවූ දෝෂ දර්ශනය වන ආකාරය

බොත්තම ක්ලික් කරන්න "දෝෂය".

දෝෂය ඇමතුම් තොගය ඉහළ නංවන අතර එමඟින් දෝෂ පණිවිඩයක් කොන්සෝලය මත දර්ශනය වේ. මෙයින් පසු, Sentry ස්වයංක්‍රීයව කිසිදු අමතර ක්‍රියාමාර්ගයකින් තොරව දෝෂය නිරීක්ෂණය කරයි.

Примечания:

කුමන පේළියේ (30) දෝෂය නැති වී ඇත්දැයි අපට දැක ගත හැකිය
බ්‍රෙඩ්ක්‍රම්බ් ට්‍රේල් එකක් නැත (ඇයි මට හරියටම තේරෙන්නේ නැහැ)

ව්යාපෘතියේ ආරක්ෂාව සහතික කරන්නේ කෙසේද

අපගේ ව්‍යාපෘතියට දෝෂ වාර්තා කළ හැක්කේ කුමන පිටුද යන්න අප පාලනය කරන ආකාරය ඔබ දැක ඇති වූ දමිල්වානි බ්රිතාන්යයෙන්; උපකාරයෙන් dsn වාර්තා. ගැටලුව වන්නේ ඔබේ පිටුවේ මූල කේතය බලන ඕනෑම කෙනෙකුට ආදානය දැකිය හැකි වීමයි.

මෙය වළක්වා ගැනීම සඳහා, අපගේ ව්‍යාපෘතියට දෝෂ වාර්තා ඉදිරිපත් කළ හැකි වසම් ගණන සීමා කළ යුතුය. මෙම උදාහරණයේදී අපි භාවිතා කළෙමු දේශීයව (දේශීය සත්කාරක). මෙම විකල්පය සැකසුම් පටිත්තෙහි වින්‍යාස කර ඇත වූ දමිල්වානි බ්රිතාන්යයෙන්- ව්යාපෘතිය, සෙන්ට්රි ව්යාපෘති සැකසීම.

නිකුත් කරයි

භාවිතා කරන ආකාරය ගැන ඔබ සිතන්නේ නම් වූ දමිල්වානි බ්රිතාන්යයෙන් අපගේ යෙදුමේ විවිධ වෙනස්කම් වලදී, අනුවාද අංකයක් සමඟ දෝෂ සලකුණු කරන යම් යාන්ත්‍රණයක් අපට අවශ්‍ය වේ.

සියල්ලට පසු, අප විසින් නිවැරදි කරන ලද දෝෂය නැවත උත්පතන වීමට අපට අවශ්‍ය නැත, සහ අපි නිවැරදි කළ දේ ක්‍රියා නොකළ බව අපි සිතමු. පරිශීලකයා යෙදුමේ පැරණි, හැඹිලිගත අනුවාදයක් දියත් කිරීම ද විය හැකිය.

ගැටළුව විසඳීම සඳහා, ඔබ හැඳුනුම්කාරකය ඇතුළත් කළ යුතුය මුදා හැරීම (අනුවාද) ආරම්භයේදී වූ දමිල්වානි බ්රිතාන්යයෙන්.

වැනිලා/index.html

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

මෙයින් පසු, සියලුම නව දෝෂ ලෙස සලකුණු කරනු ලැබේ මුදා හැරීම (0.1.0), එනම්, ඔවුන් කේතයේ නිවැරදි අනුවාදයට බැඳී ඇත.

Примечания:

අපි නිකුතු භාවිතා කිරීමට සරල ක්රමයක් සොයාගෙන ඇත
Sentry ඔබට වැඩිපුර භාවිතා කිරීමට ඉඩ සලසයි සංකීර්ණයි ඔවුන්ගේ භාවිතය, සමීපව සම්බන්ධ වේ GitHub. මෙම කාර්යය මඟින් යම් යම් මෙහෙයුම් සිදු කිරීමට පෙර දෝෂ නිරීක්ෂණය කිරීමට හැකි වේ.

PS දෙවෙනි කොටස දිග වැඩි නිසා වෙනම පෝස්ට් එකකින්.

PS Telegram චැට් Sentry https://t.me/sentry_ru

PS මෙය පෝස්ට් එකේ පරිවර්තනයක් බව සඳහන් කිරීමට මට අමතක විය https://codeburst.io/sentry-error-reporting-by-example-part-1-999b2df11556

මූලාශ්රය: www.habr.com

ජාවාස්ක්‍රිප්ට් වලින් ලියන ලද ඉදිරිපස-අවසාන යෙදුම්වල සෙන්ට්‍රි සමඟ අධීක්ෂණ දෝෂ: 1 කොටස

අදහස් එක් කරන්න

ජාවාස්ක්‍රිප්ට් වලින් ලියන ලද ඉදිරිපස-අවසාන යෙදුම්වල සෙන්ට්‍රි සමඟ අධීක්ෂණ දෝෂ: 1 කොටස

අදහස් එක් කරන්න ඊ-මේල් මගින් පිලිතුරු දෙන්න අවලංගු

අදහස් එක් කරන්න