Jago JavaScript 3 #5: Menangani Error saat Fetching (Biar Gak Mati Gaya!)

Dalam fetch(), ada dua jenis masalah yang sering muncul:

1. Network Error: Gak ada koneksi internet sama sekali (Kurirnya gak bisa jalan).
2. HTTP Error: Alamat ketemu, tapi server ngasih jawaban "Gak Ada" (404) atau "Lagi Error" (500).

🧩 Apa yang Akan Dipelajari

• Menggunakan blok Try...Catch untuk menangkap kegagalan koneksi.
• Mengecek properti response.ok untuk menangani status HTTP.
• Memberikan pesan error yang ramah kepada pengguna di halaman web.
• Menjalankan kode pembersihan dengan blok finally.

🚀 Langkah-Langkah

1. Blok Try...Catch (Benteng Pertahanan)

Ini adalah cara standar untuk menangkap error yang bikin program berhenti mendadak.

async function ambilData() {
    try {
        const response = await fetch('https://jsonplaceholder.typicode.com/users/1');
        const data = await response.json();
        console.log(data);
    } catch (error) {
        // Blok ini jalan kalau internet putus atau URL salah total
        console.log("Waduh, ada masalah koneksi:", error.message);
    }
}

2. Jebakan Batman: response.ok

Hati-hati, Kay! fetch() TIDAK AKAN menganggap status 404 (Not Found) sebagai error. Baginya, selama server ngejawab (meskipun jawabannya "Gak ada"), itu dianggap sukses. Kita harus cek manual pakai response.ok.

async function ambilDataPintar() {
    try {
        const response = await fetch('https://jsonplaceholder.typicode.com/users/999');

        // Cek apakah statusnya antara 200-299
        if (!response.ok) {
            throw new Error(`Gagal ambil data! Status: ${response.status}`);
        }

        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error("Pesan Error:", error.message);
    }
}

3. Memberi Tahu User (User Interface)

Jangan cuma console.log, kasih tahu user lewat tampilan web agar mereka gak nungguin tanpa kepastian.

const info = document.getElementById('info-status');

async function ambilDataUser() {
    try {
        info.innerText = "Sedang mengambil data... ⏳";
        const res = await fetch('https://api.salah.com');
        
        if (!res.ok) throw new Error("Data tidak ditemukan.");
        
        const data = await res.json();
        info.innerText = `Halo, ${data.name}!`;
    } catch (err) {
        // Tampilin pesan error ke layar
        info.innerText = `Ups! ${err.message}. Coba lagi nanti ya. ❌`;
        info.style.color = "red";
    } finally {
        // Kode di sini PASTI jalan, mau sukses atau gagal
        console.log("Proses Fetch Selesai.");
    }
}

💡 Tips Tambahan

• Timeout: Secara default, fetch bakal nunggu lama banget kalau server gak respon. Kamu bisa pakai AbortController kalau mau bikin batas waktu (misal: kalau 5 detik gak ada respon, batalin aja).
• Retry Logic: Kalau gagal, kamu bisa bikin fungsi buat nyoba lagi otomatis setelah beberapa detik.
• Status Code:
  • 404: Alamat salah (Not Found).
  • 401: Kamu gak punya izin (Unauthorized).
  • 500: Servernya lagi pusing (Internal Server Error).

❗ Troubleshooting

Masalah: Kenapa blok catch saya gak jalan padahal browser nampilin error 404? Solusi: Seperti yang dibahas tadi, fetch cuma bakal masuk ke catch kalau terjadi masalah jaringan (DNS gagal, kabel putus). Untuk 404, kamu WAJIB pakai if (!response.ok) di dalam blok try.

🎯 Kesimpulan

Aplikasi yang bagus bukan aplikasi yang gak pernah error, tapi aplikasi yang tahu cara menangani error tersebut dengan elegan. Dengan try...catch dan response.ok, website kamu bakal terasa jauh lebih profesional dan terpercaya!