palayanan pangawal ngidinan Anjeun pikeun ngawas jarak jauh bug dina aplikasi hareup-tungtung ditulis dina JavaScript.
Nyobian ngalereskeun masalah dina aplikasi hareup-tungtung on JavaScript bisa jadi tricky sabab asalna dina browser pamaké, nu mindeng teu boga aksés ka. Tapi, pangawal ngamungkinkeun pikeun ngawas bug tina jarak jauh.
Anjeun tiasa ngaunduh solusi anu dibahas dina tulisan ieu.
Naon anu diperyogikeun
Upami anjeun hoyong nganggo conto ieu, anjeun peryogi:
- : Alat pamekaran anu beunghar fitur anu sanés bagian tina aplikasi. Kami ngaunduh versi LTS panganyarna (8.12.0)
- pangawal: Boh Akun dina layanan Sentry (anjeun tiasa ngarékam dugi ka 10 rébu bug per bulan gratis) atanapi Sentry lokal anu dipasang -
Instalasi dina server Anjeun
Pikeun masang Sentry On-Premise dina server anjeun anjeun tiasa nganggo 2 cara
-
Ngawangun rpm sareng pasang -
-
Anggo pamasang resmi:
Установить на сервер docker и docker-compose git clone https://github.com/getsentry/onpremise.git ./install.sh
Paké Standar
Pikeun ngamimitian, tambahkeun anu énggal tina situs wéb jasa pangawal-proyék pikeun aplikasi. Saatos milih basa anu dipikahoyong, anjeun bakal nampi dokuméntasi anu saluyu. Dina hal urang kami milih JavaScript.
Conto kahiji nyaéta standar JavaScript. Aya dua tombol di dieu: "Halo" (Halo) jeung "Kasalahan" (Kasalahan).
Saatos Anjeun klik tombol "Halo", layar bakal reboot jeung blok nyobaan bakal ngadeteksi sareng nyekel bug. Saatos bug "bray", laporan kasalahan sacara manual dikirim ka layanan pangawal.
Tombol "Kasalahan" ngidinan Anjeun pikeun gampang ngadeteksi bug.
vanili/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>Katerangan:
- Sentry dipasang tina CDN sareng kakeunaan salaku variabel global
- A saeutik saméméhna kami dibuka Sentry dina JavaScript urang
Pikeun nguji conto ieu, urang tiasa nganggo platform pangladén wéb statik Node.js: server http. Pindah ka polder dimana file disimpen index.html, sareng lebetkeun (pilihan kalayan nganonaktipkeun cache) garis di handap ieu pikeun muka alamatna dina browser .
Kumaha bug bray dipintonkeun
Mimiti klik tombol "Halo".
Urang bray bug a, ku kituna moal pop up tumpukan panggero, sarta ku kituna teu diawaskeun dina konsol nu. Sanajan kitu, saprak urang ngirim ka pangawal ngalaporkeun bug sacara manual, kami bakal ningali pesen ngeunaan éta dina akun anjeun.
Katerangan:
- Urang tiasa ngalacak mana garis (24) anu ngandung bug
- Salaku tambahan, jalan satapak breadcrumb nampilkeun lampah browser anu nyababkeun kasalahan.
Kumaha bug uncaught ditampilkeun
Pencét tombol "Kasalahan".
Bug gelembung nepi tumpukan panggero sahingga pesen kasalahan dipintonkeun dina konsol nu. Saatos ieu, Sentry otomatis ngawas bug, tanpa tindakan tambahan.
Katerangan:
- Urang bisa ningali dina garis nu (30) bug nu leungit
- Henteu aya jalan satapak breadcrumb (Abdi henteu ngartos naha)
Kumaha mastikeun kaamanan proyék
Anjeun panginten parantos perhatikeun cara urang ngadalikeun halaman mana anu tiasa ngalaporkeun kasalahan ka proyék kami pangawal; kalayan pitulung dsn rékaman. Masalahna nyaéta inputna tiasa ditingali ku saha waé anu ningali kode sumber halaman anjeun.
Pikeun ngahindarkeun ieu, urang kedah ngawates jumlah domain anu tiasa ngalebetkeun laporan kasalahan ka proyék urang. Dina conto ieu kami dipaké localhost (localhost). Pilihan ieu dikonpigurasi dina tab setélan pangawal-proyek, Setélan Proyék Sentry.
Kaluaran
Lamun mikir ngeunaan kumaha carana make pangawal dina variasi béda tina aplikasi urang, mangka urang kudu sababaraha jenis mékanisme nu bakal nandaan kasalahan kalawan nomer versi.
Barina ogé, kami henteu hoyong bug anu kami perbaiki muncul deui, sareng kami nyangka yén anu kami ngalereskeun henteu jalan. Éta ogé tiasa janten pangguna ngaluncurkeun versi aplikasi anu langkung lami sareng sindangan.
Pikeun ngajawab masalah, anjeun kudu ngasupkeun identifier ngabebaskeun (versi) dina ngamimitian pangawal.
vanili/index.html
...
var RELEASE = '0.1.0';
Sentry.init({
dsn: 'https://[email protected]/1289664',
release: RELEASE,
});
...Saatos ieu, sadaya kasalahan anyar bakal ditandaan salaku ngabebaskeun (0.1.0), nyaeta, aranjeunna bakal dihijikeun ka versi bener kode.
Katerangan:
- Kami parantos mendakan cara saderhana pikeun ngagunakeun sékrési
- Sentry ngamungkinkeun anjeun ngagunakeun langkung seueur , nu raket patalina jeung GitHub. Pungsi ieu ngamungkinkeun pikeun ngalacak bug sateuacan ngalakukeun operasi anu tangtu.
PS Bagian kadua langkung panjang, janten dina tulisan anu misah.
PS Telegram obrolan Sentry
PS Kuring poho nunjukkeun yén ieu téh tarjamahan tina pos
sumber: www.habr.com