Menghubungkan aplikasi web ke Pemantauan Pengguna Nyata ARMS - Application Real-Time Monitoring Service

ARMS Real User Monitoring untuk Web & H5 memantau halaman browser dan halaman H5 dalam aplikasi seluler. Instal agen ringan melalui skrip JavaScript (JS) atau paket npm untuk mengumpulkan metrik performa dan melacak error, sehingga membantu Anda meningkatkan pengalaman pengguna di situs Anda.

Penting

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

Buat aplikasi

Masuk ke Konsol ARMS.
Di panel navigasi kiri, pilih Real User Monitoring > > Application List, lalu pilih wilayah target di bilah menu atas.
Pada halaman Application List, klik Add Application.
Pada panel Create Application, klik Web & H5.
Pada panel Add Web & H5 Application, masukkan nama dan deskripsi aplikasi, lalu klik Create .

Catatan
Nama aplikasi harus unik.

Setelah aplikasi dibuat, alamat titik akhir akan muncul di bagian STEP 2.
Di bagian STEP 2, pilih metode instalasi dan instal SDK agen.
CDN asynchronous loading

Salin kode berikut dan tempel sebagai baris pertama di dalam tag <body> halaman HTML Anda.

Catatan
Ganti your endpoint pada kode berikut dengan alamat titik akhir yang dihasilkan untuk aplikasi Anda.
```
<script>
  !(function(c,b,d,a){c[a]||(c[a]={});c[a]={
    endpoint: "your endpoint"
  };
  with(b)with(body)with(insertBefore(createElement("script"),firstChild))setAttribute("crossorigin","",src=d)
  })(window, document, "https://sdk.rum.aliyuncs.com/v2/browser-sdk.js ", "__rum");
</script>
```
CDN synchronous loading

Salin kode berikut dan tempel sebagai baris pertama di dalam tag <body> halaman HTML Anda.

Catatan
Ganti your endpoint pada kode berikut dengan alamat titik akhir yang dihasilkan untuk aplikasi Anda.
```
<script>
  window.__rum = {
    endpoint: "your endpoint"
  };
</script>
<script type="text/javascript" src="https://sdk.rum.aliyuncs.com/v2/browser-sdk.js " crossorigin></script>
```
npm package
1. Instal paket npm.
```
npm install @arms/rum-browser --save
```
2. Inisialisasi aplikasi.
  
  Catatan
  Ganti your endpoint pada kode berikut dengan alamat titik akhir yang dihasilkan untuk aplikasi Anda.
```
import armsRum from '@arms/rum-browser';
armsRum.init({
  endpoint: "your endpoint"
});
```
Penting
Mulai dari versi SDK 0.1.x, Anda tidak perlu lagi meneruskan PID karena titik akhir sudah berisi parameter yang diperlukan. Pastikan Anda menggunakan SDK dan titik akhir terbaru.
Berikut penjelasan masing-masing metode instalasi:
- Asynchronous loading: Juga dikenal sebagai pemuatan non-blocking. Browser terus memproses halaman sambil mengunduh skrip JS. Metode ini direkomendasikan jika performa halaman menjadi prioritas utama.
  
  Penting
  Dengan pemuatan asinkron, ARMS tidak dapat menangkap error JS atau error pemuatan resource yang terjadi sebelum SDK agen dimuat dan diinisialisasi.
- Synchronous loading: Juga dikenal sebagai pemuatan blocking. Browser menunggu skrip JS selesai dimuat sebelum memproses sisa halaman. Metode ini direkomendasikan jika Anda perlu menangkap semua error JS dan error pemuatan resource sejak halaman dibuka.
- npm package: Mengurangi beban skrip eksternal pada halaman Anda dan memungkinkan Anda mengelola pengiriman CDN serta menangani Pemantauan Pengguna Nyata sebagai modul terpisah.
Saat memuat SDK dari CDN, gunakan namespace global RumSDK.default untuk mengakses instans pemantauan SDK.
```
const armsRum = window.RumSDK.default;
// Pastikan SDK telah dimuat sebelum Anda mengakses RumSDK.
// Jika konfigurasi __rum belum didefinisikan sebelum SDK dimuat, Anda dapat menginisialisasinya di sini.
armsRum.init({
  endpoint: "your endpoint",
});
// Penggunaan berikut ini sama untuk instalasi npm maupun CDN.
armsRum.setConfig('env', 'pre');
```

Dokumen terkait

SDK ARMS Real User Monitoring menyediakan berbagai opsi konfigurasi. Untuk daftar lengkap parameter, lihat Referensi Konfigurasi SDK.

Buat aplikasi

CDN asynchronous loading

CDN synchronous loading

npm package

Dokumen terkait