Penanganan Error: Kode Status HTTP
Petakan kode status HTTP ke pesan yang ditampilkan kepada pengguna, bedakan error jaringan dari error server, dan terapkan logika percobaan ulang.
Penanganan Error: Kode Status HTTP adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.
Kategori Kode Status HTTP
Kode status dikelompokkan berdasarkan digit pertama: 2xx berhasil, 3xx pengalihan, 4xx kesalahan klien (kesalahan Anda), 5xx kesalahan server (kesalahan mereka).
Kode 2xx yang Umum
200 OK: berhasil dengan isi. 201 Dibuat: sumber daya berhasil dibuat (sering kali mengembalikan sumber daya baru). 204 Tanpa Isi: berhasil tanpa isi (DELETE, terkadang PUT).
Kode 4xx yang Umum
400 Permintaan Buruk: input tidak valid. 401 Tidak Terautentikasi: autentikasi tidak ada atau tidak valid. 403 Terlarang: sudah terautentikasi, tetapi tidak diizinkan. 404 Tidak Ditemukan: sumber daya tidak ada. 409 Konflik: konflik status (email duplikat). 422 Entitas Tidak Dapat Diproses: validasi gagal.
Kode 5xx yang Umum
500 Kesalahan Server Internal: kesalahan server umum. 502 Gateway Buruk: layanan hulu gagal. 503 Layanan Tidak Tersedia: server kelebihan beban atau tidak aktif. 504 Batas Waktu Gateway: layanan hulu tidak merespons tepat waktu.
Memetakan Kode ke Pesan Pengguna
Terjemahkan kode status menjadi pesan UI yang berguna—jangan pernah menampilkan 'Kesalahan 500' kepada pengguna.
function userMessage(status) {
if (status === 401) return 'Please sign in to continue.';
if (status === 403) return "You don't have permission for that.";
if (status === 404) return 'Not found.';
if (status === 409) return 'Already exists.';
if (status === 422) return 'Please check the form for errors.';
if (status >= 500) return 'Something went wrong. Try again in a moment.';
return 'Something unexpected happened.';
}Kesalahan Jaringan vs Kesalahan Server
Pengambilan yang gagal (offline, kegagalan DNS, CORS) berbeda dari respons kesalahan server. Kesalahan jaringan memunculkan pengecualian; kesalahan server mengembalikan objek Response dengan status >= 400.
try {
const res = await fetch('/api/users');
if (!res.ok) {
// Server replied but with error status
throw new Error(`Server error ${res.status}`);
}
return res.json();
} catch (err) {
if (err instanceof TypeError) {
// Network failure — fetch couldn't reach server
throw new Error('Network error. Check your connection.');
}
throw err;
}Logika Percobaan Ulang untuk 5xx dan Kesalahan Jaringan
Kesalahan server dan kegagalan jaringan sering kali bersifat sementara. Lakukan percobaan ulang dengan jeda eksponensial.
async function fetchWithRetry(url, options, maxRetries = 3) {
for (let attempt = 0; attempt < maxRetries; attempt++) {
try {
const res = await fetch(url, options);
if (res.ok || (res.status >= 400 && res.status < 500)) return res;
// 5xx — retryable
} catch (err) {
if (attempt === maxRetries - 1) throw err;
}
await new Promise(r => setTimeout(r, 2 ** attempt * 1000)); // 1s, 2s, 4s
}
}Jangan Mengulangi 4xx
Kesalahan 4xx disebabkan oleh Anda—mengulanginya tidak akan membantu. Coba lagi hanya untuk 5xx dan kegagalan jaringan. Pengecualiannya adalah 429 (Terlalu Banyak Permintaan), yang sering menyertakan header Retry-After.
Membaca Header Retry-After
Server dapat menyertakan Retry-After pada 429 dan 503—tunggu selama jumlah detik tersebut sebelum mencoba lagi.
const res = await fetch('/api/limited');
if (res.status === 429) {
const after = parseInt(res.headers.get('Retry-After') || '5', 10);
await new Promise(r => setTimeout(r, after * 1000));
return fetch('/api/limited');
}Menampilkan Kesalahan Validasi
Respons 422 biasanya menyertakan isi JSON yang berisi daftar kesalahan tiap bidang. Tampilkan kesalahan tersebut di samping input formulir yang sesuai.
// Server response for 422:
// { errors: { email: 'Already taken', password: 'Too short' } }
if (res.status === 422) {
const { errors } = await res.json();
Object.entries(errors).forEach(([field, msg]) => {
setFieldError(field, msg);
});
}Telemetri: Catat Kesalahan ke Layanan
Kirim kesalahan ke Sentry, Datadog, atau LogRocket agar Anda dapat melihatnya di lingkungan produksi. Sertakan URL permintaan, metode, status, dan isi yang telah disanitasi (tanpa rahasia).
Sediakan Pemulihan yang Jelas
Setiap UI kesalahan harus menawarkan jalan keluar bagi pengguna: tombol coba lagi, tautan ke dukungan, atau cara untuk kembali ke halaman yang berfungsi. Layar kesalahan tanpa jalan keluar membuat pengguna frustrasi.
Pemeriksaan Singkat
Sebuah API mengembalikan 422 Entitas Tidak Dapat Diproses. Apa biasanya maksudnya?
Rangkuman: Penanganan Kesalahan HTTP
2xx berhasil, 3xx pengalihan, 4xx kesalahan klien, 5xx kesalahan server. Petakan kode ke pesan yang mudah dipahami pengguna. Bedakan kesalahan jaringan (TypeError dari fetch) dari kesalahan server (res.ok bernilai false). Coba lagi untuk 5xx dan kegagalan jaringan dengan jeda eksponensial; jangan pernah mengulangi 4xx (kecuali 429 dengan Retry-After). Tampilkan kesalahan bidang 422. Catat kesalahan ke layanan seperti Sentry.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Penanganan Error: Kode Status HTTP” gratis?
Ya — teks lengkap “Penanganan Error: Kode Status HTTP” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Frontend Academy, upgrade ke CoddyKit PRO. Kursus Frontend Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Penanganan Error: Kode Status HTTP”?
Petakan kode status HTTP ke pesan yang ditampilkan kepada pengguna, bedakan error jaringan dari error server, dan terapkan logika percobaan ulang. Kamu berlatih Frontend Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Frontend Academy?
Tidak diperlukan pengalaman sebelumnya. Frontend Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.
Berapa lama pelajaran “Penanganan Error: Kode Status HTTP” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Frontend Academy ini?
Ya. Setiap pelajaran Frontend Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Fetch API: GET, POST, PUT, DELETE
- Axios: Interceptor dan URL Dasar
- Penanganan Error: Kode Status HTTP
- SWR dan React Query untuk Penyimpanan Tembolok Data