Cara menginstal agen pemantauan browser ARMS untuk aplikasi web menggunakan CDN - Application Real-Time Monitoring Service

Instal agen pemantauan browser ARMS melalui Content Delivery Network (CDN) untuk memantau aplikasi web Anda.

Instal agen pemantauan browser

Masuk ke ARMS console.
Di panel navigasi kiri, pilih Browser Monitoring > Browser Monitoring. Di bilah navigasi atas, pilih Wilayah.
Pada halaman Browser Monitoring, klik Create Application Site di pojok kanan atas.
Di panel Integration Center, pada bagian Frontend, Mobile, and Client Applications, klik Web & H5.
Di panel Integrate Web & H5, masukkan nama aplikasi kustom di bagian Create Application.
Di panel Integrate Web & H5, pilih opsi yang diinginkan di bagian SDK Extension Configuration untuk menghasilkan kode agen.
- Disable Automatic API Reporting: Jika Anda memilih opsi ini, Anda harus memanggil metode __bl.api() secara manual untuk melaporkan laju keberhasilan API.
- Enable Automatic SPA Resolution: Jika Anda memilih opsi ini, ARMS mendengarkan event hashchange dan secara otomatis melaporkan tampilan halaman. Fitur ini cocok untuk single-page applications (SPAs).
- Enable FMP Collection: Jika Anda memilih opsi ini, ARMS mengumpulkan data First Meaningful Paint (FMP).
- Enable Page Resource Reporting: Jika Anda memilih opsi ini, agen melaporkan sumber daya statis dari halaman saat event onload dipicu.
- Associate with Application Monitoring: Jika Anda memilih opsi ini, permintaan API dikorelasikan dengan Application Monitoring back-end untuk mengaktifkan tracing front-to-back.
- Enable User Behavior Backtracking: Jika Anda memilih opsi ini, User Behavior Backtracking diaktifkan untuk membantu diagnosis error JavaScript.
- Enable Console Tracking: Jika Anda memilih opsi ini, User Behavior Backtracking melacak konten konsol, termasuk error, warn, log, dan info.
  
  Penting
  Fitur ini memengaruhi path konsol.

Pilih salah satu metode berikut untuk menginstal agen pemantauan browser.

Pemuatan asinkron: Salin kode yang disediakan dan tempelkan sebagai baris pertama di dalam elemen <body> pada HTML halaman, lalu mulai ulang aplikasi. Buka tab Asynchronous loading, salin kode yang disediakan, dan tempelkan sebagai baris pertama konten <body> pada HTML halaman.

Kode berikut menunjukkan contoh HTML lengkap:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1" />
    <meta name="viewport" content="width=device-width" />
    <title>ARMS</title>
  </head>
  <body>
    <script>
      !(function (c, b, d, a) {
        c[a] || (c[a] = {})
        c[a].config = {
          pid: 'xxx',
          appType: 'web',
          imgUrl: 'https://arms-retcode.aliyuncs.com/r.png?',
          sendResource: true,
          enableLinkTrace: true,
          behavior: true,
          useFmp: true,
          enableSPA: true,
        }
        with (b) with (body) with (insertBefore(createElement('script'), firstChild)) setAttribute('crossorigin', '', (src = d))
      })(window, document, 'https://sdk.rum.aliyuncs.com/v1/bl.js', '__bl')
    </script>
    <div id="app"></div>
  </body>
</html>

Pemuatan sinkron: Salin kode dan tempel sebagai elemen pertama di dalam tag <body> halaman Anda. Lalu, restart aplikasi Anda.

Paket npm:

Jalankan perintah berikut untuk menginstal paket npm.
```
npm install alife-logger --save
```

Salin perintah inisialisasi berikut dari konsol dan jalankan.

const BrowserLogger = require('alife-logger');
const __bl = BrowserLogger.singleton({pid:"b590lhguqs@8cc3f63543d****",appType:"web",imgUrl:"https://arms-retcode.aliyuncs.com/r.png?",sendResource:true,behavior:true,enableLinkTrace:true,enableConsole:true});

Perbedaan antara pemuatan asinkron dan sinkron

Pemuatan asinkron: Disebut juga pemuatan non-blocking. Browser mengunduh dan mengeksekusi file JavaScript agen tanpa menghambat rendering halaman. Metode ini direkomendasikan ketika performa halaman menjadi prioritas utama.

Penting
Karena sifatnya yang asinkron, ARMS tidak dapat menangkap error JavaScript atau error pemuatan sumber daya yang terjadi sebelum SDK pemantauan selesai dimuat dan diinisialisasi.
Pemuatan sinkron: Disebut juga pemuatan blocking. Browser menghentikan sementara rendering halaman hingga file JavaScript agen sepenuhnya dimuat dan dieksekusi. Metode ini direkomendasikan ketika Anda perlu menangkap semua error JavaScript dan error pemuatan sumber daya sepanjang siklus hidup halaman.

Tetapkan UID kustom

SDK secara otomatis menghasilkan user ID (UID) untuk menghitung pengunjung unik (UV) dan metrik lainnya. UID yang dihasilkan secara otomatis dapat membedakan pengguna tetapi tidak memiliki konteks bisnis. Untuk menggunakan UID kustom, tambahkan berikut ini ke objek config dalam kode Anda:

uid: "xxx" // Nilai ini mengidentifikasi pengguna. Tetapkan berdasarkan logika bisnis Anda.

Contohnya:

<script>
!(function(c,b,d,a){c[a]||(c[a]={});c[a].config={pid:"xxx",appType:undefined,imgUrl:"https://arms-retcode.aliyuncs.com/r.png?", uid: "xxxx"};
with(b)with(body)with(insertBefore(createElement("script"),firstChild))setAttribute("crossorigin","",src=d)
})(window,document,"https://sdk.rum.aliyuncs.com/v1/bl.js","__bl");
</script>

Penting

Jika Anda mengubah opsi di bagian SDK Extension Configuration, kodenya akan berubah. Pastikan untuk menyalin dan menempelkan kode baru tersebut.

Parameter SDK umum

Tabel berikut mencantumkan parameter konfigurasi SDK umum.

Parameter	Tipe	Deskripsi	Wajib	Bawaan
pid	String	ID unik proyek. Secara otomatis dihasilkan oleh ARMS saat membuat situs.	Ya	Tidak ada
uid	String	ID pengguna. Nilainya merupakan pengenal pengguna dan dapat digunakan untuk mencari pengguna tersebut. Anda dapat menentukan nilai kustom. Jika Anda tidak menentukan parameter ini, SDK akan menghasilkannya secara otomatis dan memperbaruinya setiap enam bulan.	Tidak	Dihasilkan secara otomatis oleh SDK
tag	String	Tag input. Setiap log membawa sebuah tag.	Tidak	Tidak ada
release	String	Versi aplikasi. Kami merekomendasikan Anda mengonfigurasi parameter ini untuk melihat informasi laporan dari versi berbeda.	Tidak	`undefined`
environment	String	Bidang lingkungan. Nilai yang valid: prod, gray, pre, daily, dan local. Nilai prod menunjukkan lingkungan online. Nilai gray menunjukkan lingkungan rilis bertahap. Nilai pre menunjukkan lingkungan staging. Nilai daily menunjukkan lingkungan harian. Nilai local menunjukkan lingkungan lokal.	Tidak	`prod`
sample	Integer	Konfigurasi sampling log. Nilainya adalah bilangan bulat dari 1 hingga 100. Log performa dan log API sukses diambil sampel dengan rasio `1/sample`. Untuk informasi lebih lanjut tentang metrik log performa dan log API sukses, lihat Statistical metrics.	Tidak	`1`
behavior	Boolean	Menentukan apakah akan merekam perilaku pengguna yang melaporkan error untuk memudahkan troubleshooting.	Tidak	`true`
enableSPA	Boolean	Mendengarkan event hashchange pada halaman dan melaporkan PV lagi. Berlaku untuk skenario aplikasi halaman tunggal.	Tidak	`false`
enableLinkTrace	Boolean	Untuk informasi lebih lanjut tentang Analisis Tracing back-to-back, lihat Diagnose API errors with front-to-back tracing.	Tidak	`false`

Untuk daftar lengkap parameter konfigurasi SDK, lihat SDK reference.