Integrasikan SDK RUM untuk Melacak Performa Web & Aplikasi HTML5-ARMS-Alibaba Cloud

Konfigurasikan Real User Monitoring (RUM) untuk aplikasi web atau HTML5 guna melacak sesi pengguna, jumlah tampilan halaman (PV), jumlah pengguna unik (UV), dan waktu pemuatan halaman. Setelah dikonfigurasi, RUM SDK akan mengirimkan data ke konsol Application Real-Time Monitoring Service (ARMS), tempat Anda dapat memantau performa dan mendiagnosis masalah berdasarkan ID pengguna.

Penting

RUM telah tersedia untuk penggunaan komersial sejak pukul 00.00.00 (UTC+8), 24 Juni 2024. Untuk rincian harga, lihat Penagihan. Untuk dukungan teknis, bergabunglah dengan kelompok DingTalk (ID: 67370002064).

Alur Kerja

Buat aplikasi RUM  -->  Instal SDK  -->  Verifikasi konfigurasi  -->  Lihat data pemantauan  -->  Konfigurasikan peringatan

Buat aplikasi RUM: Daftarkan aplikasi web atau HTML5 Anda di konsol ARMS dan dapatkan kode inisialisasi SDK.
Instal SDK: Tambahkan cuplikan JavaScript yang dihasilkan ke halaman HTML Anda.
Verifikasi konfigurasi: Buka situs Anda di browser dan pastikan data muncul di konsol.
Lihat data pemantauan: Periksa jumlah sesi, performa pemuatan halaman, dan metrik lainnya di dasbor pemantauan.
Konfigurasikan peringatan: Tetapkan aturan peringatan dan kebijakan notifikasi untuk degradasi performa.

Prasyarat

Sebelum memulai, pastikan Anda telah memiliki:

Akun Alibaba Cloud dengan ARMS yang telah diaktifkan
Aplikasi web atau HTML5 yang sedang berjalan (panduan ini menggunakan website contoh yang dihosting pada instans Elastic Compute Service (ECS) dengan alamat IP publik; untuk instruksi login, lihat Menghubungkan ke instans Linux menggunakan password atau kunci)

Catatan

Setiap akun Alibaba Cloud menerima kuota gratis sebesar 100 Unit Kapasitas Observabilitas (OCU) per bulan. Biaya RUM didasarkan pada jumlah sesi dan jumlah laporan kustom yang dikirimkan, dengan setiap OCU mencakup jumlah tetap dari keduanya. Untuk detail selengkapnya, lihat Ikhtisar penagihan.

Langkah 1: Buat aplikasi RUM

Masuk ke konsol ARMS. Di panel navigasi sebelah kiri, pilih Real User Monitoring > Application List. Klik Add Application.
Pada panel yang muncul, pilih Web & H5 sebagai jenis aplikasi, masukkan nama aplikasi, pertahankan pengaturan default, lalu klik Create.

Salin kode JavaScript yang dihasilkan. Anda akan menambahkannya ke halaman HTML pada langkah berikutnya. Ganti placeholder berikut dengan nilai dari kode yang dihasilkan:

Placeholder	Deskripsi	Contoh
`<your-app-pid>`	ID unik aplikasi web atau HTML5 Anda.	`jjd**@37**`
`<your-rum-endpoint>`	Titik akhir untuk pelaporan data pemantauan.	`https://jjd****-default-cn.rum.aliyuncs.com`
`<your-sdk-url>`	URL Content Delivery Network (CDN) yang menyimpan SDK.	`https://jjd****-sdk.rum.aliyuncs.com`

   <script>
   window.__rum = {
     "pid": "<your-app-pid>",           // ID aplikasi yang diberikan oleh RUM
     "endpoint": "<your-rum-endpoint>"  // Titik akhir pelaporan data
   };
   </script>
   <script type="text/javascript" src="<your-sdk-url>/v2/browser-sdk.js" crossorigin></script>

Langkah 2: Instal SDK

Tambahkan cuplikan JavaScript ke halaman HTML Anda. Pilih salah satu pendekatan berikut berdasarkan struktur proyek Anda:

File HTML tunggal: Tempel cuplikan di dalam tag <body>.
Beberapa file HTML dengan layout bersama: Tambahkan cuplikan ke file layout agar dimuat di setiap halaman.

Contoh berikut menggunakan program website contoh shopping.zip dengan file layout bersama.

layout.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shopping Site</title>
    <!-- RUM SDK: tempel cuplikan dari Langkah 1 di sini -->
    <script>
        window.__rum = {
            "pid": "<your-app-pid>",          // Ganti dengan ID aplikasi Anda
            "endpoint": "<your-rum-endpoint>" // Ganti dengan titik akhir pelaporan data Anda
        };
    </script>
    <script type="text/javascript" src="<your-sdk-url>/v2/browser-sdk.js" crossorigin></script>
</head>
<body>
    {% block content %}{% endblock %}
</body>
</html>

Setelah menambahkan cuplikan, jalankan aplikasi:

python app.py

Catatan

Panduan ini menggunakan pemuatan CDN sinkron. Pemuatan asinkron berbasis CDN dan paket npm juga didukung. Untuk informasi prosedur dan skenario metode tersebut, lihat Integrasikan aplikasi web atau aplikasi HTML5.

Langkah 3: Verifikasi konfigurasi

Buka http://<ECS-public-IP>:5000 di browser dan jelajahi beberapa halaman untuk menghasilkan data sesi.
Masuk ke konsol ARMS, buka Real User Monitoring > Application List, dan pastikan aplikasi Anda muncul dengan data masuk.

Jika aplikasi Anda tidak muncul setelah beberapa menit, periksa hal berikut:

Cuplikan JavaScript ditempatkan dengan benar di HTML dan dimuat sebelum skrip lainnya.
Nilai pid dan endpoint sesuai dengan kode yang dihasilkan pada Langkah 1.
Konsol developer browser Anda tidak menampilkan error jaringan untuk URL skrip SDK.

Langkah 4: Lihat data pemantauan

Klik nama aplikasi Anda di halaman Application List untuk membuka dasbor pemantauan. Dasbor menampilkan metrik utama termasuk jumlah sesi dan performa pemuatan halaman.

Untuk deskripsi lengkap semua metrik dasbor, lihat Detail pemantauan halaman web dan HTML5.

Langkah 5: Konfigurasikan peringatan

Buat aturan peringatan

Buat aturan peringatan: Pilih aplikasi Anda, konfigurasikan kondisi peringatan, dan atur Notification Policy menjadi Do Not Specify Notification Policy.
Salin ID aturan peringatan untuk langkah berikutnya.

Buat kebijakan notifikasi

Buat kebijakan notifikasi: Di kondisi pencocokan, masukkan ID aturan peringatan dari langkah sebelumnya. Lalu konfigurasikan kelompok event dan metode notifikasi.

Lihat riwayat peringatan

Untuk meninjau event peringatan sebelumnya, lihat Lihat event peringatan historis.

Langkah Selanjutnya

Coba metode instalasi SDK lainnya: Pemuatan asinkron berbasis CDN dan paket npm tersedia. Untuk detail selengkapnya, lihat Integrasikan aplikasi web atau aplikasi HTML5.
Kustomisasi konfigurasi SDK: Konfigurasikan opsi seperti ID aplikasi, alamat pelaporan data, dan lingkungan aplikasi. Untuk daftar lengkap item konfigurasi, lihat Contoh konfigurasi RUM SDK untuk web dan HTML5.