Application Real-Time Monitoring Service:Diagnosis kesalahan API dengan pelacakan ujung ke ujung

Konfigurasi Pemantauan Browser ARMS

Permintaan API same-origin

1. Pastikan telah ada pemetaan antara situs frontend Anda dan aplikasi backend.

2. Pastikan pelaporan API otomatis telah diaktifkan.

3. Atur parameter enableLinkTrace menjadi true untuk mengaktifkan pelacakan ujung ke ujung. Kode berikut menunjukkan contoh konfigurasinya:

   <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://sdk.rum.aliyuncs.com/v1/bl.js","__bl");
   </script>                         

Permintaan API cross-origin

1. Pastikan telah ada pemetaan antara situs frontend Anda dan aplikasi backend.

2. Atur parameter enableLinkTrace dan enableApiCors menjadi 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://sdk.rum.aliyuncs.com/v1/bl.js","__bl");
   </script>

   Penting

   Jika Anda mengatur parameter enableApiCors menjadi true, layanan backend Anda juga harus mendukung permintaan lintas asal dan nilai header kustom. Pastikan semua permintaan berfungsi dengan benar selama Pengujian integrasi. Jika tidak, permintaan tersebut dapat gagal. Kode berikut menunjukkan contoh konfigurasi 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. Untuk mengonfigurasi ignore, lihat ignore. Konfigurasinya sebagai berikut:

   let whitelist = ['api.xxx','source3']; // Daftar putih.
   let blacklist = ['source2','source6']; // Blacklist.
   // Pilih antara daftar putih atau blacklist sesuai kebutuhan Anda dengan mengembalikan true atau false dalam fungsi.
   ignore: {
               ignoreApis: [
                   function(str) {   // Fungsi.
                       if (whitelist.includes(str)) {
                           return false;
                       }
                       return true; // Kembalikan true untuk mengabaikan.
                   }]
            }

   Catatan

   Parameter ignore berfungsi sebagai daftar putih atau blacklist. Parameter ini mencegah modifikasi header untuk permintaan ke sumber daya pihak ketiga tertentu, sehingga membantu menghindari kesalahan permintaan.

Cara Kerja

• Saat pelaporan API otomatis diaktifkan, SDK menambahkan dua header kustom, EagleEye-TraceID dan EagleEye-SessionID, ke permintaan API yang dikirim ke origin yang sama.

• Jika permintaan API dikirim ke origin yang berbeda, SDK tidak menambahkan header kustom ini. Hal ini memastikan bahwa permintaan lintas asal dapat dikirim tanpa kesalahan.

• Untuk memverifikasi bahwa konfigurasi pelacakan ujung ke ujung aktif, buka konsol developer browser Anda dan periksa header permintaan dari panggilan API. Jika header EagleEye-TraceID dan EagleEye-SessionID ada, fitur tersebut aktif.

  Peringatan

  Nilai EagleEye-TraceID dan EagleEye-SessionID memiliki makna spesifik dan dihasilkan secara otomatis. Jangan menghasilkannya secara manual.

Kasus Penggunaan dan Contoh

Timeline membantu menentukan apakah latensi tinggi berasal dari transport jaringan atau proses backend. Dengan mengklik stack metode untuk aplikasi backend, Anda dapat melihat jejak pemanggilan backend lengkap untuk permintaan tersebut.

• Jika API mengembalikan kode kesalahan atau terjadi kesalahan logika bisnis, ikuti langkah-langkah berikut untuk mengidentifikasi penyebabnya:

  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, klik API request.

  4. Di bagian kanan API link trace (TOP 20), temukan API atau trace ID yang relevan di API failure list dan klik Managed Service for OpenTelemetry di kolom Actions. Hal ini akan membuka tampilan yang menunjukkan total waktu frontend dan timeline panggilan backend.

     Hasil pelacakan ditampilkan dalam tabel di tab Invocation trace. Kolom-kolomnya mencakup Application name, Log time, Status, IP address, Invocation type, Service name, Method stack, Thread profiling, dan Timeline. Di tabel ini, Anda dapat melihat jenis pemanggilan (misalnya Browser atau HTTP Entry), status (titik merah menunjukkan kesalahan, titik hijau menunjukkan keberhasilan), serta perbandingan waktu yang dihabiskan oleh setiap rentang.

  5. Gunakan timeline untuk menentukan apakah latensi tinggi disebabkan oleh transport jaringan atau pemrosesan backend.

  6. Untuk aplikasi backend, klik ikon kaca pembesar di kolom Method Stack untuk melihat jejak pemanggilan backend lengkap untuk permintaan ini. Anda kemudian dapat mengidentifikasi penyebab kesalahan API berdasarkan logika bisnis Anda.

     Panel detail jejak pemanggilan menampilkan tabel yang menunjukkan hierarki pemanggilan, nomor baris, informasi tambahan, dan timeline (dalam milidetik) untuk setiap metode. Nama metode dengan latensi yang tidak biasa tinggi disorot dalam warna merah, dan batang biru di sebelah kanan memvisualisasikan proporsi waktu setiap metode, membantu Anda dengan cepat menemukan hambatan kinerja.

• Jika permintaan API memiliki latensi tinggi, ikuti langkah-langkah berikut untuk mengidentifikasi penyebabnya:

  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, klik API request.

  4. Di bagian kanan API link trace (TOP 20), urutkan API berdasarkan durasi permintaan secara menurun untuk menemukan API atau trace ID dengan latensi tinggi.

  5. Klik tautan Managed Service for OpenTelemetry di kolom Actions untuk melihat total waktu frontend dan timeline panggilan backend.

     • Jika waktu pemrosesan backend singkat tetapi total waktu respons lama, hal ini menunjukkan latensi jaringan tinggi. Dalam kasus ini, klik View details untuk memeriksa detail session, termasuk jaringan, wilayah, browser, perangkat, dan sistem operasi.

     • Jika waktu pemrosesan backend lama, hal ini menunjukkan kinerja buruk. Klik ikon kaca pembesar di kolom Method Stack. Di kotak dialog stack metode lokal, periksa jejak backend untuk menemukan bagian yang paling memakan waktu dan identifikasi masalahnya.