502 Satu Halaman, Header Kekecilan

Salah satu proyek lain yang saya host lewat tunnel yang sama dengan pujamalca.my.id adalah aplikasi Next.js untuk situs undangan digital. Selama berbulan-bulan jalan tanpa drama, sampai suatu hari saya iseng cek beberapa halaman dan nemu keanehan: halaman utama situsnya balas normal (200 OK), tapi satu halaman preview tertentu dan file favicon-nya selalu 502 Bad Gateway. Konsisten, setiap kali dicoba.

Gejala yang Bikin Bingung

Yang bikin ini nyebelin adalah sifatnya yang tidak konsisten antar-halaman. Kalau semua halaman di aplikasi itu 502, saya bakal langsung curiga ke proses backend-nya yang mati, atau tunnel yang putus. Tapi ini cuma sebagian: homepage baik-baik saja, sementara satu route spesifik dan favicon selalu gagal. Reflek pertama saya justru salah arah — saya sempat curiga ke koneksi tunnel, jangan-jangan ada paket yang kepotong di tengah jalan untuk request tertentu. Saya cek status tunnel, semua sehat. Saya restart proses Next.js-nya, tetap 502 di halaman yang sama. Baru setelah itu saya sadar seharusnya dari awal saya baca dulu log error nginx, bukan menebak-nebak di lapisan jaringan.

Root Cause: Header yang Kegedean

Begitu saya buka log error nginx, jawabannya langsung kelihatan jelas:

upstream sent too big header while reading response header from upstream

Pesan ini artinya nginx menolak response dari backend karena ukuran header-nya melebihi buffer yang dialokasikan. Saya cek lebih detail pakai curl untuk lihat header mentah dari halaman bermasalah, dan total ukurannya sekitar 6KB. Setelah dirinci satu per satu, penyumbang terbesarnya ternyata satu header tunggal: Link, yang dipakai Next.js untuk preload font. Header itu sendirian sudah sekitar 4.5KB, karena berisi daftar resource yang mau di-preload beserta atributnya.

Masalahnya, ukuran buffer header default nginx cuma 4KB. Jadi begitu response dari Next.js membawa header total di atas itu, nginx langsung menyerah dan balas 502 ke client — bukan karena backend-nya error, bukan karena tunnel putus, tapi karena reverse proxy-nya kehabisan tempat buat nampung header saja, sebelum sempat baca body-nya sama sekali. Favicon kena imbas yang sama karena di-serve lewat route yang membawa header preload serupa.

Solusi: Naikkan Buffer Proxy

Fix-nya relatif sederhana begitu root cause-nya ketemu: menaikkan ukuran buffer proxy nginx, khusus di blok konfigurasi situs itu saja supaya tidak mengubah perilaku situs lain yang lewat proxy yang sama. Sebelum ubah apa pun saya backup dulu file konfigurasi lamanya, baru tambahkan tiga directive ini:

proxy_buffer_size 16k;
proxy_buffers 4 16k;
proxy_busy_buffers_size 16k;

proxy_buffer_size menentukan ukuran buffer untuk baris pertama dan header response, proxy_buffers jumlah dan ukuran buffer untuk sisa response, dan proxy_busy_buffers_size batas ukuran buffer yang boleh "sibuk" dikirim ke client sebelum bisa dipakai lagi. Setelah nilai-nilai ini dinaikkan jauh di atas 4KB, saya test konfigurasinya lalu reload nginx. Halaman preview dan favicon langsung balas normal, tanpa perlu sentuh kode Next.js-nya sama sekali.

Pelajaran

Kalau nemu 502 yang cuma muncul di sebagian halaman — bukan di semua halaman aplikasi yang sama — itu petunjuk kuat bahwa masalahnya bukan di konektivitas atau tunnel, tapi di sesuatu yang spesifik ke response halaman itu sendiri. Dan langkah pertama yang seharusnya saya ambil, bukan yang terakhir, adalah baca log error nginx. Satu baris di sana langsung mengarahkan saya ke akar masalah, jauh lebih cepat daripada menebak-nebak di lapisan jaringan.

Pelajaran yang lebih umum: framework modern seperti Next.js gampang menghasilkan header response yang gemuk — entah dari preload resource, cookie sesi, atau metadata lain — dan ukuran itu bisa dengan mudah melebihi buffer default reverse proxy manapun, bukan cuma nginx. Kalau kamu host banyak aplikasi modern di belakang satu proxy yang sama, menaikkan sedikit ukuran buffer header sejak awal bisa jadi pencegahan yang murah, daripada nunggu satu halaman tiba-tiba 502 tanpa alasan yang jelas.