Error Handling Async JavaScript: try/catch, Promise, dan unhandledrejection

Error di Kode Async Tidak Bekerja Seperti Error Sync

Di JavaScript synchronous, error yang dilempar akan naik melalui call stack sampai ada try/catch yang menangkapnya, atau programnya crash. Kode async mematahkan model itu. Saat sebuah request jaringan gagal, fungsi yang memulainya sudah lama selesai. Tidak ada call stack yang bisa dinaiki.

Promise mengatasi ini dengan memberi error jalurnya sendiri. Sebuah promise bisa fulfilled dengan sebuah nilai atau rejected dengan sebuah alasan. Penolakan (rejection) adalah padanan async dari melempar error. Seluruh halaman ini membahas cara memastikan penolakan berakhir di tempat yang kamu kendalikan, bukan menghilang.

function fetchUser() {
    return new Promise((resolve, reject) => {
        setTimeout(() => reject(new Error("network down")), 50);
    });
}

try {
    fetchUser();
    console.log("no error here - try/catch doesn't see async rejections");
} catch (err) {
    console.log("caught:", err.message);
}

try/catch berjalan dan selesai dengan mulus. Penolakannya terjadi 50ms kemudian, lama setelah blok try selesai. Tidak ada yang menangkapnya. Itulah jebakannya.

try/catch Kembali Berfungsi dengan await

Begitu kamu await sebuah promise, penolakan berubah menjadi error yang dilempar di dalam fungsi async. try/catch di sekitarnya menangkapnya seperti throw synchronous biasa:

function fetchUser() {
    return new Promise((_, reject) => {
        setTimeout(() => reject(new Error("network down")), 50);
    });
}

async function main() {
    try {
        const user = await fetchUser();
        console.log(user);
    } catch (err) {
        console.log("caught:", err.message);
    }
}

main();

Inilah pola yang pertama kali harus kamu pakai. await menjembatani dunia async kembali ke bentuk try/catch yang sudah kamu kenal. Taruh panggilan await yang bisa gagal di dalam try, lalu tangani di catch.

Satu detail yang perlu dicatat: hanya panggilan yang di-await yang tercakup. Kalau kamu memulai sebuah promise tanpa menunggunya, error-nya tetap lolos.

Bug Paling Umum: Lupa await

Kalau kamu memanggil fungsi async tanpa await (atau tanpa mengembalikan promise-nya), penolakan akan lolos melewati try/catch di sekitarnya:

async function risky() {
    throw new Error("oops");
}

async function main() {
    try {
        risky(); // no await - fire and forget
        console.log("try block finished");
    } catch (err) {
        console.log("caught:", err.message); // never runs
    }
}

main();

Blok try selesai dengan sukses. Penolakannya terjadi di tick berikutnya, tanpa ada yang menangkap. Kamu akan melihat peringatan "unhandled promise rejection" di console.

Solusinya selalu sama: await panggilannya, atau return promise-nya agar pemanggil bisa menunggunya.

async function risky() {
    throw new Error("oops");
}

async function main() {
    try {
        await risky();
    } catch (err) {
        console.log("caught:", err.message);
    }
}

main();

.catch() Adalah Sisi Lain dari Koin yang Sama

Kamu bisa menangani penolakan tanpa async/await dengan merangkai .catch():

function fetchUser() {
    return new Promise((_, reject) => {
        setTimeout(() => reject(new Error("network down")), 50);
    });
}

fetchUser()
    .then(user => console.log(user))
    .catch(err => console.log("caught:", err.message));

.catch(fn) adalah singkatan dari .then(undefined, fn). Ia menangani penolakan apa pun dari bagian rangkaian sebelumnya. .catch() di akhir rangkaian adalah padanan async dari try/catch tingkat atas: benteng terakhir sebelum penolakan menjadi "unhandled".

Mencampur kedua gaya tidak masalah. Pola yang umum adalah memakai async/await di dalam fungsi dan membiarkan pemanggilnya memasang .catch():

async function loadProfile(id) {
    const res = await fetch(`/users/${id}`);
    if (!res.ok) throw new Error(`status ${res.status}`);
    return res.json();
}

loadProfile(42).catch(err => console.log("failed:", err.message));

fetch Tidak Ditolak Saat Ada Error HTTP

Yang satu ini menjebak semua orang setidaknya sekali. fetch hanya ditolak saat ada kegagalan di tingkat jaringan: pencarian DNS gagal, koneksi ditolak, atau request dibatalkan. Response 404 atau 500 tetap dianggap fetch yang berhasil. Promise-nya selesai; hanya saja selesai dengan response yang ok-nya bernilai false.

async function loadUser(id) {
    try {
        const res = await fetch(`https://httpbin.org/status/500`);
        // This branch runs even on 500!
        const data = await res.json();
        return data;
    } catch (err) {
        console.log("caught:", err.message);
    }
}

loadUser(1);

Kalau kamu ingin error HTTP masuk ke blok catch, cek res.ok dan lempar error secara eksplisit:

async function loadUser(id) {
    const res = await fetch(`https://httpbin.org/status/500`);
    if (!res.ok) {
        throw new Error(`HTTP ${res.status}`);
    }
    return res.json();
}

loadUser(1).catch(err => console.log("failed:", err.message));

Boilerplate ini layak dipindahkan ke sebuah helper begitu kamu mendapati dirimu menulisnya dua kali.

Promise.all Gagal Cepat; Promise.allSettled Tidak

Promise.all menerima array berisi promise dan selesai dengan array berisi hasil, kecuali ada yang ditolak. Dalam kasus itu, ia langsung ditolak dengan error tersebut. Promise lainnya tetap berjalan, tetapi hasilnya dibuang.

const tasks = [
    Promise.resolve("a"),
    Promise.reject(new Error("boom")),
    Promise.resolve("c"),
];

try {
    const results = await Promise.all(tasks);
    console.log(results);
} catch (err) {
    console.log("all failed fast:", err.message);
}

Gagal cepat adalah perilaku yang tepat saat kamu butuh setiap hasil dan satu kegagalan membuat seluruh operasi tidak berarti. Saat kamu ingin setiap hasil apa pun yang terjadi, misalnya "coba lima upload ini, beri tahu mana yang berhasil dan mana yang gagal", pakai Promise.allSettled:

const tasks = [
    Promise.resolve("a"),
    Promise.reject(new Error("boom")),
    Promise.resolve("c"),
];

const results = await Promise.allSettled(tasks);
for (const r of results) {
    if (r.status === "fulfilled") {
        console.log("ok:", r.value);
    } else {
        console.log("failed:", r.reason.message);
    }
}

allSettled tidak pernah ditolak. Setiap entri berupa {status: "fulfilled", value} atau {status: "rejected", reason}.

Melempar Ulang dan Catch yang Spesifik

Tidak semua error cocok ditangani oleh handler yang sama. Pola yang umum adalah menangkap, memeriksa, lalu melempar ulang apa pun yang tidak kamu duga:

class NotFoundError extends Error {}

async function loadUser(id) {
    const res = await fetch(`/users/${id}`);
    if (res.status === 404) throw new NotFoundError(`no user ${id}`);
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    return res.json();
}

async function main() {
    try {
        const user = await loadUser(999);
        console.log(user);
    } catch (err) {
        if (err instanceof NotFoundError) {
            console.log("user missing, using default");
        } else {
            throw err; // let unexpected errors propagate
        }
    }
}

main().catch(err => console.log("unexpected:", err.message));

Menelan setiap error dengan catch (err) {} kosong menyembunyikan bug sungguhan. Tangkap apa yang bisa kamu tangani dengan bermakna; lempar ulang sisanya.

Unhandled Rejection Adalah Jaring Pengamanmu

Bahkan dengan kode yang hati-hati, cepat atau lambat ada yang lolos. Node.js dan browser sama-sama menyediakan hook global untuk penolakan yang tidak ditangkap siapa pun:

// Browser
window.addEventListener("unhandledrejection", event => {
    console.error("unhandled:", event.reason);
    event.preventDefault(); // suppress the default console warning
});

// Node.js
process.on("unhandledRejection", reason => {
    console.error("unhandled:", reason);
});

Ini bukan pengganti penanganan yang benar, melainkan hook terakhir untuk log atau telemetri. Di Node.js modern, unhandled rejection menghentikan proses secara default, dan biasanya itulah yang kamu inginkan di production. Catat error-nya, lalu biarkan prosesnya mati dan mulai ulang dalam keadaan bersih.

Daftar Periksa Praktis

Saat sebuah fungsi async menyentuh apa pun yang bisa gagal, tanyakan pada dirimu:

• Apakah setiap await yang berisiko berada di dalam try/catch, atau promise yang dikembalikan ditangani pemanggil dengan .catch()?
• Apakah aku benar-benar melakukan await pada panggilan itu, atau tanpa sengaja menjalankannya lalu melupakannya?
• Khusus untuk fetch, apakah aku mengecek res.ok sebelum memercayai response-nya?
• Saat menjalankan sesuatu secara paralel, apakah Promise.all alat yang tepat, atau aku butuh Promise.allSettled?
• Apakah ada .catch() tingkat atas atau handler unhandledrejection agar tidak ada yang hilang diam-diam?

Kalau kelima hal itu sudah benar, kode async-mu tidak akan lagi mengejutkanmu dengan error yang lenyap ke dalam event loop.

Berikutnya: ES Modules

Error handling async melengkapi bab tentang async. Berikutnya, kita beralih ke cara kode JavaScript diatur di beberapa file: import, export, dan sistem module yang menjadi fondasi setiap proyek modern.