Belajar Remix - Observability & Support

#Pendahuluan

Aplikasi kalian sudah hidup di produksi. Pertanyaan berikutnya: bagaimana kalian tahu aplikasi itu sehat? Tanpa data, semua orang menebak. Episode 22 adalah seni dan ilmu observability — melihat ke dalam aplikasi yang berjalan.

Observability di Remix punya dua sisi: server dan client. Di server, loader dan action adalah titik yang bisa diukur dan dicatat. Di client, real user metrics dan error report menceritakan pengalaman pengguna yang sebenarnya. Keduanya menyatu menjadi gambaran utuh tentang kesehatan aplikasi.

Episode 22 akan membahas monitoring performa, error reporting dengan Sentry, logging server-side, serta dukungan produksi dan incident response.

#Monitoring Performa dan Real User Metrics

#Server-Side Metrics

Waktu eksekusi loader dan action adalah metrik server yang paling berguna. Catat durasi tiap loader untuk menemukan route yang lambat sebelum pengguna mengeluh.

Menghitung durasi loader

export async function loader() {
  const mulai = performance.now();
  const data = await ambilData();
  const durasi = performance.now() - mulai;
  console.log(`loader ambilData: ${durasi.toFixed(0)}ms`);
  return data;
}

performance.now memberi akurasi milidetik untuk mengukur satu operasi. Untuk scale produksi, kumpulkan metrik ini ke layanan monitoring, bukan hanya console.

#Real User Monitoring

Sementara itu, data dari browser menceritakan pengalaman sebenarnya. Metrik seperti LCP (waktu elemen terbesar tampil) dan INP (responsivitas) diukur dari perangkat pengguna. Real user monitoring melengkapi test sintetis: data nyata dari jaringan dan perangkat pengguna sebenarnya.

Perbedaan penting di antara keduanya: test sintetis mengukur dengan kondisi yang sama setiap kali, sedangkan real user monitoring menangkap kondisi sebenarnya — jaringan lambat, perangkat lemah, dan variasi geografi. Kombinasi keduanya memberi pandangan paling utuh.

#Error Reporting dengan Sentry

#Setup Sentry untuk Remix

Sentry adalah pilihan paling umum untuk error tracking di ekosistem Remix. Ia menangkap error di client dan server, lengkap dengan stack trace dan konteks.

npm install @sentry/remix

Setelah inisialisasi, error dari loader, action, dan komponen otomatis terlaporkan. Konfigurasikan DSN melalui environment variables — jangan pernah menuliskannya di kode.

#Konteks Error yang Berharga

Error yang baik membawa konteks: route mana, pengguna siapa, request seperti apa. Sentry memungkinkan menambah konteks khusus sehingga tim bisa memprioritaskan perbaikan. Error tanpa konteks sulit ditindaklanjuti.

#Logging Server-Side Requests dan Response Metrics

#Log Terstruktur

Log yang terstruktur — bukan sekadar string — mudah dicari dan dianalisis. Setiap log membawa field seperti timestamp, route, status, dan durasi. Log terstruktur adalah bahasa yang dipahami alat observability.

Log terstruktur di entry.server

function logRequest(request, durasi, status) {
  console.log(JSON.stringify({
    waktu: new Date().toISOString(),
    url: request.url,
    status,
    durasiMs: durasi,
  }));
}

Pola ini mencatat satu baris JSON per request dengan semua konteks yang dibutuhkan. Platform serverless sering menyediakan log terpusat yang bisa di-query dari JSON semacam ini.

#Metrik Response

Selain log, kumpulkan metrik: jumlah request, distribusi status code, dan persentil latensi. Dashor sederhana dengan p95 dan p99 memberi gambaran kinerja jauh lebih baik daripada rata-rata. Satu request yang sangat lambat bisa menaikkan rata-rata dan menyesatkan.

Mulailah dari beberapa metrik yang paling bermakna, lalu perluas bertahap. Terlalu banyak metrik sejak awal membuat dashboard sulit dibaca dan jarang dipakai. Lebih baik tiga metrik yang dimengerti semua orang daripada tiga puluh yang tidak pernah dilihat.

#Production Support dan Incident Response

#On-Call dan Runbook

Saat aplikasi bermasalah, tim harus tahu apa yang harus dilakukan. Runbook berisi langkah diagnosa dan pemulihan untuk insiden umum: bagaimana cek log, bagaimana restart service, kapan rollback. Runbook mengubah kepanikan menjadi prosedur.

Runbook yang baik ditulis saat keadaan tenang, bukan saat insiden. Mulailah dari insiden yang paling sering terjadi, dokumentasikan langkahnya, dan perbarui setiap kali ada pelajaran baru. Dokumentasi ini menjadi aset paling berharga saat panggilan tengah malam datang.

#Respons Insiden yang Tenang

Insiden adalah hal yang normal — yang membedakan tim baik adalah cara meresponsnya. Komunikasikan status, cari akar masalah dengan data, perbaiki dengan perubahan terkecil, dan dokumentasikan pelajaran. Setiap insiden yang terdokumentasi dengan baik membuat aplikasi semakin tangguh.

#Menutup Lingkaran

Observability bukan tujuan, melainkan alat untuk keputusan. Data yang dikumpulkan sebaiknya dipakai: prioritaskan perbaikan, sesuaikan resource, dan jadwalkan pengembangan. Aplikasi yang terobservasi adalah aplikasi yang bisa dikelola.

Selain itu, observability juga menumbuhkan kepercayaan diri: tim yang tahu aplikasinya bisa dipantau lebih berani melakukan perubahan dan rilis. Ketenangan operasional lahir dari data, bukan dari keyakinan kosong.

#Penutup

Episode 22 melengkapi operasional produksi: monitoring performa di server dan client, error reporting dengan Sentry, logging terstruktur dengan metrik response, serta runbook dan incident response yang tenang. Aplikasi kalian kini bisa dipahami kondisinya kapan pun dibutuhkan.

Inti yang harus dibawa pulang:

• Ukur durasi loader dan action sebagai metrik server utama.
• Real user monitoring menangkap pengalaman nyata pengguna.
• Sentry menangkap error client dan server dengan konteks.
• Log terstruktur berupa JSON mudah dicari dan dianalisis.
• Gunakan persentil p95 dan p99, bukan hanya rata-rata.
• Runbook mengubah insiden dari kepanikan menjadi prosedur.

Di episode 23 selanjutnya, episode terakhir, kita akan membahas stable modern features dan future trends — fitur stabil Remix seperti data loaders, actions, dan nested routes, tren full-stack React dan server-driven UI, ekosistem Remix dan tools komunitas, serta strategi agar skill Remix tetap relevan. Perjalanan panjang ini akan ditutup dengan pandangan ke depan.