Instal agen ARMS menggunakan CDN untuk browser monitoring - Application Real-Time Monitoring Service

Untuk memanfaatkan fitur pemantauan browser dari Application Real-Time Monitoring Service (ARMS) dalam memantau aplikasi web, Anda perlu menginstal agen ARMS melalui Alibaba Cloud Content Delivery Network (CDN) atau node package manager (npm). Dokumen ini menjelaskan cara menginstal agen pemantauan browser ARMS pada aplikasi web menggunakan CDN.

Instal agen pemantauan browser

Masuk ke Konsol ARMS.
Di panel navigasi sebelah 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 bagian Frontend, Mobile, and Client Applications dari panel Integration Center, klik Web & H5.
Di langkah Create an application dari panel Integrate Web & H5, masukkan nama aplikasi kustom.
Di langkah Configuration items for the SDK extension dari panel Integrate Web & H5, pilih opsi yang diperlukan. Kode agen BI yang akan disisipkan ke halaman dibuat berdasarkan opsi yang dipilih.
- Disable Automatic API Reporting: Jika Anda memilih opsi ini, Anda harus secara manual memanggil metode __bl.api() untuk melaporkan tingkat keberhasilan API.
- Enable Automatic SPA Resolution: Jika Anda memilih opsi ini, ARMS memantau peristiwa hashchange halaman dan secara otomatis melaporkan jumlah tampilan halaman (PV). Opsi ini cocok untuk aplikasi satu halaman (SPA).
- Enable FMP Collection: Jika Anda memilih opsi ini, ARMS mengumpulkan data terkait First Meaningful Paint (FMP).
- Enable Page Resource Reporting: Jika Anda memilih opsi ini, sumber daya statis yang dimuat di halaman dilaporkan ketika peristiwa onload dipicu.
- Associated with Application Monitoring: Jika Anda memilih opsi ini, permintaan API berada dalam asosiasi ujung ke ujung dengan Pemantauan Aplikasi.
- Enable User Behavior Backtracking: Jika Anda memilih opsi ini, Anda dapat melihat jejak perilaku pengguna dalam Diagnosis Kesalahan JS.
- Enable Console Tracking: Jika Anda memilih opsi ini, perilaku pengguna dilacak di konsol. Perilaku tersebut bisa berupa error, warn, log, atau info.
  Penting
  Fitur ini memengaruhi jalur Panel Konsol.

Instal agen ARMS menggunakan salah satu metode berikut:

Pemuatan Asinkron: Salin kode yang disediakan, tempelkan ke baris pertama elemen <body> halaman HTML, lalu mulai ulang aplikasi. tab_bm_async_load

Contoh HTML

<!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 yang disediakan, tempelkan ke baris pertama elemen <body> halaman HTML, lalu mulai ulang aplikasi.

Paket npm:

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

Salin dan jalankan perintah berikut dari konsol untuk menginisialisasi paket npm:

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: Dikenal juga sebagai pemuatan non-blokir. Dalam pemuatan asinkron, browser terus memproses halaman tanpa menunggu pemuatan JavaScript selesai. Kami merekomendasikan metode ini jika Anda memerlukan performa halaman yang tinggi.
Penting
Jika Anda menggunakan pemuatan asinkron, ARMS tidak dapat menangkap kesalahan JavaScript atau kesalahan pemuatan sumber daya sebelum SDK pemantauan menyelesaikan inisialisasi.
Pemuatan Sinkron: Dikenal juga sebagai pemuatan blokir. Dalam pemuatan sinkron, browser tidak melanjutkan pemrosesan halaman hingga pemuatan JavaScript selesai. Kami merekomendasikan pemuatan sinkron jika Anda perlu menangkap kesalahan JavaScript dan kesalahan pemuatan sumber daya selama proses berlangsung.

UID Kustom

Ketika agen pemantauan browser ARMS diinstal menggunakan pemuatan sinkron atau asinkron, web SDK secara otomatis menghasilkan ID pengguna (UID) untuk mengumpulkan informasi seperti jumlah pengunjung unik (UV). UID dapat digunakan untuk mengidentifikasi pengguna tetapi tidak memiliki atribut bisnis. Jika Anda ingin menyesuaikan UID, tambahkan konten berikut ke config dalam kode:

uid: "xxx" // UID digunakan untuk mengidentifikasi pengguna. Anda dapat menentukan UID berdasarkan kebutuhan bisnis Anda.

Contoh:

<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 memodifikasi opsi di bagian Konfigurasi Ekstensi SDK, kode berubah. Salin dan tempelkan kode lagi.

Parameter SDK Umum

Fitur pemantauan browser ARMS memungkinkan Anda menyetel berbagai parameter SDK untuk memenuhi persyaratan tambahan. Tabel berikut menjelaskan parameter umum yang sesuai untuk skenario yang dijelaskan dalam topik ini.


pid	String	ID unik proyek. Ini dihasilkan secara otomatis oleh ARMS saat membuat situs.	Ya	Tidak ada
uid	String	ID pengguna. Nilainya adalah pengenal pengguna dan dapat digunakan untuk mencari pengguna. Anda dapat menentukan nilai kustom. Jika Anda tidak menentukan parameter ini, SDK dihasilkan secara otomatis dan diperbarui setiap enam bulan.	Tidak	Dihasilkan secara otomatis oleh SDK
tag	String	Tag input. Setiap log membawa tag.	Tidak	Tidak ada
release	String	Versi aplikasi. Kami merekomendasikan Anda mengonfigurasi parameter ini untuk melihat informasi laporan versi yang berbeda.	Tidak	`undefined`
environment	String	Bidang lingkungan. Nilai 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 sampelnya dengan rasio `1/sample`. Untuk informasi lebih lanjut tentang metrik log performa dan log API sukses, lihat Metrik statistik.	Tidak	`1`
behavior	Boolean	Menentukan apakah akan mencatat perilaku pengguna yang melaporkan kesalahan untuk mempermudah pemecahan masalah.	Tidak	`true`
enableSPA	Boolean	Dengarkan peristiwa hashchange di halaman dan laporkan PV lagi. Ini berlaku untuk skenario aplikasi satu halaman.	Tidak	`false`
enableLinkTrace	Boolean	Untuk informasi lebih lanjut tentang Analisis Tracing ujung ke ujung, lihat Gunakan fitur tracing ujung ke ujung untuk mendiagnosis kesalahan API.	Tidak	`false`

Fitur pemantauan browser ARMS juga menyediakan lebih banyak parameter SDK untuk lebih memenuhi kebutuhan Anda. Untuk informasi lebih lanjut, lihat Referensi SDK.