סוגי שגיאות ב-JavaScript: SyntaxError, TypeError, ReferenceError

שגיאות הן אובייקטים עם טיפוס

כש-JavaScript זורקת שגיאה, היא לא סתם מוסרת לכם מחרוזת, היא מוסרת לכם אובייקט. לאובייקט הזה יש טיפוס (ה-constructor שלו) וכמה מאפיינים סטנדרטיים: name, message ו-stack.

try {
    null.foo;
} catch (err) {
    console.log(err.name);
    console.log(err.message);
    console.log(err instanceof TypeError);
}

err.name הוא תווית קצרה כמו "TypeError". err.message הוא התיאור הקריא לבני אדם. err instanceof TypeError מגלה לכם את המחלקה המדויקת. חשוב לדעת את הטיפוס: הוא אומר לכם אם הבעיה היא שגיאת הקלדה, ערך לא תקין, או קוד שאפילו לא עבר פרסור.

יש שבעה סוגי שגיאות מובנים. שלושה תראו כל הזמן, וארבעה תפגשו מדי פעם.

SyntaxError: הקוד לא עבר פרסור

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

function greet(name {
    return "hi, " + name;
}
// SyntaxError: Unexpected token '{'

סוגר חסר, פסיק מיותר, return מחוץ לפונקציה: כל דבר ששובר את הדקדוק של השפה זורק את השגיאה הזו. התיקון תמיד הוא לתקן את קוד המקור. המקום היחיד שבו כן אפשר לתפוס SyntaxError הוא כשהפרסור קורה בזמן ריצה, כמו ב-JSON.parse:

try {
    JSON.parse("{ not valid json }");
} catch (err) {
    console.log(err.name);
    console.log(err.message);
}

JSON.parse מקבל מחרוזת בזמן ריצה, ולכן אפשר לתפוס את שגיאות התחביר שלו. שגיאות בקבצי המקור שלכם, לא.

ReferenceError: השם הזה לא קיים

ReferenceError נזרק כשמתייחסים למשתנה שלא הוצהר באף scope שהקוד הנוכחי רואה.

try {
    console.log(totl);
} catch (err) {
    console.log(err.name);
    console.log(err.message);
}

בתשעים אחוז מהמקרים זו שגיאת הקלדה (totl במקום total). עשרת האחוזים האחרים הם עניין של scope: אתם מנסים להשתמש במשהו שהוצהר בפונקציה או במודול אחר.

יש עוד סיבה, עדינה יותר: ה-temporal dead zone. הצהרות let ו-const קיימות מראש הבלוק שלהן, אבל אי אפשר לגשת אליהן לפני השורה שמצהירה עליהן:

try {
    console.log(x);
    let x = 5;
} catch (err) {
    console.log(err.name, err.message);
}

x הוא binding אמיתי כבר כש-console.log(x) רץ, אבל הוא עדיין לא אותחל. מכאן שגיאת ההפניה. התיקון הוא להזיז את הגישה אל מתחת להצהרה.

TypeError: לערך הייתה הצורה הלא נכונה

TypeError אומר שהערך קיים, אבל הוא לא מהסוג שהפעולה מצפה לו. קריאה למשהו שאינו פונקציה, קריאת מאפיין של null או undefined, השמה ל-const: כולם TypeError.

const user = null;

try {
    console.log(user.name);
} catch (err) {
    console.log(err.name);
    console.log(err.message);
}

"Cannot read properties of null (reading 'name')" היא כנראה הודעת השגיאה הנפוצה ביותר ב-JavaScript. התיקון הוא להבטיח שהערך קיים, או להגן על הגישה עם optional chaining: user?.name.

עוד גרסאות של TypeError:

const PI = 3.14;

try {
    const notAFunction = 42;
    notAFunction();
} catch (err) {
    console.log(err.message);
}

try {
    PI = 3.14159;
} catch (err) {
    console.log(err.message);
}

קריאה למספר, השמה מחדש ל-const, קריאה למתודה שלא קיימת: הערך היה מהטיפוס הלא נכון למה שביקשתם ממנו לעשות.

RangeError: המספר מחוץ לטווח

RangeError נזרק כשמספר תקין מבחינה טכנית, אבל נמצא מחוץ לטווח המותר לפעולה מסוימת.

try {
    const arr = new Array(-1);
} catch (err) {
    console.log(err.name, err.message);
}

try {
    (1.5).toFixed(200);
} catch (err) {
    console.log(err.name, err.message);
}

המקור הקלאסי הוא רקורסיה אינסופית, שמפוצצת את מחסנית הקריאות:

function recurse() {
    return recurse();
}

try {
    recurse();
} catch (err) {
    console.log(err.name);
    console.log(err.message);
}

"Maximum call stack size exceeded" כמעט תמיד אומר שפונקציה קוראת לעצמה בלי מקרה בסיס, או ששתי פונקציות קוראות זו לזו בלולאה.

URIError ו-EvalError: הנדירות

URIError מגיעה מפונקציות הטיפול ב-URI (encodeURI, decodeURIComponent וחברותיהן) כשהן מקבלות קלט פגום:

try {
    decodeURIComponent("%");
} catch (err) {
    console.log(err.name, err.message);
}

try {
    decodeURIComponent("%E0%A4%A");
} catch (err) {
    console.log(err.name, err.message);
}

EvalError הוא שריד מהעבר. מנועי JavaScript מודרניים לא זורקים אותו בפועל על שום דבר, והוא עדיין קיים כ-constructor רק לצורך תאימות לאחור. אפשר ליצור אחד ידנית, אבל לא תיתקלו בו בקוד אמיתי.

שרשרת הירושה

כל הטיפוסים האלה יורשים מ-Error בסיסי. המשמעות היא ש-err instanceof Error הוא true לכל אחד מהם, וזה שימושי ב-catch כללי:

function classify(err) {
    if (err instanceof TypeError) return "bad value";
    if (err instanceof ReferenceError) return "missing name";
    if (err instanceof RangeError) return "out of range";
    if (err instanceof Error) return "some other error";
    return "not an error at all";
}

try {
    null.foo;
} catch (err) {
    console.log(classify(err));
}

בלוק catch תופס הכול, כולל ערכים שאינם שגיאות אם מישהו עושה throw "oops". לכן הענף האחרון חשוב. תמיד צמצמו עם instanceof לפני שאתם מתייחסים לערך שנתפס כאובייקט שגיאה.

יצירת שגיאות בכוונה

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

function setAge(age) {
    if (typeof age !== "number") {
        throw new TypeError("age must be a number");
    }
    if (age < 0 || age > 150) {
        throw new RangeError("age must be between 0 and 150");
    }
    return age;
}

try {
    setAge("thirty");
} catch (err) {
    console.log(err.name, err.message);
}

התאמת הטיפוס לכשל היא לא רק עניין קוסמטי: היא מאפשרת לקוראים לכתוב לוגיקת catch ממוקדת במקום לפרסר הודעות שגיאה.

מחלקות שגיאה מותאמות

כשהטיפוסים המובנים לא מתאימים, הרחיבו את Error:

class ValidationError extends Error {
    constructor(message, field) {
        super(message);
        this.name = "ValidationError";
        this.field = field;
    }
}

try {
    throw new ValidationError("email is required", "email");
} catch (err) {
    if (err instanceof ValidationError) {
        console.log(`[${err.field}] ${err.message}`);
    }
}

שני דברים לזכור: קראו ל-super(message) כדי שה-Error הבסיסי יאותחל כמו שצריך, והגדירו this.name כדי שהלוגים יציגו את התווית הנכונה. שדות מותאמים כמו field מאפשרים לקוראים להגיב לסוגי כשל מסוימים בלי לפרסר מחרוזות.

הבא בתור: הקונסול וה-DevTools

להכיר את סוגי השגיאות זה חצי מהעבודה. החצי השני הוא לקרוא stack trace ולחטט במצב התוכנית בזמן שהיא רצה. ה-devtools של הדפדפן (וה-debugger של Node) הופכים את "זה זרק שגיאה ואני לא יודע למה" לכמה שניות של בדיקה. זה הנושא הבא.