טיפול בשגיאות ב-JavaScript באמצעות try catch

לא תמיד הכל ורוד ולפעמים הקוד עלול לזרוק שגיאות, ובשגיאות צריכים לדעת לטפל כראוי.
במאמר זה אסביר כיצד לטפל בשגיאות JavaScript באמצעות try catch.

לטפל בשגיאות? מהי הכוונה?

ניתן להתייחס לשגיאות בחלוקה הבאה:
1. שגיאות קריטיות שבלעדיהן שאר הקוד לא אמור לרוץ וריצת הסקריפט כולה צריכה להיעצר, למשל, התחברות למסד הנתונים.
2. שגיאות שפוגעות בריצת רכיב לא משמעותי בסקריפט ושאר הסקריפט יכול "להסתדר" בלעדיו, למשל, שליפת נתון כלשהו באמצעות API חיצוני.

טיפול בשגיאות באמצעות try catch מאפשר לנו "לעטוף" מספר שורות שאמורות לבצע פעולה כלשהי אבל במידה וקוד זה יזרוק שגיאה, שאר הקוד ימשיך לפעול ללא בעיה.

דוגמאות

ללא שימוש ב-try catch:

const myArr = [1,2,3,4,5];
console.log('Start');
console.log(myarr);
console.log('End');

מאחר והמשתנה בשם myarr אינו קיים (אלא myArr), זה מה שיצא אל הקונסול במקרה זה:

עם שימוש ב-try catch:

const myArr = [1,2,3,4,5];
console.log('Start');
try {
	console.log(myarr);
} catch (err) {
	console.log(err);
}
console.log('End');

ניתן לראות שהשימוש ב-try catch מנע את הפסקת ריצת הסקריפט כולו.

עבור שגיאות ריצה בלבד

יש לשים לב כי try catch עובד אך ורק בשגיאות בזמן ריצה, כלומר כאשר הקוד עצמו רץ ללא בעיה.
קצת מבלבל, אז למה הכוונה? דוגמה:

const myArr = [1,2,3,4,5];
console.log('Start';
try {
	console.log(myarr);
} catch (err) {
	console.log(err);
}
console.log('End');

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

סוגי שגיאות ב-JavaScript

ישנם מספר סוגי שגיאות ב-JavaScript, חשוב להבין את ההבדלים ביניהם על מנת לטפל בבעיה בצורה המהירה ביותר.

EvalError – תופיע כאשר נעשה שימוש לא נכון בפונקציה eval.
RangeError – תופיע כאשר משתנה מספרי מחוץ לטווח החוקי שלו.
ReferenceError – תופיע כאשר נעשתה פנייה לא חוקית.
SyntaxError – תופיע כאשר ישנה בעיה ב-syntax עצמו.
TypeError – תופיע כאשר סוג המשתנה שונה מהצפוי.
URIError – כאשר נעשה שימוש לא נכון בפונקציות encodeURI או decodeURI.

הנפוצות ביותר הן ReferenceError ו-TypeError.

יצירת שגיאה באמצעות throw

ב-try catch ניתן ליצור ו"לזרוק" שגיאה באופן עצמאי על ידי השימוש ב-throw ויצירת אובייקט חדש מסוג Error.
מתי זה שימושי? בהמון מצבים, למשל, אם ישנו נתון כלשהו שאינו לשביעות רצוננו:

const dataArr = [1, 2, 3, 4, 5];
console.log('Start');
try {
    if(dataArr.length < 10) {
        throw new Error('Data Error!');
    }
} catch (err) {
	console.log(err);
}
console.log('End');

וכך יראה הקונסול:

אובייקט השגיאה

כל שגיאה שנוצרת הוא אובייקט המכיל 2 תכונות: name ו-message.
name - שם השגיאה
message - תוכן השגיאה

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

const dataArr = [1, 2, 3, 4, 5];
console.log('Start');
try {
    if(dataArr.length < 10) {
        throw new Error('Data Error!');
    }
} catch (err) {
	console.log(err.name);
	console.log(err.message);
}
console.log('End');

והפלט:

ניתן לראות ששם השגיאה הוא "Error" ותוכן השגיאה הוא "!Data Error".

finally

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

const myArr = [1,2,3,4,5];
console.log('Start');
try {
	console.log(myarr);
} catch (err) {
	console.log(err);
} finally {
	console.log('Hello World!');
}
console.log('End');

וכך זה ייראה:

כלומר במקרה הנ"ל, "!Hello World" יודפס בקונסול ללא קשר ל-try וה-catch.

בהצלחה!

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

רק רגע! :)
כשאני לא כותב פוסטים ב-CodeBrain אני מספק שרותי פיתוח, ייעוץ והדרכה.
אם נראה לך שאני האיש המתאים עבורך, כדאי שנדבר :)