Lewati ke konten utama
menjadi.dev
Chapter 1.5 Fundamental Web Pemula

Status Code: Apa Artinya 404, 500, dan Lainnya?

Kategori status code 1xx, 2xx, 3xx, 4xx, 5xx

Tujuan Pembelajaran

  • Memahami kategori status code HTTP
  • Bisa membaca dan men-debug error berdasarkan status code

Analogi

Diagram

      Status Code = Kode Respon Restoran:

+------+---------------------------+
| Kode | Arti                      |
+------+---------------------------+
| 2xx  | "Pesanan berhasil!"       |
| 3xx  | "Pindah ke meja lain"     |
| 4xx  | "Salah pesanan (kamu)"    |
| 5xx  | "Dapur masalah (server)"  |
+------+---------------------------+
    

Status code memberi tahu hasil request: sukses, redirect, error client, atau error server

Penjelasan Konsep

Kalau kamu pernah lihat halaman “404 Not Found” atau “500 Internal Server Error”, itu adalah status code HTTP.

Status code adalah 3 digit angka yang dikirim server untuk memberi tahu browser: “Request kamu itu hasilnya gimana?” Status code adalah cara server berkomunikasi tanpa harus menulis kalimat panjang. 3 digit angka ini menghemat bandwidth dan sudah menjadi standar universal sejak tahun 1990-an.

Analoginya kayak respon pelayan restoran

  • “200 OK” = “Pesanan berhasil,

Ini makanannya!”

  • “301 Moved” = “Restoran pindah ke alamat baru, silakan ke sana.”
  • “400 Bad Request” = “Maaf, pesanan kamu nggak jelas.

Coba ulang.”

  • “401 Unauthorized” = “Maaf, ini khusus member.

Silakan login dulu.”

  • “403 Forbidden” = “Maaf, meskipun kamu sudah login, kamu tidak punya izin akses ini.”
  • “404 Not Found” = “Maaf, menu yang kamu pesan nggak ada di daftar kami.”
  • “500 Internal Server Error” = “Dapur kami ada masalah teknis,

Mohon maaf dan tunggu sebentar.”

Kategori Status Code

1xx — Informational (Informasi)

Jarang kamu lihat karena ini cuma informasi bahwa request diterima dan sedang diproses.

Server bilang “Oke, saya terima suratmu, tunggu ya.” Kamu nggak akan melihat ini di browser karena prosesnya terlalu cepat. Contoh: 100 Continue, 101 Switching Protocols

2xx — Success (Sukses)

Request berhasil! Server berhasil memproses apa yang kamu minta. Ini adalah hasil yang paling kamu harapkan.

  • 200 OK → Request berhasil, ini datanya. Ini adalah status code paling umum.
  • 201 Created → Data baru berhasil dibuat (biasanya respons dari POST request).
  • 204 No Content → Request berhasil diproses, tapi tidak ada data yang dikembalikan.

Biasa dipakai untuk DELETE.

3xx — Redirection (Pengalihan)

Server bilang: “Bukan di sini,

Coba ke alamat lain.” Ini seperti pindah meja di restoran — kamu diarahkan ke lokasi baru.

  • 301 Moved Permanently → URL sudah pindah selamanya.

Browser akan mengingat ini dan langsung ke alamat baru ke depannya.

Penting untuk SEO!

  • 302 Found → URL pindah sementara.

Browser tetap akan mengingat URL asli.

  • 304 Not Modified → Data tidak berubah sejak terakhir diakses, pakai versi cache saja.

Ini mempercepat browsing!

4xx — Client Error (Salah dari Client/Kamu)

Ada yang salah dari sisi kamu atau aplikasi client. Server nggak bisa memenuhi request karena ada masalah dengan request yang dikirim.

  • 400 Bad Request → Request tidak valid. Mungkin JSON yang dikirim rusak atau parameter kurang.
  • 401 Unauthorized → Harus login dulu. Kamu belum memberikan kredensial yang valid.
  • 403 Forbidden → Sudah login, tapi tidak punya izin akses.

Kamu terautentikasi tapi tidak terotorisasi.

  • 404 Not Found → Resource yang diminta tidak ditemukan. URL salah atau data sudah dihapus.
  • 422 Unprocessable Entity → Request valid tapi tidak bisa diproses karena validasi bisnis gagal.

5xx — Server Error (Salah dari Server)

Ada yang salah dari sisi server. Ini bukan salah kamu — server yang mengalami masalah.

  • 500 Internal Server Error → Server crash atau ada bug di kode server. Developer harus memperbaiki ini.
  • 502 Bad Gateway → Server utama dapat respons buruk dari server lain (misalnya database server mati).
  • 503 Service Unavailable → Server sibuk atau sedang maintenance.

Coba lagi nanti.

Kenapa ini penting?

Karena sebagai developer, kamu akan menghabiskan banyak waktu men-debug masalah. Status code adalah petunjuk pertama yang membantumu mengidentifikasi di mana masalahnya — di client, di server, atau di jaringan. Memahami status code juga penting saat membangun API — kamu harus mengembalikan status code yang tepat agar client bisa menangani responsenya dengan benar.

Contoh Kode

javascript
// ====== Handle Status Code ======
const fetchData = async () => {
  try {
    const res = await fetch('/api/data');
    
    switch (res.status) {
      case 200:
        const data = await res.json();
        console.log('Sukses:', data);
        return data;
        
      case 401:
        console.error('Silakan login dulu!');
        window.location.href = '/login';
        break;
        
      case 403:
        console.error('Kamu tidak punya izin akses ini.');
        break;
        
      case 404:
        console.error('Data tidak ditemukan.');
        break;
        
      case 500:
        console.error('Server error. Coba lagi nanti.');
        break;
        
      default:
        console.error('Error tidak dikenal:', res.status);
    }
  } catch (err) {
    console.error('Network error:', err);
  }
};

Penjelasan Kode

Baris 4: Fetch data dari API. Baris 6-25: Switch case berdasarkan status code. Baris 27-28: Catch block untuk network error.

Prompt AI

Jelaskan bedanya status code 401 dan 403. Kapan menggunakan 301 vs 302? Apa yang terjadi kalau server mengirim status code 418?

Pertanyaan Reflektif

Buka website manapun → DevTools → Network → pilih request → lihat status code. Coba akses halaman yang tidak ada (tambahkan /xxx di URL). Status code-nya berapa? Apa artinya?