Kurakurai na Kulawa tare da Sentry a Aikace-aikace na Gaba-Ƙarshen An Rubuta cikin JavaScript: Sashe na 1

sabis Sentry yana ba ku damar sa ido kan kwari a cikin aikace-aikacen gaba-gaba da aka rubuta a ciki JavaScript.

Kurakurai na Kulawa tare da Sentry a Aikace-aikace na Gaba-Ƙarshen An Rubuta cikin JavaScript: Sashe na 1

Ƙoƙarin gyara matsaloli a aikace-aikacen gaba-gaba a kunne JavaScript na iya zama da wayo saboda sun samo asali ne daga burauzar mai amfani, wanda galibi ba ku da damar yin amfani da su. Duk da haka, Sentry yana ba da damar saka idanu kan kwari daga nesa.

Yana da Kuna iya saukar da mafita da aka tattauna a wannan labarin.

Abin da ake buƙata

Idan kuna son amfani da waɗannan misalan, kuna buƙatar:

  • Node.js: Kayan aiki mai wadatar haɓakawa wanda baya cikin aikace-aikacen. Mun zazzage sabuwar sigar LTS (8.12.0)
  • Sentry: Ko dai wani asusu a cikin sabis na Sentry (zaku iya yin rikodin har zuwa kwari dubu 10 a kowane wata kyauta) ko kuma an shigar da Sentry na gida - https://github.com/getsentry/onpremise

Shigarwa akan sabar ku

Don shigar Sentry On-Premise akan sabar ku zaku iya zuwa ta hanyoyi 2

  1. Gina rpm kuma shigar dasu - https://habr.com/ru/post/500632/

  2. Yi amfani da mai sakawa na hukuma:

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

Daidaitaccen Amfani

Don farawa, ƙara sabo daga gidan yanar gizon sabis Sentry-project don aikace-aikacen. Bayan zaɓar yaren da ake so, zaku karɓi takaddun da suka dace. A wajenmu mun zaba JavaScript.

Misali na farko shine ma'auni JavaScript. Akwai maɓalli guda biyu a nan: "Barka dai" (Hello) kuma "Kuskure" (Kuskure).

Bayan kun danna maballin "Barka dai", allon zai sake yi da toshe kokarin zai gano kuma ya kama kwaro. Bayan an “kama” kwaro, ana aika rahoton kuskuren da hannu zuwa sabis ɗin Sentry.

Maɓallin "Kuskure" yana ba ku damar gano kwaro cikin sauƙi.

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>

Bayanan kula:

  • An shigar da Sentry daga CDN kuma an fallasa su azaman mai canzawa na duniya
  • A baya kadan mun ƙaddamar da Sentry a cikin JavaScript

Don gwada wannan misalin, zamu iya amfani da dandamalin sabar gidan yanar gizo a tsaye Node.js: http uwar garken. Jeka babban fayil inda aka adana fayil ɗin index.html, kuma shigar da (zaɓi tare da hana caching) layin da ke gaba don buɗe adireshin a cikin burauzar http://localhost:8080.

Yadda ake nuna kwari da aka kama

Da farko danna maɓallin "Barka dai".

Kurakurai na Kulawa tare da Sentry a Aikace-aikace na Gaba-Ƙarshen An Rubuta cikin JavaScript: Sashe na 1

Mun kama kwaro, don haka ba zai tashi tarin tarin kira ba, don haka ba a kula da shi a cikin na'ura wasan bidiyo. Duk da haka, tunda mun aika zuwa Sentry bayar da rahoton bug da hannu, za mu ga saƙo game da shi a cikin asusun ku.

Kurakurai na Kulawa tare da Sentry a Aikace-aikace na Gaba-Ƙarshen An Rubuta cikin JavaScript: Sashe na 1

Bayanan kula:

  • Za mu iya gano wane layi (24) ya ƙunshi kwaro
  • Bugu da kari, hanyar biredi yana nuna ayyukan burauza wanda ya haifar da kuskure.

Yadda ake nuna kwaroron da ba a kama su ba

Danna maɓallin "Kuskure".

Kurakurai na Kulawa tare da Sentry a Aikace-aikace na Gaba-Ƙarshen An Rubuta cikin JavaScript: Sashe na 1

Kwaro yana kumfa tarin kira don haka ana nuna saƙon kuskure akan na'urar bidiyo. Bayan wannan, Sentry yana sa ido kan kwaro ta atomatik, ba tare da ƙarin ayyuka ba.

Kurakurai na Kulawa tare da Sentry a Aikace-aikace na Gaba-Ƙarshen An Rubuta cikin JavaScript: Sashe na 1

Bayanan kula:

  • Zamu iya gani a cikin wane layi (30) bug ɗin ya ɓace
  • Babu hanyar biredi (ban fahimci dalilin da ya sa ba)

Yadda ake tabbatar da tsaron aikin

Wataƙila kun lura da yadda muke sarrafa shafuka waɗanda za su iya ba da rahoton kurakurai zuwa aikinmu Sentry; tare da taimako dsn rubuce-rubuce. Matsalar ita ce duk wanda ya kalli lambar tushe na shafinku zai iya ganin shigarwar.

Don guje wa wannan, muna buƙatar iyakance adadin wuraren da za su iya ƙaddamar da rahotannin kuskure zuwa aikinmu. A cikin wannan misali mun yi amfani da Localhost (mai masaukin baki). An saita wannan zaɓi a cikin saitunan shafin Sentry-aiki, Saitin Ayyukan Sentry.

Kurakurai na Kulawa tare da Sentry a Aikace-aikace na Gaba-Ƙarshen An Rubuta cikin JavaScript: Sashe na 1

Fitowa

Idan kuna tunanin yadda ake amfani da shi Sentry a cikin nau'ikan aikace-aikacen mu daban-daban, to muna buƙatar wani nau'in tsari wanda zai sanya kurakurai tare da lambar sigar.

Bayan haka, ba ma son kwaron da muka gyara ya sake tashi, kuma muna tunanin abin da muka gyara bai yi aiki ba. Hakanan yana iya zama mai amfani ya ƙaddamar da tsohuwar sigar aikace-aikacen da aka adana.

Don magance matsalar, kuna buƙatar shigar da mai ganowa sakin (versions) a farawa Sentry.

vanilla/index.html

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

Bayan wannan, duk sabbin kurakurai za a yiwa alama fitowa (0.1.0), wato, za a ɗaure su da daidaitaccen sigar lambar.

Kurakurai na Kulawa tare da Sentry a Aikace-aikace na Gaba-Ƙarshen An Rubuta cikin JavaScript: Sashe na 1

Bayanan kula:

  • Mun gano hanya mai sauƙi don amfani da sakewa
  • Sentry yana ba ku damar amfani da ƙari hadaddun su da yin amfani da, wanda ke da alaƙa ta kut-da-kut da GitHub. Wannan aikin yana ba da damar gano kwari kafin yin wasu ayyuka.

PS Sashe na biyu ya fi tsayi, don haka zai kasance a cikin wani matsayi daban.

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

PS Na manta don nuna cewa wannan fassarar post ce https://codeburst.io/sentry-error-reporting-by-example-part-1-999b2df11556

source: www.habr.com

Add a comment