כיצד לטפל בשגיאות ב-JavaScript

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

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

מדוע חשוב לטפל בשגיאות?

טיפול בשגיאות תורם לחוויית משתמש משופרת. אתה יכול להחליף את ברירת המחדל של JavaScript ולעיתים שגיאות מילוליות עם הודעות שגיאה קריאות יותר לאדם משלך. אתה יכול לטפל בחן בסיבות לכמה שגיאות ולשמור על התוכנית שלך לפעול במקום להפסיק אותה.

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

מבנה של שגיאות מובנות ב-JavaScript

השגיאות של JavaScript הן אובייקטים בעלי שלושה מאפיינים:

• שֵׁם: זהו שם השגיאה. לדוגמה, שם משתנה חסר יזרוק שגיאה בשם SyntaxError.
• הוֹדָעָה: זהו גוף ההודעה ומסביר את השגיאה באופן טקסטואלי.
• גורם: אתה יכול להשתמש במאפיין זה עם שגיאות מותאמות אישית כדי לעקוב אחר מחסנית השיחות.

סוגים נפוצים של שגיאות ב-JavaScript

הנה כמה שגיאות נפוצות שנמצאו ב-JavaScript.

שגיאת תחביר

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

• חסרים שמות משתנים.
• חסר "}" אחרי פונקציה.
• חסר ")" לאחר תנאי.

ReferenceError

שגיאות הפניה מתרחשות כאשר תוכנית מנסה התייחסות למשתנה שאינו זמין או מחוץ לתחום.

טעות הקלדה

JavaScript יכול לזרוק שגיאת סוג כאשר הוא לא יכול לבצע פעולה מכיוון שהסוג שהוא מצפה לו שונה מזה שהוא מקבל.

URIEשגיאה

שגיאה זו מתרחשת אם אתה משתמש בפונקציית טיפול ב-URI גלובלית - כמו decodeURIComponent() - באופן שגוי. כתוצאה מכך, הקידוד או הפענוח נכשלים.

שגיאה מצטברת

שגיאה זו משמשת לייצוג שגיאות מרובות עטופים באחת. השתמש בו כאשר אתה רוצה לזרוק שגיאות רבות בבת אחת. לדוגמה, Promise.any() יכול לזרוק AggregateError() כאשר כל ההבטחות המועברות אליו דוחות.

שגיאה פנימית

שגיאה פנימית נגרמת כאשר מתרחשת שגיאה בתוך מנוע JavaScript.

RangeError

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

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

JavaScript מספק פונקציונליות מובנית לטיפול בחריגים עם ה נסה...תפוס...סוף סוף לַחסוֹם. זה גם מאפשר לך להעלות שגיאות משלך באמצעות ה לזרוק מַפעִיל.

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

לְנַסוֹת {
// קוד Javascript חוקי
} לתפוס (שגיאה) {
// שגיאת טיפול
} סוף כל סוף {
// מופעל גם כאשר מתרחשת שגיאה
}

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

הקוד שאתה כולל בבלוק הנסי חייב להיות חוקי. אם לא, JavaScript יזרוק שגיאת ניתוח.

בואו נסתכל על דוגמה מעשית:

לְנַסוֹת {
לְנַחֵם‎.log (טקסט)
} לתפוס (שגיאה) {
לְנַחֵם.עֵץ(שְׁגִיאָה.הוֹדָעָה)
} סוף כל סוף {
 console.log("יבוצע בלי קשר")
}

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

ReferenceError: טקסט אינו מוגדר
יבוצע בלי קשר

במצבים שבהם אתה צריך להעלות את השגיאה שלך, השתמש ב- לזרוק מַפעִיל.

שקול את הדוגמה הזו שגורמת שגיאה אם ​​הנתונים שגויים:

const data = getData()
לְנַסוֹת {
 if (!data) {
 לזרוק "אין מידע"
 }
לְנַחֵם‎.log (נתונים)
// המשך
} לתפוס(שגיאה) {
לְנַחֵם.log (שגיאה) // "אין מידע"
}

בדוגמה זו, התוכנית קוראת לפונקציה getData() ומקצה את התוצאה שלה למשתנה הנתונים. בבלוק הניסיון, הבלוק זורק שגיאה מותאמת אישית אם הנתונים ריקים. בלוק ה-catch תופס את השגיאה הזו ומתעד אותה בקונסולה.

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

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

לזרוק {
 שֵׁם: "שם שגיאה", 
 הוֹדָעָה: "הודעת שגיאה"
}

אתה יכול גם להשתמש בבנאים המובנים של JavaScript בעת זריקת שגיאות. בנאים אלה כוללים בין היתר Error, SyntaxError ו-ReferenceError.

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

לזרוקחָדָשׁשְׁגִיאָה("אין מידע")

כעת תוכל להפנות את השם וההודעה.

לְנַחֵם‎.log (error.name) // שגיאה
לְנַחֵם‎.log (error.message) // אין מידע

הרחבת אובייקט השגיאה של JavaScript

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

אתה יכול להשתמש ב- a מחלקת JavaScript ES2015 כדי ליצור מחלקת שגיאה מותאמת אישית.

מעמדשגיאת אימותמשתרעשְׁגִיאָה{
בַּנַאִי(הודעה) {
סוּפֶּר(הוֹדָעָה);
 this.name = "שגיאת אימות";
 }
}

זרוק שגיאה באמצעות המחלקה ValidationError בצורה הבאה:

לזרוקחָדָשׁ ValidationError ("הודעת השגיאה שלך")

השגיאה שנזרקה תהיה אובייקט עם ערכי השם וההודעה.

{
 שֵׁם: "שגיאת אימות",
 הוֹדָעָה: "הודעת השגיאה שלך"
} 

יש שגיאות כדי לעזור

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

שגיאות מסוימות כמו שגיאות תחביר עלולות לא להתגלות כאשר אתה כותב JavaScript ב"מצב מרושל". שימוש במצב קפדני מאפשר ל-JavaScript לתפוס שגיאות שאחרת היא הייתה מתעלמת ממנה.