Application Real-Time Monitoring Service：Jejak Sesi Lambat

Prasyarat

• Aplikasi Anda harus terhubung ke pemantauan frontend ARMS. Untuk informasi lebih lanjut, lihat Ikhtisar Pemantauan Browser.
• Konfigurasi SDK pemantauan frontend ARMS perlu dimodifikasi.

  Secara default, SDK tidak melaporkan data tentang sumber daya statis yang dimuat di halaman. Untuk mendapatkan data tersebut dan mengaktifkan jejak sesi lambat, atur parameter sendResource menjadi true dalam file config SDK. Berikut adalah contoh konfigurasi SDK:

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

• Aplikasi harus diterapkan ulang.

  Setelah aplikasi diterapkan ulang, ketika peristiwa onload di halaman dipicu, data tentang sumber daya statis yang dimuat di halaman saat ini dilaporkan. Kemudian, Anda dapat mengidentifikasi masalah pemuatan halaman lambat menggunakan fitur pemantauan frontend ARMS.

Pergi ke Halaman Jejak Sesi

1. Masuk ke Konsol ARMS. Di panel navigasi sebelah 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 sebelah kiri, pilih Application > Session Traces.

Studi kasus: Identifikasi hambatan performa halaman

Contoh berikut menunjukkan cara mengidentifikasi hambatan performa halaman.

1. Di panel navigasi sebelah kiri, pilih Application > Page Speed. Hasil ditampilkan pada gambar berikut. Waktu pemuatan halaman penuh mencapai 36,7 detik pada pukul 11:00.

   

2. Di halaman Page Speed, seret bilah gulir di sebelah kanan untuk pergi ke bagian Slow Page Session Trace (TOP20). Bagian ini mencantumkan 20 sesi teratas dengan kecepatan pemuatan halaman terendah dalam periode waktu tertentu.

   Untuk mengubah rentang waktu yang ditentukan, klik ikon jam di sudut kanan atas bagian ini dan pilih nilai.

   Kecepatan pemuatan halaman sebuah sesi mencapai 36,72 detik pada pukul 11:36:46, seperti ditunjukkan pada gambar berikut. Akses ini adalah penyebab langsung peningkatan tajam waktu pemuatan halaman.

   

3. Di bagian Slow Page Session Trace(TOP20), klik nama halaman yang relevan di kolom Page.

   Di halaman Slow Loading Details, Anda dapat melihat bagan air terjun untuk pemuatan sumber daya statis. Ini membantu mengidentifikasi hambatan performa.

   

4. Di bagian Page Information di bagian atas halaman Slow Loading Details, lihat informasi akses seperti alamat IP klien, browser, dan sistem operasi. Ini membantu lebih jauh mengidentifikasi penyebab dan menyelesaikan hambatan. Misalnya, Anda dapat menentukan apakah hambatan disebabkan oleh kondisi jaringan.

   

Metode lain untuk mengidentifikasi hambatan performa

Selain halaman Page Speed, Anda juga dapat mengidentifikasi hambatan performa di halaman Session Traces.

1. Di panel navigasi sebelah kiri, pilih Session Traces. Di halaman Session Traces, lihat semua sesi aplikasi Anda. Anda dapat memfilter sesi berdasarkan kondisi seperti nama pengguna, ID pengguna, ID sesi, alamat IP, URL halaman, browser, versi browser, jenis koneksi jaringan, dan wilayah.

   

2. Di kolom Session ID, klik ID sesi yang detailnya ingin Anda lihat. Di halaman Session Details, Anda dapat melihat gambaran sesi dan jejak sesi. Untuk informasi lebih lanjut, lihat Jejak Sesi.

FAQ

1. Mengapa nilai parameter Size adalah 0 di bagan air terjun pemuatan sumber daya?

   Ukuran diperoleh melalui antarmuka PerformanceResourceTiming.transferSize. Atribut baca-saja dari parameter transferSize menunjukkan ukuran sumber daya yang diekstraksi dalam delapan bit. Jika sumber daya diperoleh dari cache lokal atau merupakan sumber daya lintas asal, nilai yang dikembalikan oleh parameter ini adalah 0.

   Buka browser Chrome, tekan F12 untuk membuka panel alat pengembang. Ketika Disable cache di tab Network tidak dipilih, nilai parameter transferSize adalah 0.

   

   Solusi

   Pilih Disable cache. Lalu, nilai parameter transferSize akan ditampilkan.

   

2. Mengapa nilai parameter Time adalah 0 di bagan air terjun pemuatan sumber daya?

   Waktu diperoleh melalui metode PerformanceResourceTiming.duration. Di bagan air terjun pemuatan sumber daya statis, nilai parameter Time kadang-kadang 0. Alasannya adalah bahwa permintaan mengenai cache panjang yang dikontrol oleh metode max-age.

   Solusi

   Buka browser Chrome dan tekan F12 untuk membuka panel alat pengembang. Kosongkan Disable cache di tab Network dan segarkan halaman. Lalu, waktu akses jaringan akan ditampilkan.

3. Mengapa nilai yang dikembalikan untuk parameter Time adalah 0?

   Nilai banyak parameter terkait waktu yang dikembalikan oleh permintaan API mungkin 0. Alasannya adalah bahwa titik waktu untuk mendapatkan sumber daya lintas asal adalah 0 karena kebijakan asal yang sama. Atribut berikut terlibat:

   • redirectStart
   • redirectEnd
   • domainLookupStart
   • domainLookupEnd
   • connectStart
   • connectEnd
   • secureConnectionStart
   • requestStart
   • responseStart

   Solusi

   Tambahkan konfigurasi Timing-Allow-Origin, seperti Timing-Allow-Origin:*, ke header respons sumber daya.

4. Dalam rentang waktu apa bagan air terjun pemuatan API menunjukkan status pemuatan API?

   Informasi berikut menunjukkan awal dan akhir rentang waktu di bagan air terjun pemuatan API:

   • Awal: titik waktu ketika halaman mulai dimuat
   • Akhir: titik waktu ketika halaman sepenuhnya dimuat ditambah 1 menit

   Bagan air terjun pemuatan API menunjukkan status keseluruhan API yang diminta selama pemuatan halaman.

5. Mengapa waktu respons di bagan air terjun pemuatan API berbeda dengan yang ada di bagan air terjun pemuatan sumber daya halaman?

   Waktu respons di bagan air terjun pemuatan API beberapa milidetik lebih lama daripada yang ada di bagan air terjun pemuatan sumber daya halaman, karena kedua nilai diperoleh dengan cara yang berbeda. Waktu respons di bagan air terjun pemuatan API dihitung dari titik waktu ketika API mengirim permintaan hingga titik waktu ketika data dikembalikan. Waktu respons API di bagan air terjun pemuatan sumber daya halaman diperoleh dengan memanggil metode performance.getEntriesByType('resource') yang disediakan oleh browser.

   Perbedaan beberapa milidetik tidak memengaruhi pemecahan masalah hambatan performa.

6. Kapan awal garis waktu di bagan air terjun pemuatan API?

   Awal garis waktu di bagan air terjun pemuatan API adalah perbedaan antara titik waktu ketika API mengirim permintaan dan titik waktu ketika nilai parameter fetchStart halaman dikembalikan. Garis waktu ini menampilkan kapan API mengirim permintaan selama pemuatan halaman dan waktu responsnya.

Referensi

• Kecepatan Pemuatan Halaman
• FAQ Pemantauan Browser