ניסיון מתקדם / תפוס / סוף סוף ב- Javascript וב- Typescript

טיפול בשגיאות ב- Javascript & Typescript

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

כדי לטפל במקרים כאלה, ניתן "לתפוס" שגיאה. כדי לתפוס שגיאות ב- Javascript וב- Typescript, אתה פשוט עוטף את הקוד בבלוק "נסה", ואחריו בלוק "תפוס".

async function getData(){
  try {
    // Call a dummy async 'fetch'-functoin
    const result = await fetch();
    return { result };
  } catch(error) {
    return { error };
  }
}

// ... later in your code ....

const { result, error } = await getData();

if (error){
  // ... handle error case.
}

// Access the results.

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

טיפול מיוחד עם החסימה "סוף סוף"

כצעד נוסף לטיפול בשגיאות, Javascript ו- Typescript מספקים מילת מפתח "סוף סוף" נוספת. חסימת "סוף סוף" כזו מבצעת כל קוד בתחומו לאחר שחסימת ה"ניסיון "כמו גם חסימת ה"תפס" בוצעו (אם קרתה שגיאה).

// This function is absolutely save
// to call. It fetches some data and 
// optionally catches a potential error.
//
// After everything's done, a 'finally'
// sends the error to our backend for logs,
// if there was any.
async function getData(){
  // In this case, we store the result
  // and error in mutable variables,
  // then return both.
  let result: Result;
  let error: Error;
  
  try {
    // Call a dummy async 'fetch'-function
    result = await fetch();
  } catch(e) {
    error = e;
  } finally {
    // After the whole try/catch has been
    // processed, we can log the error.
    if(error){
      await trackErrorInCloud(error);
    }
  }
  
  return { result, error };
}

// ... same as before ...

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

// Same as the example before, but
// now we directly return from within
// each code block. And this is where
// a side effect can happen.
async function getData(){
  try {
    const result = await fetch();
    return { result };
  } catch(error) {
    return { error }
  } finally {
    //
    // WATCH OUT!
    //
    // Just for demo purpose, but this
    // line of code will override both
    // the return in 'try' as well as 'catch'!
    //
    // Returning inside of 'finally' is therefore
    // dangerous and will lead to hard-to-debug 
    // issues.
    return { finally: true };
  }
}

// data === { finally: true }
const data = await getData();

// Here's a better use case for
// finally.
async function getData(){
  let error: Error;
  
  try {
    const result = await fetch();
    return { result };
  } catch(e) {
    error = e;
    return { error }
  } finally {
    // No return in finally,
    // so it's safe to use.
    if(error){
      await logInCloud()
    }
  }
}

// if no error === { result: ... }
// if error === { error: ... }
const data = await getData();

סיכום

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