טיפול בשגיאות async ב-JavaScript: try/catch, Promises ו-unhandledrejection

שגיאות בקוד אסינכרוני לא מתנהגות כמו שגיאות סינכרוניות

ב-JavaScript סינכרוני, שגיאה שנזרקת מבעבעת במעלה מחסנית הקריאות עד שאיזה try/catch תופס אותה, או שהתוכנית קורסת. קוד אסינכרוני שובר את המודל הזה. עד שבקשת רשת נכשלת, הפונקציה שהתחילה אותה כבר חזרה מזמן. אין מחסנית קריאות לבעבע בה.

Promises פותרים את זה בכך שהם נותנים לשגיאות ערוץ משלהן. promise יכול להתממש עם ערך או להידחות עם סיבה. דחייה היא המקבילה האסינכרונית לזריקת שגיאה. כל העמוד הזה עוסק בלוודא שדחיות נוחתות במקום שבו אתם שולטים, במקום להיעלם.

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

try {
    fetchUser();
    console.log("אין כאן שגיאה: try/catch לא רואה דחיות אסינכרוניות");
} catch (err) {
    console.log("נתפס:", err.message);
}

ה-try/catch רץ ומסתיים בלי תקלות. הדחייה קורית 50ms אחר כך, הרבה אחרי שבלוק ה-try הסתיים. שום דבר לא תופס אותה. זו המלכודת.

try/catch חוזר לעבוד עם await

ברגע שעושים await ל-promise, דחייה הופכת לשגיאה שנזרקת בתוך הפונקציה ה-async. try/catch שעוטף אותה תופס אותה כמו כל throw סינכרוני:

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("נתפס:", err.message);
    }
}

main();

זו התבנית שכדאי להגיע אליה קודם. await מחבר את העולם האסינכרוני בחזרה לצורה המוכרת של try/catch. שימו את קריאות ה-await שעלולות להיכשל בתוך ה-try, וטפלו בהן ב-catch.

פרט אחד ששווה לשים לב אליו: רק הקריאה שמחכים לה עם await מכוסה. אם מפעילים promise בלי לחכות לו, השגיאות עדיין בורחות.

הבאג הנפוץ ביותר: לשכוח את ה-await

אם קוראים לפונקציה async בלי await (או בלי להחזיר את ה-promise שלה), דחיות חומקות מה-try/catch שעוטף אותה:

async function risky() {
    throw new Error("אופס");
}

async function main() {
    try {
        risky(); // בלי await: fire and forget
        console.log("בלוק ה-try הסתיים");
    } catch (err) {
        console.log("נתפס:", err.message); // אף פעם לא רץ
    }
}

main();

בלוק ה-try מסתיים בהצלחה. הדחייה קורית ב-tick הבא, בלי שום דבר שיתפוס אותה. תראו בקונסול אזהרת "unhandled promise rejection".

התיקון תמיד זהה: לעשות await לקריאה, או return ל-promise כדי שהקורא יוכל לחכות לו.

async function risky() {
    throw new Error("אופס");
}

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

main();

.catch() הוא הצד השני של אותו מטבע

אפשר לטפל בדחיות בלי async/await על ידי שרשור של .catch():

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

fetchUser()
    .then(user => console.log(user))
    .catch(err => console.log("נתפס:", err.message));

.catch(fn) הוא קיצור של .then(undefined, fn). הוא מטפל בכל דחייה שקרתה קודם בשרשרת. .catch() בסוף שרשרת הוא המקבילה האסינכרונית ל-try/catch ברמה העליונה: קו ההגנה האחרון לפני שהדחייה הופכת ל"לא מטופלת".

אין בעיה לשלב בין שני הסגנונות. תבנית נפוצה היא להשתמש ב-async/await בתוך פונקציה ולתת לקורא לחבר .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("נכשל:", err.message));

fetch לא נדחה בשגיאות HTTP

זה תופס את כולם לפחות פעם אחת. fetch נדחה רק בכשלים ברמת הרשת: חיפוש DNS נכשל, החיבור נדחה, הבקשה בוטלה. תגובת 404 או 500 נחשבת fetch מוצלח. ה-promise מתממש, פשוט עם תגובה שה-ok שלה הוא false.

async function loadUser(id) {
    try {
        const res = await fetch(`https://httpbin.org/status/500`);
        // הענף הזה רץ גם בתגובת 500!
        const data = await res.json();
        return data;
    } catch (err) {
        console.log("נתפס:", err.message);
    }
}

loadUser(1);

אם אתם רוצים ששגיאות HTTP יגיעו לבלוק ה-catch, בדקו את res.ok וזרקו שגיאה במפורש:

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("נכשל:", err.message));

זה קוד חוזר ששווה להוציא לפונקציית עזר ברגע שאתם מוצאים את עצמכם כותבים אותו פעמיים.

Promise.all נכשל מהר, Promise.allSettled לא

Promise.all מקבל מערך של promises ומתממש עם מערך של תוצאות, אלא אם אחד מהם נדחה, ואז הוא נדחה מיד עם השגיאה הזו. ה-promises האחרים ממשיכים לרוץ, אבל התוצאות שלהם נזרקות.

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("הכול נכשל מהר:", err.message);
}

כישלון מהיר הוא ההתנהגות הנכונה כשצריך את כל התוצאות וכשל אחד הופך את כל הפעולה לחסרת משמעות. כשרוצים את כל התוצאות בכל מקרה, למשל "נסה את חמש ההעלאות האלה ותגיד לי אילו הצליחו ואילו נכשלו", השתמשו ב-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("נכשל:", r.reason.message);
    }
}

allSettled אף פעם לא נדחה. כל רשומה היא {status: "fulfilled", value} או {status: "rejected", reason}.

זריקה מחדש ותפיסות ממוקדות

לא כל שגיאה שייכת לאותו מטפל. תבנית נפוצה היא לתפוס, לבדוק, ולזרוק מחדש כל דבר שלא ציפיתם לו:

class NotFoundError extends Error {}

async function loadUser(id) {
    const res = await fetch(`/users/${id}`);
    if (res.status === 404) throw new NotFoundError(`אין משתמש ${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("המשתמש חסר, משתמשים בברירת מחדל");
        } else {
            throw err; // לתת לשגיאות לא צפויות להתפשט
        }
    }
}

main().catch(err => console.log("לא צפוי:", err.message));

בליעה של כל שגיאה עם catch (err) {} ריק מסתירה באגים אמיתיים. תפסו את מה שאתם יכולים לטפל בו באופן משמעותי, וזרקו מחדש את השאר.

דחיות לא מטופלות הן רשת הביטחון שלכם

גם עם קוד זהיר, משהו יחמוק בסוף. גם Node.js וגם דפדפנים חושפים hook גלובלי לדחיות שאף אחד לא תפס:

// Browser
window.addEventListener("unhandledrejection", event => {
    console.error("לא מטופל:", event.reason);
    event.preventDefault(); // מדכא את אזהרת ברירת המחדל בקונסול
});

// Node.js
process.on("unhandledRejection", reason => {
    console.error("לא מטופל:", reason);
});

זה לא תחליף לטיפול נכון, אלא hook של מוצא אחרון לרישום לוגים או טלמטריה. ב-Node.js מודרני, דחייה לא מטופלת מפילה את התהליך כברירת מחדל, ובדרך כלל זה בדיוק מה שרוצים בפרודקשן. רשמו את השגיאה, תנו לתהליך למות והפעילו אותו מחדש נקי.

רשימת בדיקה מעשית

כשפונקציה async נוגעת במשהו שעלול להיכשל, שאלו את עצמכם:

• האם כל await מסוכן נמצא בתוך try/catch, או שה-promise המוחזר מטופל אצל הקורא עם .catch()?
• האם אני באמת עושה await לקריאה, או שבטעות עשיתי fire-and-forget?
• ובמיוחד ב-fetch, האם אני בודק את res.ok לפני שאני סומך על התגובה?
• כשמריצים דברים במקביל, האם Promise.all הוא הכלי הנכון, או שאני רוצה Promise.allSettled?
• האם יש .catch() ברמה העליונה או מטפל unhandledrejection, כדי ששום דבר לא ייעלם בשקט?

תסדרו את חמשת אלה, והקוד האסינכרוני שלכם יפסיק להפתיע אתכם בשגיאות שנעלמות לתוך ה-event loop.

הבא בתור: ES Modules

טיפול בשגיאות אסינכרוניות סוגר את הפרק על אסינכרוניות. בהמשך נעבור לאופן שבו קוד JavaScript מאורגן בין קבצים: import, export, ומערכת המודולים שעומדת בבסיס כל פרויקט מודרני.