Pemantauan front-end dengan Sentry.io dan React

Dalam artikel ini, mari kita lihat lebih dekat pemantauan front-end: apa itu, mengapa itu penting, dan kita bisa mulai mengintegrasikannya menggunakan Sentry.

Apa itu Pemantauan Front-End

Sederhananya, pemantauan front-end adalah serangkaian proses dan alat yang digunakan untuk melacak kinerja situs web atau aplikasi.

Pemantauan front-end terutama berfokus pada bagian-bagian yang dilihat pengguna akhir. Ini termasuk masalah seperti:

  • Render lambat
  • Pengalaman pengguna yang tidak konsisten atau tidak responsif
  • Permintaan jaringan/kesalahan API
  • Masalah khusus kerangka

Pentingnya Pemantauan Front-End

Karena situs web menjadi lebih kuat dan kompleks, pemeliharaan kinerjanya menjadi semakin sulit.

Kinerja front-end adalah bagian dari pengalaman pengguna. Persepsi kualitas bisnis sering kali dilihat dan dialami pengguna pertama kali melalui situs webnya. Setiap ketidakkonsistenan, waktu henti atau kesalahan pada klien dapat menyebabkan hilangnya kepercayaan dan kredibilitas situs web. Oleh karena itu, pemantauan front-end adalah bagian penting dalam mengembangkan situs web dan aplikasi yang kuat dan tangguh.

Memulai dengan Sentry untuk React

Untungnya, saat ini ada beberapa alat canggih seperti Sentry untuk melacak, merekam, dan memantau kinerja front-end. Ini adalah alat pelacakan kesalahan sumber terbuka yang mendukung berbagai bahasa dan kerangka kerja seperti Java, PHP, Ruby, React, Rust, Unity, dll.

Dalam tutorial ini, mari kita mengatur dan mulai memantau aplikasi React dengan Sentry.

Langkah 1: Siapkan Proyek Penjaga

Buat akun Sentry gratis di sentry.io. Setelah membuat akun, klik tombol Buat proyek tombol.

Sekarang, pilih Reaksi sebagai platform proyek kami dan masukkan nama proyek. Klik Buat Proyek untuk menyelesaikan penyiapan proyek Sentry baru.

buat_proyek.PNG

Langkah 2: Instal Sentry SDK

Dalam aplikasi React, kita dapat mengintegrasikan Sentry dengan menginstal SDK-nya dengan perintah berikut:

1npm install @sentry/react @sentry/tracing

Impor paket yang terinstal di aplikasi React Anda index.js berkas seperti:

1import * as Sentry from "@sentry/react";

2import { Integrations } from "@sentry/tracing";

Langkah 3: Konfigurasikan Sentry di aplikasi React

Agar Sentry terhubung ke aplikasi React kami, kami perlu mengonfigurasi SDK kami dengan kunci klien kami, juga dikenal sebagai nilai Sentry DSN (Nama Sumber Data).

Untuk mendapatkan kunci klien kami, cukup navigasikan ke Setelan > Proyek > {Nama Proyek Anda}, seperti yang ditunjukkan pada tangkapan layar di bawah ini.

PNG Proyek

Kemudian, klik Kunci Klien (DSN) dan salin nilai DSN.

ClientKeys.PNG

Kembali ke Aplikasi Anda index.js file, tambahkan Sentry.init() metode di bawah pernyataan impor untuk menghubungkan aplikasi ke proyek Sentry Anda. Milikmu index.js file akan terlihat seperti:

1import React from "react";

2import ReactDOM from "react-dom";

3import * as Sentry from "@sentry/react";

4import { Integrations } from "@sentry/tracing";

5import App from "./App";

6

7

8Sentry.init({

9 dsn: "Your DSN here",

10 integrations: [new Integrations.BrowserTracing()],

11

12 tracesSampleRate: 1.0,

13});

14

15ReactDOM.render(<App />, document.getElementById("root"));

Tentang SampleRate

Saat menguji, tidak apa-apa untuk menyimpan tracesSampleRate sebagai 1.0. Artinya setiap tindakan yang dilakukan di browser akan dikirim sebagai transaksi ke Sentry.

Dalam produksi, nilai ini harus diturunkan untuk mengumpulkan ukuran data sampel yang seragam tanpa mencapai kuota transaksi Sentry. Atau, untuk mengumpulkan data sampel secara dinamis, tracesSampler dapat digunakan untuk menyaring transaksi ini.

Lebih lanjut tentang opsi pengambilan sampel dapat ditemukan di dokumentasi di sini.

Langkah 4: Uji Integrasi

Setelah kami mengonfigurasi aplikasi kami, kami dapat menguji apakah integrasi kami berhasil dengan tombol sederhana:

1return <button onClick={methodDoesNotExist}>Bad Button</button>;

Jika kami menjalankan aplikasi kami, kami akan mendapatkan kesalahan berikut:

kesalahan.png

Sekarang, mari kita periksa dasbor Sentry kami untuk melihat apakah kesalahan telah dilacak dengan benar. Seperti yang terlihat pada gambar di bawah, ReferenceError ada di sana.

error_dashboard.PNG

Langkah 5: Tangkap Kesalahan Kustom

Selain menangkap kesalahan dari React, Sentry juga dapat menangkap kesalahan yang ditentukan dalam aplikasi.

Misalnya, di aplikasi React Organizer Warna saya, saya ingin membuat kesalahan jika pengguna menambahkan warna yang sama dua kali. Seperti yang terlihat pada klip di bawah, saat ini hanya menampilkan jendela peringatan.

demo.gif

Jadi mari kita tambahkan pernyataan lempar ke addColor berfungsi untuk melempar kesalahan ketika ada warna duplikat:

1const addColor = (title, color) => {

2 if (colors.some((c) => c.color === color)) {

3 throw "Color already exists";

4 } else {...}

Dan kemudian, kita cukup menambahkan try-catch pernyataan saat memanggil fungsi ini. Kita perlu menggunakan Sentry.captureException() sehingga akan ditangkap sebagai transaksi dan dikirim ke Sentry.

Pertama, mari kita impor paket untuk menggunakan Sentry di App.js mengajukan:

1import * as Sentry from "@sentry/react";

Dalam fungsi dimana addColor fungsi dipanggil, kami menambahkan try-catch pernyataan seperti ini:

1try {

2 addColor(title.value, color.value);

3} catch (e) {

4 Sentry.captureException(e);

5 console.error(e);

6}

Sekarang, jika kita menambahkan Warna baru dengan kode warna yang sama, kesalahan akan dilemparkan dan dikirim ke Sentry.

demo2.gif

Di Dasbor Penjaga kami, di bawah Masalah, kita dapat melihat kesalahan khusus yang telah kita tangkap.

kesalahan2.png

Aktifkan Pemantauan Kinerja

Selain pelacakan kesalahan, kami dapat mengaktifkan pemantauan kinerja di dasbor Sentry kami dengan membungkus Sentry.withProfiler() di komponen Aplikasi kami dalam pernyataan ekspornya.

1export default Sentry.withProfiler(App);

Navigasikan ke Pertunjukan tab untuk memantau dan mengukur metrik penting seperti FCP (First Contentful Paint), latensi atau waktu henti dari setiap permintaan API, dll.

kinerja_monitoring.png

Pemutaran Ulang Sesi Sumber Terbuka

Men-debug aplikasi web dalam produksi mungkin menantang dan memakan waktu. OpenReplay adalah alternatif sumber terbuka untuk FullStory, LogRocket dan Hotjar. Ini memungkinkan Anda untuk memantau dan memutar ulang semua yang dilakukan pengguna Anda dan menunjukkan bagaimana aplikasi Anda berperilaku untuk setiap masalah. Ini seperti membuka inspektur browser Anda sambil melihat dari balik bahu pengguna Anda. OpenReplay adalah satu-satunya alternatif sumber terbuka yang tersedia saat ini.

Buka Putar Ulang

Selamat men-debug, untuk tim frontend modern – Mulai pantau aplikasi web Anda secara gratis.

Kesimpulan

Tanpa ragu, pemantauan front-end secara bertahap menjadi lazim dalam praktik pengembangan web saat ini. Alat canggih seperti Sentry dapat memberikan wawasan yang berguna dan manajemen kesalahan untuk memperkaya pengalaman pengguna.

Yang lebih hebat lagi adalah fakta bahwa OpenReplay terintegrasi dengan Sentry, yang memungkinkan aktivitas yang diputar ulang dikirim untuk debugging yang lebih cepat dan lebih mudah. Untuk mempelajari lebih lanjut tentang cara mengintegrasikan OpenReplay dengan Sentry, silakan kunjungi tautan ini.

Terima kasih telah membaca. Saya harap artikel ini membantu Anda memulai pemantauan front-end dan Sentry.