🥇Մոնիտորինգի սխալները Sentry-ի միջոցով JavaScript-ով գրված առջևի հավելվածներում. Մաս 1

Ծառայություն Ժամապահ թույլ է տալիս հեռակա կարգով վերահսկել ֆրոնտային հավելվածների սխալները JavaScript.

Փորձում ենք շտկել առջևի հավելվածների խնդիրները JavaScript կարող է բարդ լինել, քանի որ դրանք ծագում են օգտատիրոջ զննարկիչից, որը դուք հաճախ մուտք չունեք: Այնուամենայնիվ, Ժամապահ հնարավորություն է տալիս հեռակա վերահսկել սխալները:

Այստեղ Դուք կարող եք ներբեռնել այս հոդվածում քննարկված լուծումները:

Այն, ինչ անհրաժեշտ է

Եթե ցանկանում եք օգտագործել այս օրինակները, ձեզ անհրաժեշտ կլինի.

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

Ստանդարտ օգտագործում

Սկսելու համար ավելացրեք նորը ծառայության կայքից Ժամապահ- հայտի նախագիծ: Ցանկալի լեզուն ընտրելուց հետո դուք կստանաք համապատասխան փաստաթղթեր: Մեր դեպքում մենք ընտրեցինք JavaScript.

Առաջին օրինակը ստանդարտ է JavaScript. Այստեղ երկու կոճակ կա. "Բարեւ Ձեզ" (Բարև) և «Սխալ» (Սխալ):

Կոճակը սեղմելուց հետո "Բարեւ Ձեզ", էկրանը կվերագործարկվի և արգելափակվի փորձել կհայտնաբերի և կբռնի սխալը: Սխալը «բռնվելուց» հետո սխալի մասին հաշվետվությունը ձեռքով ուղարկվում է ծառայությանը Ժամապահ.

«Սխալ» կոճակը թույլ է տալիս հեշտությամբ հայտնաբերել սխալը:

վանիլ/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-ից և ցուցադրվում է որպես գլոբալ փոփոխական
Մի փոքր առաջ մենք գործարկեցինք Sentry-ն մեր JavaScript-ում

Այս օրինակը փորձարկելու համար մենք կարող ենք օգտագործել ստատիկ վեբ սերվերի հարթակ Node.js: http սերվեր. Գնացեք այն թղթապանակը, որտեղ պահվում է ֆայլը index.html, և մուտքագրեք (տարբերակն անջատում է քեշավորումը) հետևյալ տողը՝ հասցեն բրաուզերում բացելու համար http://localhost:8080.

Ինչպես են ցուցադրվում բռնված սխալները

Նախ սեղմեք կոճակը "Բարեւ Ձեզ".

Մենք վրիպակ ենք հայտնաբերել, ուստի այն չի հայտնվի զանգերի կույտում և, հետևաբար, չի վերահսկվում վահանակում: Այնուամենայնիվ, քանի որ մենք ուղարկում ենք Ժամապահ Զեկուցեք սխալի մասին ձեռքով, մենք դրա մասին հաղորդագրություն կտեսնենք ձեր հաշվում:

Ծանուցում:

Մենք կարող ենք հետևել, թե որ տողում (24) կա սխալ
Բացի այդ, breadcrumb արահետը ցուցադրում է բրաուզերի գործողությունները, որոնք հանգեցրել են սխալի:

Ինչպես են ցուցադրվում չբացահայտված սխալները

Սեղմեք կոճակը «Սխալ»:

Սխալը փուչիկներով բարձրացնում է զանգերի կույտը և, հետևաբար, վահանի վրա ցուցադրվում է սխալի հաղորդագրություն: Դրանից հետո Sentry-ն ավտոմատ կերպով վերահսկում է սխալը՝ առանց որևէ լրացուցիչ գործողությունների:

Ծանուցում:

Մենք կարող ենք տեսնել, թե որ տողում (30) է սխալը կորել
Հացահատիկի հետք չկա (ես այնքան էլ չեմ հասկանում, թե ինչու)

Ինչպես ապահովել նախագծի անվտանգությունը

Դուք կարող եք նկատել, թե ինչպես ենք մենք վերահսկում, թե որ էջերը կարող են սխալներ հաղորդել մեր նախագծին Ժամապահ; օգնությամբ dsn գրառումներ. Խնդիրն այն է, որ մուտքագրումը կարող է տեսնել յուրաքանչյուրը, ով դիտում է ձեր էջի սկզբնական կոդը:

Սրանից խուսափելու համար մենք պետք է սահմանափակենք տիրույթների քանակը, որոնք կարող են սխալի մասին հաշվետվություններ ներկայացնել մեր նախագծին: Այս օրինակում մենք օգտագործեցինք localhost (տեղական հյուրընկալող): Այս տարբերակը կազմաձևված է կարգավորումների ներդիրում Ժամապահ- նախագիծ, Sentry նախագծի կարգավորում.

Թողարկումներ

Եթե մտածում եք, թե ինչպես օգտագործել Ժամապահ մեր հավելվածի տարբեր տարբերակներում, ապա մեզ անհրաժեշտ է ինչ-որ մեխանիզմ, որը կնշի սխալները տարբերակի համարով:

Ի վերջո, մենք չենք ուզում, որ մեր ուղղած սխալը նորից հայտնվի, և կարծում ենք, որ այն, ինչ շտկել ենք, չի աշխատել: Հնարավոր է նաև, որ օգտատերը գործարկել է հավելվածի ավելի հին, քեշավորված տարբերակը:

Խնդիրը լուծելու համար անհրաժեշտ է մուտքագրել նույնացուցիչը արձակել (տարբերակներ) գործարկման ժամանակ Ժամապահ.

վանիլ/index.html

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

Դրանից հետո բոլոր նոր սխալները կնշվեն որպես թողարկում (0.1.0), այսինքն՝ դրանք կկապվեն կոդի ճիշտ տարբերակին։

Ծանուցում:

Մենք պարզել ենք թողարկումներն օգտագործելու պարզ միջոց
Sentry-ն թույլ է տալիս ավելի շատ օգտագործել բարդ իրենց օգտագործումը, որը սերտորեն կապված է GitHub. Այս գործառույթը հնարավորություն է տալիս հետևել սխալներին՝ նախքան որոշակի գործողություններ կատարելը:

Հ.Գ Երկրորդ մասն ավելի երկար է, ուստի այն կլինի առանձին գրառման մեջ։

PS Telegram chat Sentry https://t.me/sentry_ru

Հ.Գ Մոռացա նշել, որ սա գրառման թարգմանությունն է https://codeburst.io/sentry-error-reporting-by-example-part-1-999b2df11556

Source: www.habr.com

Մոնիտորինգի սխալներ Sentry-ով JavaScript-ով գրված Front-End հավելվածներում. Մաս 1

Добавить комментарий Չեղարկել պատասխանել