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

Jika aplikasi web atau HTML5 Anda mengalami masalah performa atau error JavaScript di lingkungan produksi, mendiagnosis akar permasalahan memerlukan visibilitas terhadap sesi pengguna nyata. Real User Monitoring (RUM), sebuah fitur dari Application Real-Time Monitoring Service (ARMS), mengumpulkan metrik performa dan melacak exception menggunakan paket JavaScript atau npm. Setelah integrasi, Anda dapat mengidentifikasi bottleneck performa dan exception di seluruh basis pengguna Anda.

Penting

RUM telah tersedia untuk penggunaan komersial sejak pukul 00.00.00 (UTC+8) pada 24 Juni 2024. Untuk informasi lebih lanjut, lihat Billing. Untuk dukungan teknis, bergabunglah dengan grup obrolan DingTalk (ID: 67370002064).

Mulai cepat

Instal SDK melalui npm, inisialisasi di file entri aplikasi Anda, dan mulai mengumpulkan data segera.

import ArmsRum from '@arms/rum-browser';

ArmsRum.init({
  pid: "<your-app-id>",        // Application ID from the ARMS console
  endpoint: "<your-endpoint>", // Endpoint URL from the ARMS console
});

Ganti <your-app-id> dan <your-endpoint> dengan nilai yang dihasilkan setelah Anda membuat aplikasi di Konsol ARMS. Lihat Langkah 1: Buat aplikasi untuk detailnya.

Untuk daftar lengkap parameter SDK, lihat Referensi konfigurasi SDK untuk aplikasi web dan HTML5.

Alur kerja integrasi

Integrasi terdiri dari tiga langkah:

Create Application di Konsol ARMS untuk mendapatkan pid dan endpoint Anda.
Instal SDK dengan salah satu dari tiga metode: CDN async, CDN sync, atau npm.
Verifikasi bahwa data pemantauan muncul di konsol.

Langkah 1: Buat aplikasi

Login ke Konsol ARMS.
Di panel navigasi kiri, pilih Real User Monitoring > Application List. Di bilah navigasi atas, pilih Wilayah.
Pada halaman Applications, klik Add Application.
Di panel Create Application, klik Web & H5.
Di panel Web & H5, masukkan nama dan deskripsi aplikasi, lalu klik Create.
Catatan
Nama aplikasi harus unik.
Setelah aplikasi dibuat, sebuah endpoint (alamat tempat data pemantauan dilaporkan) dan pid (Application ID Anda) secara otomatis dihasilkan di bagian STEP2.
Di bagian STEP2, pilih metode instalasi dan instal OpenRUM SDK.

Langkah 2: Instal OpenRUM SDK

Pilih salah satu metode instalasi berikut.

Method	Best for	Trade-off
CDN async (recommended)	Aplikasi dengan target performa pemuatan halaman yang ketat	Tidak dapat menangkap error yang terjadi sebelum SDK selesai dimuat
CDN sync	Aplikasi yang memerlukan cakupan error lengkap sejak halaman dimuat	Memblokir rendering halaman hingga SDK dimuat
npm	Pengaturan tooling build modern yang memerlukan pengurangan skrip halaman dan pengendalian alur traffic	Memerlukan langkah build

CDN async loading

Pemuatan async (non-blocking) mengunduh SDK tanpa memblokir rendering halaman. Gunakan metode ini jika kecepatan pemuatan halaman menjadi prioritas utama Anda.

Penting

Pemuatan async tidak dapat menangkap error JavaScript atau error pemuatan resource yang terjadi sebelum OpenRUM SDK diinisialisasi.

Salin cuplikan berikut dan tempel sebagai elemen pertama di dalam tag <body> halaman HTML Anda. Ganti <your-app-id> dan <your-endpoint> dengan nilai dari bagian STEP2 di konsol.

<script>
  !(function(c,b,d,a){c[a]||(c[a]={});c[a]={
    pid: "<your-app-id>",        // Application ID from the ARMS console
    endpoint: "<your-endpoint>"  // Endpoint URL from the ARMS console
  };
  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 sync loading

Pemuatan sync (blocking) memastikan SDK dimuat sepenuhnya sebelum skrip lain dijalankan. Gunakan metode ini jika Anda perlu menangkap semua error JavaScript dan error pemuatan resource sejak halaman mulai dimuat.

Salin cuplikan berikut dan tempel sebagai elemen pertama di dalam tag <body> halaman HTML Anda. Ganti <your-app-id> dan <your-endpoint> dengan nilai dari bagian STEP2 di konsol.

<script>
  window.__rum = {
    pid: "<your-app-id>",        // Application ID from the ARMS console
    endpoint: "<your-endpoint>"  // Endpoint URL from the ARMS console
  };
</script>
<script type="text/javascript" src="https://sdk.rum.aliyuncs.com/v2/browser-sdk.js" crossorigin></script>

npm package

Paket npm dapat digunakan untuk mengurangi jumlah skrip yang dimuat di halaman, mengontrol alur traffic, serta memilih RUM sebagai modul terpisah untuk pemrosesan selanjutnya.

Instal paket:
```
   npm install @arms/rum-browser --save
```

Inisialisasi SDK di file entri aplikasi Anda. Ganti <your-app-id> dan <your-endpoint> dengan nilai dari bagian STEP2 di konsol.

   import ArmsRum from '@arms/rum-browser';

   ArmsRum.init({
     pid: "<your-app-id>",        // Application ID from the ARMS console
     endpoint: "<your-endpoint>", // Endpoint URL from the ARMS console
   });

Akses API SDK setelah pemuatan CDN

Saat menggunakan pemuatan CDN (async atau sync), akses instans SDK melalui namespace global RumSDK.default. API-nya identik dengan metode npm setelah inisialisasi.

const ArmsRum = window.RumSDK.default;

// If __rum was not configured before SDK loading, initialize manually:
ArmsRum.init({
  pid: "<your-app-id>",
  endpoint: "<your-endpoint>",
});

// Set additional configuration. This API is the same for CDN and npm.
ArmsRum.setConfig('env', 'pre');

Langkah 3: Verifikasi integrasi

Setelah menginstal SDK:

Buka aplikasi Anda di browser dan berinteraksi dengan halaman untuk menghasilkan event pemantauan.
Login ke Konsol ARMS.
Di panel navigasi kiri, pilih Real User Monitoring > Application List.
Pastikan aplikasi Anda muncul dalam daftar dan data pemantauan sedang dilaporkan.

Langkah berikutnya

Konfigurasikan opsi SDK tingkat lanjut untuk memenuhi kebutuhan bisnis Anda. Untuk daftar lengkap parameter, lihat Referensi konfigurasi SDK untuk aplikasi web dan HTML5.