Layanan Pengawal memungkinkan Anda memantau bug dari jarak jauh di aplikasi front-end yang ditulis JavaScript.
Mencoba memperbaiki masalah pada aplikasi front-end JavaScript bisa jadi rumit karena berasal dari browser pengguna, yang sering kali tidak dapat Anda akses. Namun, Pengawal memungkinkan untuk memonitor bug dari jarak jauh.
Anda dapat mengunduh solusi yang dibahas dalam artikel ini.
Apa yang diperlukan?
Jika Anda ingin menggunakan contoh ini, Anda memerlukan:
- : Alat pengembangan kaya fitur yang bukan merupakan bagian dari aplikasi. Kami mengunduh versi LTS terbaru (8.12.0)
- Pengawal: Baik Akun di layanan Sentry (Anda dapat mencatat hingga 10 ribu bug per bulan secara gratis) atau Sentry lokal yang diinstal -
Instalasi di server Anda
Untuk menginstal Sentry On-Premise di server Anda, Anda dapat melakukannya dengan 2 cara
-
Bangun rpm dan instal -
-
Gunakan penginstal resmi:
Π£ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ Π½Π° ΡΠ΅ΡΠ²Π΅Ρ docker ΠΈ docker-compose git clone https://github.com/getsentry/onpremise.git ./install.sh
Penggunaan Standar
Untuk memulai, tambahkan yang baru dari situs web layanan Pengawal-proyek untuk aplikasi. Setelah memilih bahasa yang diinginkan, Anda akan menerima dokumentasi terkait. Dalam kasus kami, kami memilih JavaScript.
Contoh pertama adalah standar JavaScript. Ada dua tombol di sini: "Halo" (Halo dan "Kesalahan" (Kesalahan).
Setelah Anda mengklik tombol tersebut "Halo", layar akan reboot dan diblokir mencoba akan mendeteksi dan menangkap bug. Setelah bug βtertangkapβ, laporan kesalahan dikirim secara manual ke layanan Pengawal.
Tombol βErrorβ memungkinkan Anda mendeteksi bug dengan mudah.
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>Catatan:
- Sentry diinstal dari CDN dan diekspos sebagai variabel global
- Beberapa saat sebelumnya kami meluncurkan Sentry di JavaScript kami
Untuk menguji contoh ini, kita dapat menggunakan platform server web statis Node.js: server http. Masuk ke folder tempat file disimpan index.html, dan masukkan (opsi dengan menonaktifkan caching) baris berikut untuk membuka alamat di browser .
Bagaimana bug yang tertangkap ditampilkan
Pertama klik tombolnya "Halo".
Kami menemukan bug, sehingga tidak akan muncul di tumpukan panggilan, dan karenanya tidak dipantau di konsol. Namun, sejak kami mengirim ke Pengawal laporkan bug secara manual, kami akan melihat pesan tentang hal itu di akun Anda.
Catatan:
- Kita bisa menelusuri baris mana (24) yang mengandung bug
- Selain itu, jejak runut tautan menampilkan tindakan browser yang menyebabkan kesalahan.
Bagaimana bug yang tidak tertangkap ditampilkan
Mengklik tombol "Kesalahan".
Bug tersebut menggelembungkan tumpukan panggilan dan dengan demikian pesan kesalahan ditampilkan di konsol. Setelah ini, Sentry secara otomatis memantau bug tersebut, tanpa tindakan tambahan apa pun.
Catatan:
- Kita bisa melihat di baris mana (30) bug tersebut hilang
- Tidak ada jejak remah roti (saya tidak begitu mengerti mengapa)
Bagaimana memastikan keamanan proyek
Anda mungkin telah memperhatikan cara kami mengontrol halaman mana yang dapat melaporkan kesalahan pada proyek kami Pengawal; dengan bantuan dsn catatan. Masalahnya adalah masukan tersebut dapat dilihat oleh siapa saja yang melihat kode sumber halaman Anda.
Untuk menghindari hal ini, kita perlu membatasi jumlah domain yang dapat mengirimkan laporan kesalahan ke proyek kita. Dalam contoh ini kami menggunakan localhost (tuan rumah lokal). Opsi ini dikonfigurasi di tab pengaturan Pengawal-proyek, Pengaturan Proyek Penjaga.
Rilis
Jika Anda memikirkan cara menggunakannya Pengawal dalam berbagai variasi aplikasi kita, maka kita memerlukan semacam mekanisme yang akan menandai kesalahan dengan nomor versi.
Lagi pula, kami tidak ingin bug yang kami perbaiki muncul lagi dan kami pikir apa yang kami perbaiki tidak berhasil. Mungkin juga pengguna meluncurkan aplikasi versi lama yang di-cache.
Untuk mengatasi masalah ini, Anda harus memasukkan pengidentifikasi lepaskan (versi) saat startup Pengawal.
vanilla/index.html
...
var RELEASE = '0.1.0';
Sentry.init({
dsn: 'https://[email protected]/1289664',
release: RELEASE,
});
...Setelah ini, semua kesalahan baru akan ditandai sebagai rilis (0.1.0), artinya, mereka akan terikat pada versi kode yang benar.
Catatan:
- Kami telah menemukan cara sederhana untuk menggunakan rilis
- Sentry memungkinkan Anda menggunakan lebih banyak , yang berkaitan erat dengan GitHub. Fungsi ini memungkinkan untuk melacak bug sebelum melakukan operasi tertentu.
PS Bagian kedua lebih panjang, jadi akan ada di postingan tersendiri.
Penjaga obrolan PS Telegram
PS Saya lupa menunjukkan bahwa ini adalah terjemahan dari postingan tersebut
Sumber: www.habr.com