Application Real-Time Monitoring Service:Diagnostik error JS

Mengakses fitur

1. Masuk ke ARMS console. Di panel navigasi kiri, pilih Browser Monitoring > Browser Monitoring.

2. Pada halaman Browser Monitoring, pilih wilayah di bilah navigasi atas, lalu klik nama aplikasi yang ingin Anda kelola.

3. Di panel navigasi kiri, pilih Application > JS Error Diagnostics.

   Di pojok kanan atas halaman JS Error Diagnostics, Anda dapat memilih rentang waktu.

Ikhtisar error

Bagian Error Overview menampilkan statistik utama dan tren error JS dalam rentang waktu yang dipilih, mencakup metrik berikut:

• Errors: Jumlah total kesalahan JavaScript dalam rentang waktu yang dipilih.

• JS Error Rate: Persentase tampilan halaman yang mengalami error dari total tampilan halaman dalam rentang waktu yang dipilih.

• Affected Users: Jumlah dan persentase pengguna yang terdampak oleh error JS.

Di bagian Error Overview, Anda dapat:

• Arahkan kursor ke grafik. Tooltip akan muncul menampilkan jumlah error, laju error, dan pengguna yang terdampak pada titik waktu tersebut.

• Arahkan kursor ke titik data pada grafik hingga kursor berubah menjadi ikon tangan, lalu klik titik data tersebut untuk membuka kotak dialog Exception Insight. Untuk informasi lebih lanjut, lihat View Exception Insight.

• Klik dan seret area tertentu pada grafik untuk memperbesar jangka waktu spesifik. Untuk mengembalikan tampilan awal, klik Reset Zoom di pojok kanan atas.

Insight pengecualian

Kotak dialog Exception Insight menampilkan detail error JS pada titik waktu tertentu, mencakup metrik berikut:

• Errors: Total jumlah error JS pada titik waktu terkait.

• JS Error Rate: Persentase tampilan halaman yang mengalami error dari total tampilan halaman pada titik waktu terkait.

• Affected Users: Jumlah dan persentase pengguna yang terdampak oleh error JS.

• High frequency error Top 5: Lima error JS paling sering terjadi pada titik waktu terkait, mencakup pesan error yang ditangkap oleh ARMS, jumlah kemunculan, dan jumlah pengguna yang terdampak.

• Page Error Rate Top 5: Lima halaman dengan laju error JS tertinggi pada titik waktu terkait, mencakup nama halaman, laju error JS halaman tersebut, dan jumlah tampilan halaman.

Di kotak dialog Exception Insight, Anda dapat:

• Klik tab High frequency error Top 5. Di kolom Actions, klik Diagnosis untuk menuju halaman Error details. Untuk informasi lebih lanjut, lihat View Error Detail.

• Klik tab Page Error Rate Top 5. Di kolom Actions untuk halaman target, klik Analyze untuk melihat ikhtisar error halaman tersebut.

Halaman berdasarkan laju error

Tab Page Ranked by Error Rate mencantumkan halaman tempat terjadinya error JS, diurutkan berdasarkan laju error JS secara menurun untuk rentang waktu yang dipilih. Daftar ini mencakup metrik berikut:

• Page: Halaman tempat terjadinya error JS.

• Error Rate: Persentase dari total tampilan halaman yang mengandung error dalam rentang waktu yang dipilih.

• Views: Jumlah tampilan halaman untuk halaman tersebut.

Di kolom Actions, klik Analyze untuk melihat ikhtisar error halaman tersebut.

Error yang sering terjadi

Tab Frequent Errors mencantumkan error JS yang terjadi dalam rentang waktu yang dipilih, diurutkan berdasarkan jumlah kemunculan secara menurun. Daftar ini mencakup metrik berikut:

• Error Message: Pesan error JS yang ditangkap oleh ARMS.

• Page: Halaman tempat terjadinya error JS.

• Errors: Jumlah kemunculan error JS tersebut.

• Affected Users: Jumlah dan persentase pengguna yang terdampak oleh error JS tersebut.

Di kolom Actions, klik Diagnosis untuk menuju tab Error details. Untuk informasi lebih lanjut, lihat View Error Detail.

Detail error

Tab Error details menampilkan informasi berikut:

• Summary

  • Name

  • Type

  • Time (Waktu saat error JS terdeteksi)

  • Device

  • Operating System

  • Browser

  • IP

  • Network Type

  • Region

  • Lines

  • Column

  • URL

  • File (Path file tempat terjadinya error JS)

  • App Version

• Stack Information: Urutan pemanggilan fungsi yang menyebabkan error.

• User Behavior Backtracking: Jejak tindakan pengguna untuk membantu mereproduksi error.

Pada tab Error details, Anda dapat melakukan operasi berikut:

• Untuk menentukan lokasi pasti error JS, perluas entri di bagian Stack Information, lalu klik Select SourceMap File. Di kotak dialog SourceMap File, pilih source map yang sudah ada atau unggah yang baru, lalu klik OK.

  ARMS kemudian menggunakan source map tersebut untuk menghubungkan kode yang telah diminifikasi dengan kode sumber aslinya, sehingga mengungkap lokasi pasti error.

• Untuk melihat perjalanan pengguna, lihat bagian User Behavior Trace.

• Untuk melihat distribusi error, klik tab Error Distribution.

Jejak Perilaku Pengguna

Bagian User Behavior Backtracking pada tab Error details menampilkan perjalanan pengguna untuk membantu Anda mereproduksi konteks error.

Bagian stack trace menampilkan pesan error spesifik, seperti Error Request failed with status code 504, dan tumpukan panggilan detailnya. Log perilaku mencakup jenis event seperti API request, click event, dan page navigation, yang disusun secara kronologis. Klik View Session untuk melihat sesi lengkapnya.

Distribusi error

Tab Error Distribution pada halaman diagnostik error JS menunjukkan bagaimana error JS tertentu didistribusikan berdasarkan dimensi berikut:

• Time View: Hanya didukung untuk distribusi error tingkat halaman.

• Browser View

• Operating System Distribution

• Device Distribution

• Version View

• Geographical View: Statistik diagregasi berdasarkan provinsi, kota, atau daerah otonom pada tampilan China dan berdasarkan negara/wilayah pada tampilan Dunia.

Pada tab Error Distribution, Anda dapat:

• Di bagian Time View, arahkan kursor ke grafik distribusi untuk menampilkan jumlah error spesifik.

• Di bagian Operating System Distribution, Device Distribution, Version View, dan Browser View, arahkan kursor ke grafik distribusi untuk menampilkan jumlah error spesifik beserta persentasenya.

• Di bagian Geographical View, pada tab China atau World, klik panah di header kolom Errors untuk mengurutkan tabel secara menaik atau menurun.

FAQ

• Bagaimana cara mengaktifkan atau menonaktifkan fitur User Behavior Trace?

  Fitur ini diaktifkan secara default. Untuk menonaktifkannya, tambahkan item konfigurasi SDK behavior: false ke objek config. Untuk informasi lebih lanjut tentang konfigurasi SDK, lihat SDK reference.

• Setelah Anda mengaktifkan User Behavior Trace, pesan yang dicetak oleh console.log selama debugging dilacak ke file SDK ARMS bl.js alih-alih lokasinya di kode sumber. Bagaimana cara mengatasinya?

  Hal ini terjadi karena ARMS memantau output di konsol browser dengan meng-override metode objek console, seperti log. Solusinya adalah sebagai berikut:

  • Metode 1 (Direkomendasikan): Konfigurasikan blackboxing di Chrome.

    1. Buka Chrome. Tekan Ctrl+Shift+I untuk membuka DevTools, lalu klik ikon Settings.

    2. Di panel navigasi kiri pada panel Settings, klik Blackboxing. Klik Add pattern. Di bidang Pattern, masukkan /bl.*\.js$, lalu klik Add.

  • Metode 2: Nonaktifkan User Behavior Trace menggunakan item konfigurasi SDK behavior: false.

    <script>
        ! (function ( c , b, d, a ) {
            c [a] || ( c[a] = {});
            c [a].config = {
                pid: "xxxxx",
                imgUrl: "https://arms-retcode.aliyuncs.com/r.png?",
                sendResource: true,
                enableLinkTrace: true,
                behavior: false
            };
            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>

  Setelah mengikuti langkah-langkah di atas, pesan yang dicetak oleh console.log akan mengarah ke lokasi yang sesuai di kode sumber.