Penautan Jejak Antarmuka Depan dan Backend dengan Analisis Tracing - Application Real-Time Monitoring Service

Dalam Pemantauan Browser, mengetahui waktu respons permintaan API saja tidak cukup karena Anda kehilangan visibilitas terhadap kinerja jaringan dan jejak lengkap layanan backend. Hal ini menyulitkan pemecahan masalah API secara cepat dan akurat. Fitur tracing antarmuka depan ke backend mengatasi keterbatasan tersebut dengan menautkan seluruh perjalanan permintaan API—mulai dari klien hingga layanan backend—untuk memberikan gambaran lengkap eksekusi kode.

Prasyarat

Instal agent menggunakan npm. Untuk informasi lebih lanjut, lihat Menyiapkan Pemantauan Browser dengan npm.

Latar Belakang

Secara default, Pemantauan Browser dan Pemantauan Aplikasi diintegrasikan secara otomatis sehingga Anda dapat melihat data tracing permintaan end-to-end baik melalui Pemantauan Browser maupun pelacakan sesi. Namun, jika Anda menggunakan protokol OpenTracing (yang menggunakan trace ID open-source uber-trace-id), Anda harus menghubungkan konfigurasi JavaScript Pemantauan Browser secara manual dengan Managed Service for OpenTelemetry. Pada tab trace, sebuah tabel merinci setiap panggilan dengan kolom Nama Aplikasi, Waktu Log, Status, Alamat IP, Jenis Panggilan, Nama Layanan, tumpukan panggilan, profil thread, dan garis waktu (dalam milidetik). Sebagai contoh, permintaan dengan jenis panggilan frontend mungkin memakan waktu 30,889 ms dan memiliki status abnormal (titik merah), sedangkan panggilan HTTP entry-nya yang bersesuaian memakan waktu 68,964 ms dan memiliki status normal (titik hijau). Anda dapat mengklik ikon kaca pembesar pada kolom tumpukan panggilan atau profil thread untuk melihat informasi detail.

Parameter

Saat menginstal agent menggunakan npm, Anda harus mengonfigurasi parameter berikut.

const BrowserLogger = require('alife-logger');
const __bl = BrowserLogger.singleton({
    pid:"xxx",     // site ID
    appType:"web",
    enableLinkTrace:true,
    linkType: 'tracing', // Jenis tracing. Nilai default adalah 'arms', yang menggunakan protokol ARMS proprietary dan mengirim header dengan awalan 'EagleEye'. Anda dapat mengubahnya menjadi 'tracing', yang menggunakan protokol Jaeger dan mengirim header 'uber-trace-id'.
    enableApiCors: true  // Menentukan apakah permintaan lintas asal dan header kustom diizinkan. Nilai default adalah false. Jika diatur ke true, layanan backend Anda harus dikonfigurasi untuk mendukung ini.
});

enableApiCors:true: Layanan backend Anda harus mendukung permintaan lintas asal dan nilai header kustom. Jika tidak, permintaan akan gagal, seperti yang ditunjukkan dalam pesan error berikut.

[WDS] Live Reloading enabled.                                              client:52
Access to fetch at 'http://xxx.xxx.xxx.155:9000/api' from origin 'http://127.0.0.1:9000' has been blocked by CORS policy: Response to preflight request doesn't pass    arms.html:1
access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors'
to fetch the resource with CORS disabled.
GET http://xxx.xxx.xxx.155:9000/api net::ERR_FAILED

Jika permintaan gagal, lihat contoh konfigurasi Node.js berikut:

// Izinkan akses lintas asal ke layanan.
app.all('*', function (req, res, next) {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers', 'Content-Type,uber-trace-id'); // Jika linkType adalah 'tracing', header 'uber-trace-id' harus diizinkan. Jika linkType adalah 'arms', header 'EagleEye-TraceID', 'EagleEye-SessionID', dan 'EagleEye-pAppName' harus diizinkan.
  res.header('Access-Control-Allow-Methods', '*');
  next();
});

enableLinkTrace:true: Saat parameter ini diatur ke true:
- Jika permintaan API dan halaman memiliki origin yang sama, trace ID secara otomatis ditambahkan ke header permintaan untuk mengaktifkan tracing antarmuka depan ke backend.
- Jika permintaan API dan halaman memiliki origin yang berbeda, Anda juga harus mengatur enableApiCors ke true. Layanan backend Anda juga harus mendukung permintaan lintas asal dan header kustom.
  
  Penting
  Pastikan semua permintaan dikonfigurasi dengan benar agar kompatibel dengan backend Anda; jika tidak, permintaan tersebut mungkin gagal. Jika permintaan gagal, lihat contoh konfigurasi Node.js di atas.
linkType:
- arms (default): Menggunakan protokol ARMS proprietary dan mengirim beberapa header yang diawali dengan EagleEye.
- tracing: Menggunakan protokol Jaeger dan mengirim header uber-trace-id.