🥇Monitoring errors using Sentry in front-end applications written in JavaScript: Part 1

layanan Sentry ngijini sampeyan kanggo ngawasi kewan omo saka adoh ing aplikasi ngarep-mburi ditulis ing JavaScript.

Nyoba kanggo ndandani masalah ing aplikasi ngarep-mburi ing JavaScript bisa dadi angel amarga asale saka browser pangguna, sing asring sampeyan ora duwe akses. Nanging, Sentry ndadekake iku bisa kanggo mbatalake ngawasi kewan omo.

iku Sampeyan bisa ndownload solusi sing dibahas ing artikel iki.

Apa prelu

Yen sampeyan pengin nggunakake conto iki, sampeyan kudu:

Node.js: Alat pangembangan sing sugih fitur sing dudu bagean saka aplikasi. Kita ndownload versi LTS paling anyar (8.12.0)
Sentry: Akun ing layanan Sentry (sampeyan bisa ngrekam nganti 10 ewu bug saben wulan kanthi gratis) utawa Sentry lokal sing diinstal - https://github.com/getsentry/onpremise

Instalasi ing server sampeyan

Kanggo nginstal Sentry On-Premise ing server sampeyan bisa nggunakake 2 cara

Mbangun rpm lan nginstal - https://habr.com/ru/post/500632/

Gunakake installer resmi:

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

Panggunaan standar

Kanggo miwiti, tambahake sing anyar saka situs web layanan Sentry-proyek kanggo aplikasi. Sawise milih basa sing dikarepake, sampeyan bakal nampa dokumentasi sing cocog. Ing kasus kita milih JavaScript.

Conto pisanan standar JavaScript. Ana rong tombol ing kene: "Halo" (Hello) lan "Kesalahan" (Kesalahan).

Sawise sampeyan klik tombol "Halo", layar bakal urip maneh lan pamblokiran nyoba bakal ndeteksi lan nyekel bug. Sawise bug "kejiret", laporan kesalahan dikirim kanthi manual menyang layanan kasebut Sentry.

Tombol "Error" ngidini sampeyan ndeteksi bug kanthi gampang.

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>

Cathetan:

Sentry diinstal saka CDN lan kapapar minangka variabel global
A little sadurungé kita dibukak Sentry ing JavaScript kita

Kanggo nyoba conto iki, kita bisa nggunakake platform server web statis Node.js: server http. Pindhah menyang folder ing ngendi file disimpen index.html, lan ketik (opsi karo mateni caching) baris ing ngisor iki kanggo mbukak alamat ing browser http://localhost:8080.

Carane kejiret kewan omo ditampilake

Pisanan klik tombol "Halo".

We kejiret bug, supaya ora pop munggah tumpukan telpon, lan mulane ora teliti ing console. Nanging, wiwit kita ngirim menyang Sentry laporan bug kanthi manual, kita bakal weruh pesen babagan ing akun.

Cathetan:

Kita bisa nglacak sing baris (24) ngemot bug
Kajaba iku, jejak breadcrumb nampilake tumindak browser sing nyebabake kesalahan kasebut.

Carane uncaught bug ditampilake

Klik tombol "Kesalahan".

Bug gelembung munggah tumpukan telpon lan kanthi mangkono pesen kesalahan ditampilake ing console. Sawise iki, Sentry kanthi otomatis ngawasi bug kasebut, tanpa tumindak tambahan.

Cathetan:

Kita bisa ndeleng ing baris kang (30) bug ilang
Ora ana jejak breadcrumb (aku ora ngerti kenapa)

Carane njamin keamanan project

Sampeyan bisa uga wis ngelingi cara kita ngontrol kaca sing bisa nglaporake kesalahan menyang proyek kita Sentry; karo bantuan dsn cathetan. Masalahe yaiku input bisa dideleng dening sapa wae sing ndeleng kode sumber kaca sampeyan.

Kanggo ngindhari iki, kita kudu mbatesi jumlah domain sing bisa ngirim laporan kesalahan menyang proyek kita. Ing conto iki kita digunakake localhost (host lokal). Opsi iki dikonfigurasi ing tab setelan Sentry-proyek, Setelan Proyek Sentry.

Rilis

Yen sampeyan mikir babagan carane nggunakake Sentry ing macem-macem variasi saka aplikasi kita, banjur kita kudu sawetara jinis mekanisme sing bakal menehi tandha kasalahan karo nomer versi.

Sawise kabeh, kita ora pengin bug sing didandani muncul maneh, lan kita mikir yen apa sing didandani ora bisa digunakake. Bisa uga pangguna ngluncurake versi aplikasi sing luwih lawas lan di-cache.

Kanggo ngatasi masalah, sampeyan kudu ngetik pengenal ngluncurake (versi) nalika wiwitan Sentry.

vanilla/index.html

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

Sawise iki, kabeh kesalahan anyar bakal ditandhani minangka release (0.1.0), yaiku, bakal disambungake menyang versi kode sing bener.

Cathetan:

Kita wis nemokake cara sing gampang kanggo nggunakake rilis
Sentry ngidini sampeyan nggunakake luwih akeh kompleks sing nggunakake, sing ana hubungane karo GitHub. Fungsi iki ndadekake iku bisa kanggo trek kewan omo sadurunge nindakake operasi tartamtu.

PS Bagian kapindho luwih dawa, mula bakal ana ing kiriman sing kapisah.

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

PS Aku lali kanggo nunjukaké sing iki terjemahan saka kirim https://codeburst.io/sentry-error-reporting-by-example-part-1-999b2df11556

Source: www.habr.com

Ngawasi Kasalahan karo Sentry ing Aplikasi Front-End Ditulis ing JavaScript: Part 1

Add a comment Отменить ответ