Application Real-Time Monitoring Service：Gunakan fitur penelusuran depan-belakang untuk mendiagnosis kesalahan API

Konfigurasikan pemantauan browser ARMS

Permintaan API domain yang sama ke aplikasi

1. Periksa apakah browser frontend terhubung ke aplikasi backend.

2. Hapus pilihan opsi Nonaktifkan Pelaporan API Otomatis untuk mengaktifkan fitur pelaporan API otomatis.

3. Atur parameter enableLinkTrace ke true untuk mengaktifkan fitur penelusuran depan-belakang. Contoh kode berikut menunjukkan cara mengaktifkan fitur ini:

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

Permintaan API lintas domain ke aplikasi

1. Periksa apakah browser frontend terhubung ke aplikasi backend.

2. Atur parameter enableLinkTrace dan enableApiCors ke true.

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

   Penting

   Jika Anda mengatur parameter enableApiCors ke true, layanan backend juga harus mendukung permintaan lintas asal dan nilai header kustom. Pastikan semua permintaan dapat dipanggil sesuai harapan. Jika tidak, permintaan mungkin gagal. Contoh kode berikut menunjukkan cara mengonfigurasi NGINX:

   upstream test {
           server 192.168.220.123:9099;
           server 192.168.220.123:58080;
       }
       server {
           listen    5800;
           server_name  192.168.220.123;
           root         /usr/share/nginx/html;
           include /etc/nginx/default.d/*.conf;
           location / {
               proxy_pass http://test;
               proxy_set_header Host $host:$server_port;
               proxy_set_header X-Real-IP $remote_addr;
               proxy_set_header X-Real-PORT $remote_port;
               proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
               proxy_set_header   EagleEye-TraceID $eagleeye_traceid;
               proxy_set_header   EagleEye-SessionID $eagleEye_sessionid;
               proxy_set_header   EagleEye-pAppName $eagleeye_pappname;
           }

3. Konfigurasikan metode Ignore. Untuk informasi lebih lanjut, lihat ignore. Contoh kode berikut menunjukkan cara mengonfigurasi metode Ignore:

   let whitelist = ['api.xxx','source3']; // Konfigurasikan daftar putih.
   let blacklist = ['source2','source6']; // Konfigurasikan daftar hitam.
   // Anda dapat mengonfigurasi daftar hitam dan daftar putih sesuai dengan kebutuhan bisnis Anda. Anda dapat menentukan return true atau return false untuk menentukan apakah akan mengaktifkan daftar putih dan daftar hitam.
   ignore: {
               ignoreApis: [
                   function(str) {   // Konfigurasikan metode Ignore.
                       if (whitelist.includes(str)) {
                           return false;
                       }
                       return true; // Jika true dikembalikan, abaikan permintaan API.
                   }]
            }

   Catatan

   Metode Ignore mirip dengan daftar hitam dan daftar putih. Metode ini melarang modifikasi header pada permintaan sumber daya pihak ketiga yang tidak sah untuk mencegah kesalahan dalam permintaan sumber daya.

Prinsip

• Jika pelaporan API otomatis diaktifkan dan API serta nama domain aplikasi memiliki asal yang sama, header kustom EagleEye-TraceID dan EagleEye-SessionID ditambahkan ke header permintaan API. EagleEye-TraceID adalah pengenal jejak yang menghubungkan frontend dan backend.

• Jika API dan nama domain aplikasi tidak memiliki asal yang sama, tidak ada header kustom yang ditambahkan ke header permintaan API. Hal ini memastikan bahwa aplikasi dapat mengirim permintaan seperti yang diharapkan.

• Untuk memeriksa apakah konfigurasi penelusuran depan-belakang telah diterapkan, buka Konsol ARMS dan periksa header permintaan API. Jika header EagleEye-TraceID dan EagleEye-SessionID termasuk dalam header permintaan API, konfigurasi telah berhasil diterapkan.

  Peringatan

  Nilai header EagleEye-TraceID dan EagleEye-SessionID dibuat secara otomatis. Kami sarankan Anda tidak menyetel nilai-nilai tersebut secara manual.

  

Skenario dan kasus

Jika permintaan membutuhkan waktu lebih lama dari yang diharapkan, Anda dapat menentukan apakah penyebabnya adalah transmisi jaringan atau proses panggilan backend berdasarkan garis waktu panggilan. Anda juga dapat mengklik tumpukan metode aplikasi backend untuk melihat jejak backend lengkap dari permintaan. Dengan demikian, Anda dapat mengidentifikasi penyebab kesalahan API berdasarkan bisnis.

• Lakukan langkah-langkah berikut untuk mengidentifikasi penyebab kesalahan jika API mengembalikan kode kesalahan atau terjadi kesalahan logika bisnis:

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

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

  3. Di panel navigasi kiri, pilih Aplikasi > API Request.

  4. Di tab API Failure List bagian API Link Trace(TOP20), temukan API atau ID jejak yang relevan, dan klik Link Trace. Anda kemudian dapat melihat waktu respons keseluruhan pemantauan browser dan bagan urutan panggilan aplikasi backend.

     

  5. Tentukan apakah transmisi jaringan atau proses panggilan backend membutuhkan waktu lebih lama berdasarkan garis waktu panggilan.

  6. Klik ikon Pembesar di kolom Method Stack aplikasi backend untuk melihat jejak backend keseluruhan dari permintaan. Anda kemudian dapat mengidentifikasi penyebab kesalahan API berdasarkan bisnis.

     

• Lakukan langkah-langkah berikut untuk mengidentifikasi penyebab kesalahan jika waktu respons API lebih lama dari yang diharapkan:

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

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

  3. Di panel navigasi kiri, pilih Aplikasi > API Request.

  4. Di bagian API Link Trace(TOP20), API diurutkan berdasarkan waktu respons secara menurun. Temukan API atau ID jejak yang waktu responsnya lebih lama dari yang diharapkan.

  5. Klik Link Trace. Lalu, lihat waktu respons keseluruhan pemantauan browser dan bagan urutan panggilan aplikasi backend.

     • Jika waktu pemrosesan aplikasi backend singkat tetapi waktu respons keseluruhan panjang, waktu yang diperlukan dari pengiriman permintaan API ke server hingga data kembali ke frontend panjang. Dalam hal ini, klik View Details. Di halaman detail, lihat jaringan, wilayah, browser, perangkat, dan sistem operasi dari permintaan akses.

     • Jika aplikasi backend membutuhkan waktu lama untuk memproses permintaan akses, performa pemrosesan backend buruk. Dalam hal ini, klik ikon pembesar di kolom Method Stack. Di kotak dialog Tumpukan Metode, periksa bagian mana dari penelusuran backend yang memakan waktu untuk menemukan masalah.