Zolakwa Zoyang'anira ndi Sentry in Front-End Application Zolembedwa mu JavaScript: Gawo 1

utumiki Sentry limakupatsani mwayi wowunika patali nsikidzi pamapulogalamu akutsogolo olembedwamo JavaScript.

Zolakwa Zoyang'anira ndi Sentry in Front-End Application Zolembedwa mu JavaScript: Gawo 1

Kuyesa kukonza zovuta pamapulogalamu akutsogolo JavaScript zitha kukhala zachinyengo chifukwa zimachokera mumsakatuli wa ogwiritsa ntchito, omwe nthawi zambiri mulibe mwayi wopeza. Komabe, Sentry zimapangitsa kuti zitheke kuyang'anira nsikidzi patali.

ndi Mukhoza kukopera mayankho omwe takambirana m'nkhaniyi.

Zomwe zimafunika

Ngati mukufuna kugwiritsa ntchito zitsanzo izi, muyenera:

  • Node.js: Chida chotukula cholemera chomwe sichili gawo la pulogalamuyi. Tidatsitsa mtundu waposachedwa wa LTS (8.12.0)
  • Sentry: Kaya Akaunti mu Sentry service (mutha kujambula mpaka 10 nsikidzi pamwezi kwaulere) kapena Sentry yakomweko - https://github.com/getsentry/onpremise

Kuyika pa seva yanu

Kuti muyike Sentry On-Premise pa seva yanu mutha kupita m'njira ziwiri

  1. Pangani rpm ndikuyiyika - https://habr.com/ru/post/500632/

  2. Gwiritsani ntchito installer yovomerezeka:

    Π£ΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Π½Π° сСрвСр docker ΠΈ docker-compose
    git clone https://github.com/getsentry/onpremise.git
    ./install.sh

Kugwiritsa Ntchito Standard

Kuti muyambe, onjezani yatsopano kuchokera patsamba lantchito Sentry- pulojekiti yofunsira. Mukasankha chilankhulo chomwe mukufuna, mudzalandira zolemba zofananira. Kwa ife tinasankha JavaScript.

Chitsanzo choyamba ndi muyezo JavaScript. Pali mabatani awiri apa: "Moni" (Moni) ndi "Cholakwika" (Zolakwika).

Mukamaliza dinani batani "Moni", chophimba chidzayambiranso ndi chipika yesani adzazindikira ndikugwira cholakwikacho. Pambuyo pa cholakwikacho "kugwidwa", lipoti lolakwika limatumizidwa pamanja Sentry.

Batani la "Zolakwika" limakupatsani mwayi wozindikira cholakwika.

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

Mfundo:

  • Sentry imayikidwa kuchokera ku CDN ndikuwululidwa ngati kusintha kwapadziko lonse lapansi
  • M'mbuyomu tidayambitsa Sentry mu JavaScript yathu

Kuti tiyese chitsanzo ichi, titha kugwiritsa ntchito nsanja ya static web server Node.js: http seva. Pitani ku foda yomwe fayilo imasungidwa index.html, ndikulowetsa (njira yolepheretsa caching) mzere wotsatira kuti mutsegule adilesi mu msakatuli http://localhost:8080.

Momwe ziphuphu zakumaso zimawonekera

Choyamba dinani batani "Moni".

Zolakwa Zoyang'anira ndi Sentry in Front-End Application Zolembedwa mu JavaScript: Gawo 1

Tidagwira cholakwika, chifukwa chake sichingatulutse cholumikizira, chifukwa chake sichimayang'aniridwa mu console. Komabe, popeza timatumiza ku Sentry nenani cholakwika pamanja, tiwona uthenga pa akaunti yanu.

Zolakwa Zoyang'anira ndi Sentry in Front-End Application Zolembedwa mu JavaScript: Gawo 1

Mfundo:

  • Titha kutsata mzere (24) womwe uli ndi cholakwikacho
  • Kuphatikiza apo, njira ya breadcrumb ikuwonetsa zochitika za msakatuli zomwe zidayambitsa cholakwika.

Momwe ziphuphu zosagwidwa zimawonekera

Dinani batani "Cholakwika".

Zolakwa Zoyang'anira ndi Sentry in Front-End Application Zolembedwa mu JavaScript: Gawo 1

Vutoli limawombera foniyo ndipo chifukwa chake uthenga wolakwika umawonetsedwa pa console. Pambuyo pake, Sentry imayang'anitsitsa cholakwikacho, popanda zina zowonjezera.

Zolakwa Zoyang'anira ndi Sentry in Front-End Application Zolembedwa mu JavaScript: Gawo 1

Mfundo:

  • Titha kuwona mzere (30) cholakwikacho chatayika
  • Palibe njira ya breadcrumb (sindikumvetsa chifukwa chake)

Momwe mungawonetsere chitetezo cha polojekiti

Mwina mwawona momwe timawongolera masamba omwe anganene zolakwika ku polojekiti yathu Sentry; ndi chithandizo dsn zolemba. Vuto ndiloti zolowetsazo zimatha kuwonedwa ndi aliyense amene amawona magwero a tsamba lanu.

Kuti tipewe izi, tiyenera kuchepetsa kuchuluka kwa madambwe omwe angatumize malipoti olakwika ku polojekiti yathu. Mu chitsanzo ichi tinagwiritsa ntchito localhost (wokhala nawo m'deralo). Izi zimakhazikitsidwa pa tabu ya zoikamo Sentry- polojekiti, Sentry Project Setting.

Zolakwa Zoyang'anira ndi Sentry in Front-End Application Zolembedwa mu JavaScript: Gawo 1

Zomasulidwa

Ngati mukuganiza za momwe mungagwiritsire ntchito Sentry m'mitundu yosiyanasiyana yamagwiritsidwe athu, ndiye kuti timafunikira mtundu wina wamakina omwe angalembe zolakwika ndi nambala yamtundu.

Kupatula apo, sitikufuna kuti cholakwika chomwe tidakonza chibwerenso, ndipo tikuganiza kuti zomwe tidakonza sizinagwire ntchito. Zitha kukhalanso kuti wogwiritsa ntchito adayambitsa pulogalamu yakale, yosungidwa.

Kuti muthane ndi vutoli, muyenera kuyika chizindikiritso kumasulidwa (mabaibulo) poyambira Sentry.

vanila/index.html

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

Pambuyo pake, zolakwika zonse zatsopano zidzalembedwa ngati kutulutsa (0.1.0), ndiko kuti, iwo adzamangirizidwa ku mtundu wolondola wa code.

Zolakwa Zoyang'anira ndi Sentry in Front-End Application Zolembedwa mu JavaScript: Gawo 1

Mfundo:

  • Tapeza njira yosavuta yogwiritsira ntchito zotulutsidwa
  • Sentry imakupatsani mwayi wogwiritsa ntchito zambiri zovuta awo ntchito, zomwe zimagwirizana kwambiri ndi GitHub. Izi zimapangitsa kuti zitheke kutsata nsikidzi musanagwire ntchito zina.

PS Gawo lachiwiri ndi lalitali, kotero lidzakhala mu post post.

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

PS Ndinayiwala kusonyeza kuti uku ndi kumasulira kwa positi https://codeburst.io/sentry-error-reporting-by-example-part-1-999b2df11556

Source: www.habr.com

Kuwonjezera ndemanga