Liphoso tsa ho beha leihlo ka Sentry in Front-End Application E Ngotsoeng ka JavaScript: Karolo ea 1

tšebeletso ea Sentry e o lumella ho beha leihlo litšitšili u le hole lits'ebetsong tse ngotsoeng ka pele Javascript.

Liphoso tsa ho beha leihlo ka Sentry in Front-End Application E Ngotsoeng ka JavaScript: Karolo ea 1

Ho leka ho lokisa mathata ka pele-pele ditshebediso ka Javascript e ka ba ntho e qhekellang hobane e tsoa ho sebatli sa mosebelisi, seo hangata u sa khoneng ho se fumana. Leha ho le joalo, Sentry e etsa hore ho khonehe ho hlokomela liphoso u le hole.

ke U ka khoasolla litharollo tse tšohliloeng sehloohong sena.

Se hlokahalang

Haeba u batla ho sebelisa mohlala ona, u tla hloka:

  • Node.js: Sesebelisoa sa ntlafatso se nang le likarolo tse ngata seo e seng karolo ea ts'ebeliso. Re khoasolla mofuta oa morao-rao oa LTS (8.12.0)
  • Sentry: Ekaba Ak'haonte ho Ts'ebeletso ea Sentry (o ka rekota litšitšili tse fihlang ho likete tse 10 ka khoeli mahala) kapa Sentry ea lehae e kentsoeng - https://github.com/getsentry/onpremise

Ho kenya ho seva sa hau

Ho kenya Sentry On-Premise ho seva sa hau u ka tsamaea ka litsela tse peli

  1. Haha rpm 'me u e kenye - https://habr.com/ru/post/500632/

  2. Sebelisa setsi sa semmuso:

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

Tšebeliso e tloaelehileng

Ho qala, eketsa e ncha ho tsoa webosaeteng ea lits'ebeletso Sentry-morero bakeng sa kopo. Ka mor'a ho khetha puo eo ue batlang, u tla fumana litokomane tse lumellanang. Tabeng ea rona re ile ra khetha Javascript.

Mohlala oa pele ke o tloaelehileng Javascript. Ho na le likonopo tse peli mona: "Lumela" (Dumela) le "Phoso" (Phoso).

Ka mor'a hore u tobetse konopo "Lumela", skrine e tla qala hape 'me thibela leka e tla lemoha le ho tšoara bothata. Ka mor'a hore phoso e "tšoaroe", tlaleho ea phoso e romelloa ka letsoho tšebeletsong Sentry.

Konopo ea "Phoso" e u lumella ho bona phoso habonolo.

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>

Lintlha:

  • Sentry e kentsoe ho tsoa ho CDN mme e pepesitsoe e le phetoho ea lefats'e
  • Nakoana pejana re ile ra tsebisa Sentry ho JavaScript ea rona

Ho leka mohlala ona, re ka sebelisa sethala sa marang-rang se tsitsitseng Node.js: http seva. Eya foldareng moo faele e bolokiloeng teng index.html, ebe o kenya (khetho ka disables caching) mola o latelang ho bula aterese ho sebatli http://localhost:8080.

Kamoo litšitšili li hlahang kateng

Pele o tobetsa konopo "Lumela".

Liphoso tsa ho beha leihlo ka Sentry in Front-End Application E Ngotsoeng ka JavaScript: Karolo ea 1

Re tšoere kokoanyana, ka hona e ke ke ea hlahisa sethala sa mehala, ka hona ha e behoe leihlo ho khomphutha. Leha ho le joalo, kaha re romela ho Sentry tlaleha bothata ka letsoho, re tla bona molaetsa ka eona akhaonteng ea hau.

Liphoso tsa ho beha leihlo ka Sentry in Front-End Application E Ngotsoeng ka JavaScript: Karolo ea 1

Lintlha:

  • Re ka sala morao hore na ke mola ofe (24) o nang le bothata
  • Ntle le moo, trail ea breadcrumb e bonts'a liketso tsa sebatli tse lebisitseng phosong.

Kamoo litšitšili tse sa lebelloang li hlahang kateng

Tobetsa konopo "Phoso".

Liphoso tsa ho beha leihlo ka Sentry in Front-End Application E Ngotsoeng ka JavaScript: Karolo ea 1

Kotsi e phahamisa stack ea mohala mme ka hona molaetsa oa phoso o hlahisoa ho console. Kamora sena, Sentry e lekola bug ka bo eona, ntle le liketso tse ling.

Liphoso tsa ho beha leihlo ka Sentry in Front-End Application E Ngotsoeng ka JavaScript: Karolo ea 1

Lintlha:

  • Re ka bona hore na phoso e lahlehile ka mola ofe (30).
  • Ha ho na tsela ea breadcrumb (ha ke utloisise hantle hore na hobaneng)

Mokhoa oa ho netefatsa ts'ireletso ea morero

Mohlomong u hlokometse tsela eo re laolang hore na ke maqephe afe a ka tlalehang liphoso morerong oa rona Sentry; ka thuso dsn litlaleho. Bothata ke hore ho kenya letsoho ho ka bonoa ke mang kapa mang ea bonang khoutu ea mohloli oa leqephe la hau.

Ho qoba sena, re hloka ho fokotsa palo ea libaka tse ka fanang ka litlaleho tsa liphoso morerong oa rona. Mohlala ona re o sebelisitse Localhost (moamoheli oa lehae). Khetho ena e hlophisitsoe ho li-setting tab Sentry- morero, Sentry Project Setting.

Liphoso tsa ho beha leihlo ka Sentry in Front-End Application E Ngotsoeng ka JavaScript: Karolo ea 1

Litokollo

Haeba u nahana ka mokhoa oa ho sebelisa Sentry ka mefuta e fapaneng ea ts'ebeliso ea rona, joale re hloka mofuta o mong oa mochini o tla tšoaea liphoso ka nomoro ea mofuta.

Ntle le moo, ha re batle hore phoso eo re e lokisitseng e hlahe hape, 'me re nahana hore seo re se lokisitseng ha sea sebetsa. E kanna eaba mosebelisi o hlahisitse mofuta oa khale, o bolokiloeng oa ts'ebeliso.

Ho rarolla bothata, o hloka ho kenya ID lokolla (liphetolelo) qalong Sentry.

vanilla/index.html

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

Kamora sena, liphoso tsohle tse ncha li tla tšoauoa joalo ka tokollo (0.1.0), ke hore, li tla tlamelloa ho mofuta o nepahetseng oa khoutu.

Liphoso tsa ho beha leihlo ka Sentry in Front-End Application E Ngotsoeng ka JavaScript: Karolo ea 1

Lintlha:

  • Re fumane mokhoa o bonolo oa ho sebelisa lingoliloeng
  • Sentry e u lumella ho sebelisa ho feta e rarahaneng bona tshebediso ya, e amanang haufi-ufi le GitHub. Ts'ebetso ena e etsa hore ho khonehe ho latela litšitšili pele u etsa ts'ebetso e itseng.

PS Karolo ea bobeli e telele, kahoo e tla ba posong e fapaneng.

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

PS Ke lebetse ho bontša hore ena ke phetolelo ea poso https://codeburst.io/sentry-error-reporting-by-example-part-1-999b2df11556

Source: www.habr.com

Eketsa ka tlhaloso