Integrasikan aplikasi web ke RUM - Application Real-Time Monitoring Service

Layanan sub Pemantauan Pengguna Nyata (RUM) dari Application Real-Time Monitoring Service (ARMS) memantau aplikasi web dan HTML5 menggunakan JavaScript atau paket npm untuk mengumpulkan metrik kinerja dan melacak pengecualian. Hal ini membantu meningkatkan pengalaman pengguna aplikasi Anda.

Penting

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

Tambahkan aplikasi

Masuk ke Konsol ARMS.
Di panel navigasi di sebelah kiri, pilih Real User Monitoring > Application List. Di bilah navigasi atas, pilih wilayah.
Di halaman Applications, klik Add Application.
Di panel Create Application, klik Web & H5.
Di panel Web & H5, masukkan nama aplikasi dan deskripsi, lalu klik Create.
Catatan
Nama harus unik.
Alamat tempat data pemantauan dilaporkan (Titik akhir) dan ID aplikasi (pid) akan dibuat secara otomatis di bagian LANGKAH2.
Di bagian LANGKAH2, pilih metode dan instal OpenRUM SDK.
Pemuatan sinkron melalui CDN
Salin kode berikut dan tempelkan ke baris pertama di dalam elemen <body> halaman HTML.
Catatan
Ganti parameter pid dan endpoint dalam kode berikut dengan alamat dan ID aplikasi.
```
<script>
  window.__rum = {
    pid: "your app id",
    endpoint: "your endpoint"
  };
</script>
<script type="text/javascript" src="https://sdk.rum.aliyuncs.com/v2/browser-sdk.js " crossorigin></script>
```
Pemuatan asinkron melalui CDN
Salin kode berikut dan tempelkan ke baris pertama di dalam elemen <body> halaman HTML.
Catatan
Ganti parameter pid dan endpoint dalam kode berikut dengan alamat dan ID aplikasi.
```
<script>
  !(function(c,b,d,a){c[a]||(c[a]={});c[a]={
    pid: "your app id",
    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>
```
Paket npm
1. Impor paket npm.
```
npm install @arms/rum-browser --save
```
2. Inisialisasi aplikasi.
  Catatan
  Ganti parameter pid dan endpoint dalam kode berikut dengan alamat dan ID aplikasi.
```
import ArmsRum from '@arms/rum-browser';
ArmsRum.init({
  pid: "your app id",
  endpoint: "your endpoint"
});
```
Catatan penggunaan:
- Pemuatan asinkron: Juga dikenal sebagai pemuatan non-blokir. Browser terus memproses halaman berikutnya tanpa memperhatikan apakah pemuatan JavaScript sudah selesai. Metode ini direkomendasikan jika Anda memerlukan performa halaman yang tinggi.
  Penting
  Saat menggunakan pemuatan asinkron, ARMS tidak dapat menangkap kesalahan JavaScript atau kesalahan pemuatan sumber daya sebelum OpenRUM SDK diinisialisasi.
- Pemuatan sinkron: Juga dikenal sebagai pemuatan blokir. Browser tidak akan melanjutkan pemrosesan halaman berikutnya hingga pemuatan JavaScript selesai. Metode ini direkomendasikan jika Anda perlu terus menangkap kesalahan JavaScript dan kesalahan pemuatan sumber daya.
- Paket npm: Paket npm dapat digunakan untuk mengurangi jumlah skrip yang dimuat di halaman, mengontrol aliran lalu lintas, dan memilih RUM sebagai modul terpisah untuk pemrosesan selanjutnya.
Saat CDN digunakan untuk pemuatan, gunakan namespace global RumSDK.default untuk mengakses instance pemantauan SDK.
```
const ArmsRum = window.RumSDK.default;
// Sebelum mengakses SDK RUM, pastikan SDK telah dimuat.
// Jika pengaturan __Rum tidak ditentukan sebelum pemuatan SDK, lakukan inisialisasi.
ArmsRum.init({
  pid: "your app id",
  endpoint: "your endpoint",
});
// Pengaturan berikut sama untuk metode CDN dan npm.
ArmsRum.setConfig('env', 'pre');
```

Referensi

SDK RUM untuk ARMS menyediakan berbagai konfigurasi kustom untuk memenuhi kebutuhan bisnis Anda. Untuk informasi lebih lanjut, lihat Contoh konfigurasi SDK RUM untuk aplikasi web dan HTML5.

Tambahkan aplikasi

Pemuatan sinkron melalui CDN

Pemuatan asinkron melalui CDN

Paket npm

Referensi