🥇JavaScript-en idatzitako frontend aplikazioetan Sentry erabiliz erroreak monitorizatzea: 1. zatia

Zerbitzua Edukien idatzitako frontend aplikazioetako akatsak urrunetik kontrolatzeko aukera ematen du Ikusteko Javascript-a.

Frontend aplikazioetan arazoak konpontzen saiatzen ari da Ikusteko Javascript-a delikatua izan daiteke, erabiltzailearen nabigatzailean sortzen direlako, askotan sarbiderik ez duzuna. Hala ere, Edukien akatsak urrunetik kontrolatzea ahalbidetzen du.

Hemen Artikulu honetan eztabaidatutako irtenbideak deskargatu ditzakezu.

Beharrezkoa dena

Adibide hauek erabili nahi badituzu, beharko duzu:

Node.js: Ezaugarri ugariko garapen tresna bat, aplikazioaren parte ez dena. LTS azken bertsioa deskargatu dugu (8.12.0)
Edukien: Sentry zerbitzuko kontu bat (hilean 10 mila akats graba ditzakezu doan) edo instalatutako Sentry lokal bat - https://github.com/getsentry/onpremise

Instalazioa zure zerbitzarian

Sentry On-Premise zure zerbitzarian instalatzeko 2 modutara joan zaitezke

Eraiki rpm eta instalatu - https://habr.com/ru/post/500632/

Erabili instalatzaile ofiziala:

Установить на сервер docker и docker-compose
git clone https://github.com/getsentry/onpremise.git
./install.sh

Erabilera estandarra

Hasteko, gehitu berri bat zerbitzuaren webgunetik Edukien-Aplikaziorako proiektua. Nahi den hizkuntza aukeratu ondoren, dagokion dokumentazioa jasoko duzu. Gure kasuan aukeratu dugu Ikusteko Javascript-a.

Lehenengo adibidea estandarra da Ikusteko Javascript-a. Hemen bi botoi daude: "Kaixo" (Kaixo) eta "Errorea" (Errorea).

botoian klik egin ondoren "Kaixo", pantaila berrabiaraziko da eta blokeoa saiatu akatsa detektatu eta harrapatuko du. Akatsa "harrapatu" ondoren, errore-txostena eskuz bidaltzen da zerbitzura Edukien.

"Errorea" botoiak akats bat erraz detektatzeko aukera ematen du.

bainila/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>

Oharrak:

Sentry CDN batetik instalatzen da eta aldagai global gisa azaltzen da
Apur bat lehenago Sentry abiarazi genuen gure JavaScript-en

Adibide hau probatzeko, web zerbitzari plataforma estatiko bat erabil dezakegu Node.js: http zerbitzaria. Joan fitxategia gordetzen den karpetara index.html, eta idatzi (cachea desgaitzen duen aukera) hurrengo lerroa helbidea arakatzailean irekitzeko http://localhost:8080.

Harrapatutako akatsak nola bistaratzen diren

Lehenengo egin klik botoian "Kaixo".

Akats bat atzeman dugu, beraz, ez da deien pila agertuko eta, beraz, ez da kontsolan kontrolatzen. Hala ere, bidaltzen dugunez Edukien akats bat eskuz jakinarazi, horri buruzko mezu bat ikusiko dugu zure kontuan.

Oharrak:

Akatsa zein lerrotan dagoen (24) jarrai dezakegu
Gainera, ogi-biribilbideak errorea eragin duten arakatzailearen ekintzak erakusten ditu.

Harrapatu gabeko akatsak nola bistaratzen diren

Egin klik botoian "Errorea".

Akatsak dei-pilean gora egiten du eta horrela errore-mezu bat bistaratzen da kontsolan. Horren ondoren, Sentry-k automatikoki kontrolatzen du akatsa, ekintza gehigarririk gabe.

Oharrak:

Akatsa zein lerrotan (30) galtzen den ikus dezakegu
Ez dago ogi birrindurik (ez dut ondo ulertzen zergatik)

Nola bermatu proiektuaren segurtasuna

Baliteke gure proiektuari erroreen berri eman diezaiokeen orriek kontrolatzen dugun moduaz ohartuko zinen Edukien; laguntzarekin DSN erregistroak. Arazoa da sarrera zure orriaren iturburu kodea ikusten duen edonork ikus dezakeela.

Hori ekiditeko, gure proiektuari errore-txostenak bidal ditzaketen domeinu kopurua mugatu behar dugu. Adibide honetan erabili dugu localhost (tokiko ostalaria). Aukera hau ezarpenen fitxan konfiguratuta dago Edukien-proiektua, Sentry Proiektuaren ezarpena.

Argitalpenak

Nola erabili pentsatzen baduzu Edukien gure aplikazioaren aldaera desberdinetan, orduan akatsak bertsio-zenbaki batekin markatuko dituen mekanismoren bat behar dugu.

Azken finean, ez dugu nahi konpondu dugun akatsa berriro ager dadin, eta uste dugu konpondutakoak ez duela funtzionatu. Baliteke erabiltzaileak aplikazioaren cachean gordetako bertsio zaharrago bat abiarazi izana ere.

Arazoa konpontzeko, identifikatzailea sartu behar duzu oharra (bertsioak) abiaraztean Edukien.

bainila/index.html

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

Horren ondoren, akats berri guztiak gisa markatuko dira oharra (0.1.0), hau da, kodearen bertsio zuzenari lotuta egongo dira.

Oharrak:

Argitalpenak erabiltzeko modu erraz bat asmatu dugu
Sentry-k gehiago erabiltzeko aukera ematen du konplexua bere erabilera, estuki lotuta dagoena GitHub. Funtzio honek akatsen jarraipena egitea ahalbidetzen du eragiketa batzuk egin aurretik.

PS Bigarren zatia luzeagoa da, beraz aparteko mezu batean egongo da.

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

PS Hau mezuaren itzulpena dela adieraztea ahaztu zait https://codeburst.io/sentry-error-reporting-by-example-part-1-999b2df11556

Iturria: www.habr.com

JavaScript-en idatzitako Front-end aplikazioetan Sentry-rekin akatsak kontrolatzea: 1. zatia

Gehitu iruzkin berria Idatzi