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.
Pada panel navigasi kiri, pilih Real User Monitoring > > Application List, lalu pada bilah menu atas, pilih wilayah target.
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 muncul di bagian STEP 2.
Pada 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>
```
VuePress

Proyek VuePress tidak memerlukan konfigurasi per halaman. Cukup masukkan agen CDN sekali saja dalam file templat HTML, dan akan berlaku untuk semua halaman.
- VuePress 2.x (Vue 3): File templat adalah .vuepress/template.html. Tentukan path templat menggunakan item konfigurasi templateBuild dalam .vuepress/config.mjs.
```
import { dirname } from 'path'
import { fileURLToPath } from 'url'
const __dirname = dirname(fileURLToPath(import.meta.url))
export default defineUserConfig({
  templateBuild: __dirname + '/template.html',
})
```
- VuePress 1.x (Vue 2): File templat adalah .vuepress/index.html.
Dalam file templat, masukkan skrip agen CDN sebagai baris pertama di dalam tag <body>.

Penting
Skrip agen harus ditempatkan di dalam tag <body>. Jika ditempatkan di dalam tag <head>, akan terjadi TypeError karena tag <body> belum dimuat.

Jika proyek Anda tidak memiliki file templat HTML, gunakan metode instalasi paket npm sebagai gantinya.
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 mencakup parameter yang diperlukan. Pastikan Anda menggunakan SDK dan titik akhir terbaru.
Berikut penjelasan masing-masing metode instalasi:
- Asynchronous loading: Juga dikenal sebagai non-blocking loading. Browser terus memproses halaman sambil mengunduh skrip JS. Direkomendasikan jika performa halaman menjadi prioritas utama.
  
  Penting
  Dengan asynchronous loading, ARMS tidak dapat menangkap error JS atau error pemuatan resource yang terjadi sebelum SDK agen dimuat dan diinisialisasi.
- Synchronous loading: Juga dikenal sebagai blocking loading. Browser menunggu skrip JS dimuat sebelum memproses sisa halaman. 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 menginisialisasikannya 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

VuePress

npm package

Dokumen terkait