טיפול בשגיאות ב-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. ניתן לראות שריצת הסקריפט הופסקה בגלל השגיאה.
הפלט שייצא ללא שימוש ב-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');
הפלט שייצא עם שימוש ב-try catch. ניתן לראות שכאן ריצת הסקריפט לא הופסקה בגלל השגיאה.
הפלט שייצא עם שימוש ב-try catch.
ניתן לראות שכאן ריצת הסקריפט לא הופסקה בגלל השגיאה.

ניתן לראות שהשימוש ב-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:

השגיאה לא התרחשה בזמן ריצה ולכן try catch לא יטפל בשגיאה מסוג זה.
השגיאה לא התרחשה בזמן ריצה ולכן try catch לא יטפל בשגיאה מסוג זה.

סוגי שגיאות ב-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');

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

ניתן לראות שהשגיאה שנוצרה נפלטה ב-catch.
ניתן לראות שהשגיאה שנוצרה נפלטה ב-catch.

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

כל שגיאה שנוצרת הוא אובייקט המכיל 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');

והפלט:

ניתן לראות את ה-name וה-message של האובייקט Error.
ניתן לראות את ה-name וה-message של האובייקט Error.

ניתן לראות ששם השגיאה הוא "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');

וכך זה ייראה:

הפקודות שב-finally ירוצו בכל מקרה.
הפקודות שב-finally ירוצו בכל מקרה.

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

בהצלחה!

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


כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *