File HAR — Log Debug HTTP yang Anda Tidak Sadari Butuhkan

Panggilan API Anda gagal di produksi. Bekerja dengan baik di curl, bekerja dengan baik secara lokal. Dukungan membuka tiket dan meminta Anda untuk 'membagikan file HAR.' Anda mengangguk dengan percaya diri dan mencari "apa itu file HAR" di tab lain.

Ini adalah tab tersebut. Berikut penjelasan tentang apa itu file HAR, apa yang terdapat di dalamnya, dan bagaimana menggunakan file HAR untuk menemukan masalahnya.

Apa itu File HAR

HAR berarti HTTP Archive. Ini adalah file JSON yang mencatat setiap permintaan HTTP yang dibuat oleh browser Anda selama sesi — URL, metode, kode status, header permintaan dan respons, badan permintaan dan respons, cookie, serta analisis waktu. Semuanya, untuk setiap permintaan di halaman tersebut.

Format ini telah standarisasi oleh Web Performance Working Group (versi spesifikasi 1.2) dan didukung oleh Chrome, Firefox, Safari, dan Edge. Bayangkan ini sebagai ekspor terstruktur dari tab Jaringan browser Anda — sesuatu yang Anda berikan kepada seseorang yang sedang memperbaiki masalah Anda tanpa memberikan akses SSH ke mesin Anda.

File HAR sangat berguna ketika kegagalan bersifat terputus-putus, ketika hanya muncul di browser tertentu, atau ketika Anda perlu menunjukkan vendor bahwa ya, API mereka mengembalikan kode 500 dan bukan masalah PEBKAC.

Cara Menangkap File HAR

Chrome dan Edge

1. Buka DevTools (F12 atau Cmd+Option+I di Mac)
2. Buka Jaringan tab
3. Aktifkan Simpan log jika kegagalan terjadi setelah redirect atau reload halaman
4. Ulangi masalah tersebut
5. Klik kanan di mana pun di daftar permintaan → Simpan semua sebagai HAR dengan isi

Firefox

1. Buka DevTools → Jaringan tab
2. Ulangi permintaan tersebut
3. Klik ikon roda gigi → Simpan Semua sebagai HAR

Taman Safari

1. Aktifkan menu Develop: Safari → Pengaturan → Lanjutan → Tampilkan Menu Develop
2. Develop → Tampilkan Web Inspector → Jaringan
3. Ulangi masalah tersebut
4. Klik Eksport tombol (ikon panah di toolbar Jaringan)

Satu hal yang perlu diperhatikan tentang Simpan log: tanpa itu, file HAR hanya mencatat permintaan yang dibuat setelah halaman saat ini dimuat. Jika kegagalan terjadi selama otentikasi atau di dalam rantai redirect, Anda akan mendapatkan file kosong atau yang menyesatkan dan akan menghabiskan 20 menit dalam kebingungan. Aktifkan sebelum Anda mengulang masalah tersebut.

Apa yang Ada di Dalam File HAR

Setiap file HAR memiliki struktur tingkat atas yang sama:

{
  "log": {
    "version": "1.2",
    "creator": { "name": "Chrome", "version": "124.0.6367.82" },
    "entries": [ ... ]
  }
}

Itu entries array adalah tempat di mana semua data yang berguna berada. Setiap entri adalah pasangan permintaan-respons lengkap. Sebuah halaman yang dimuat biasanya menghasilkan 50–200 entri; sebuah SPA kompleks yang memuat dashboard dapat melebihi jumlah tersebut.

Entri yang Dianotasi: Field yang Penting

Berikut adalah penjelasan tentang field-field penting dalam satu entri HAR:

Bidang	Lokasi	Apa yang memberi tahu Anda
startedDateTime	Entry	Kapan permintaan tersebut dikeluarkan, dalam format ISO 8601 UTC. Korelasikan ini dengan log server untuk menemukan baris log yang tepat.
time	Entry	Milidetik total dari awal permintaan hingga akhir respons. Angka yang digunakan untuk mengurutkan saat mencari permintaan yang lambat.
serverIPAddress	Entry	IP yang sebenarnya menangani permintaan ini. Penting di belakang load balancer — memberi tahu Anda instance mana yang diakses.
request.method	Permintaan	GET, POST, PUT, DELETE, dll.
request.url	Permintaan	URL lengkap termasuk string query. Perhatikan parameter yang secara tidak sengaja dienkripsi dua kali di sini.
request.headers	Permintaan	Semua header permintaan. Mengandung Authorization — token autentikasi ada di sini. Ini adalah kekhawatiran privasi.
request.postData.text	Permintaan	Badan permintaan mentah. Untuk API JSON, ini adalah payload Anda. Jika API menolak input, periksa hal ini terlebih dahulu.
response.status	Tanggapan	Kode status HTTP. 0 biasanya berarti permintaan diblokir sebelum bisa selesai.
response.headers	Tanggapan	Header respons, termasuk Content-Type, Cache-Control, Set-Cookie. Berguna untuk debugging CORS.
response.content.text	Tanggapan	Badan respons. Untuk API JSON ini adalah JSON mentah. Mungkin dienkripsi dengan base64 untuk respons biner.
timings.blocked	Waktu	Waktu menunggu slot koneksi TCP. Nilai tinggi menunjukkan kehabisan kumpulan koneksi.
timings.dns	Waktu	Waktu pencarian DNS. Lebih dari ~50ms perlu diperhatikan; lebih dari 200ms merupakan masalah.
timings.connect	Waktu	Waktu koneksi TCP. Nilai tinggi = latensi jaringan atau beban TLS, bukan kecepatan server.
timings.wait	Waktu	Waktu dari pengiriman permintaan hingga pertama kali menerima byte (TTFB). Di sini API lambat muncul. TTFB tinggi = server Anda lambat merespons.
timings.receive	Waktu	Waktu untuk mengunduh badan respons. Tinggi hanya jika ukuran payload respons besar.

Apa yang Harus Dilihat

Ketika Anda membuka HAR, Anda biasanya mencari salah satu dari tiga hal berikut:

Permintaan yang gagal

Urutkan atau filter berdasarkan response.status. Di Chrome DevTools Anda dapat memfilter secara langsung dengan status-code:4xx atau status-code:5xx. Setelah Anda mendapatkan permintaan yang gagal, baca seluruh response.content.text — pesan kesalahan dari server biasanya lebih berguna daripada kode status.

Permintaan yang lambat

Urutkan entri berdasarkan timings.wait (TTFB) secara menurun. TTFB tinggi = server Anda lambat. TTFB tinggi dengan normal wait = bottleneck terletak pada jaringan atau tangan tangan TLS, bukan aplikasi Anda. Ini menunjukkan solusi yang sama, sehingga memperoleh ini benar menghemat banyak waktu untuk menyalahkan lapisan yang salah. timings.connect dengan normal wait = titik lemahnya adalah jaringan atau proses TLS, bukan aplikasi Anda. Poin ini mengarah pada solusi yang sama sekali berbeda, sehingga memperoleh ini dengan benar menghemat banyak waktu untuk menyalahkan lapisan yang salah.

Permintaan yang hilang

Kadang-kadang bugnya adalah permintaan yang hilang — webhook yang tidak terjadi, preflight OPTIONS yang diblokir oleh CORS, panggilan analitik yang dimakan oleh bloker iklan. Bandingkan apa yang seharusnya ada di HAR dengan apa yang ada. Kehilangan permintaan adalah data.

Masalah Privasi yang Harus Anda Ketahui

File HAR mengandung segala sesuatu. Termasuk:

• Authorization header — token Bearer, kredensial autentikasi dasar
• Cookie header — token sesi, JWT, apa pun di cookie
• Badan permintaan dan respons — yang mungkin mengandung kata sandi, data pribadi, atau kunci API

Chrome tidak menghapus apa pun saat Anda mengimpor. Sebelum membagikan file HAR kepada dukungan, vendor, atau rekan di luar perusahaan Anda, hapus atau redaksikan field yang sensitif.

Cara tercepat untuk memeriksa dan membersihkan HAR sebelum dibagikan adalah menggunakan Pengaturan File HAR — tempel file Anda, kunjungi entri, dan redaksikan sebelum Anda mengirim. Alternatifnya, jika Anda nyaman dengan jq:

# Strip Authorization headers from all entries
jq '.log.entries[].request.headers |= map(select(.name | ascii_downcase != "authorization"))' file.har

Bukan satu baris yang paling menarik, tapi ini bekerja.

Membaca File HAR Mentah

File HAR adalah JSON, sehingga secara teknis dapat dibaca di setiap editor teks. Dalam praktiknya, mereka sangat besar — sebuah halaman yang dimuat menghasilkan file dengan ratusan kilobyte header dan badan, semua di bawah kunci yang sangat dalam. Beberapa cara untuk menjelajahinya:

• Impor ke DevTools — Chrome dan Firefox mendukung impor file HAR ke tab Jaringan melalui ikon roda gigi. Ini memberi Anda antarmuka pengurutan dan penyaringan seperti penangkapan langsung.
• Pengaturan File HAR — Berbasis browser, tidak perlu instalasi. Bagus ketika Anda mengirim file kepada seseorang yang tidak menggunakan DevTools.
• jq — Untuk penyaringan di baris perintah. jq '.log.entries[] | select(.response.status >= 400) | {url: .request.url, status: .response.status}' mengeluarkan semua permintaan yang gagal dengan URL dalam detik.

Untuk analisis dan penyaringan cepat, jq paling cepat. Untuk pembagian dan inspeksi visual, impor browser atau format online berarti orang lain tidak perlu tahu apa jq adalah.

Anda mungkin juga menyukai