סיווג שגיאות ב-React Error Boundary: מדריך מקיף

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

מהם React Error Boundaries?

הוצגו ב-React 16, Error Boundaries הם רכיבי React שתופסים שגיאות JavaScript בכל מקום בעץ הרכיבים הצאצאים שלהם, רושמים שגיאות אלה ומציגים UI חלופי במקום לקרוס את כל עץ הרכיבים. הם מתפקדים בדומה לבלוק try...catch, אך עבור רכיבים.

מאפיינים עיקריים של Error Boundaries:

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

מדוע לסווג שגיאות ב-Error Boundaries?

פשוט לתפוס שגיאות זה לא מספיק. טיפול יעיל בשגיאות דורש הבנה מה השתבש והגבה בהתאם. סיווג שגיאות בתוך Error Boundaries מציע מספר יתרונות:

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

גישות לסיווג שגיאות

ניתן להשתמש במספר טכניקות כדי לסווג שגיאות בתוך React Error Boundaries:

1. שימוש ב-instanceof

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

דוגמה:

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

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

class MyErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, error: null, errorInfo: null };
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true, error: error };
  }

  componentDidCatch(error, errorInfo) {
    // You can also log the error to an error reporting service
    console.error("Caught error:", error, errorInfo);
    this.setState({errorInfo: errorInfo});
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      let errorMessage = "משהו השתבש.";
      if (this.state.error instanceof NetworkError) {
        errorMessage = "אירעה שגיאת רשת. אנא בדוק את החיבור שלך ונסה שוב.";
      } else if (this.state.error instanceof ValidationError) {
        errorMessage = "אירעה שגיאת אימות. אנא בדוק את הקלט שלך.";
      }

      return (
        <div>
          <h2>שגיאה!</h2>
          <p>{errorMessage}</p>
          <details style={{ whiteSpace: 'pre-wrap' }}>
            {this.state.error && this.state.error.toString()}<br />
            {this.state.errorInfo.componentStack}
          </details>
        </div>
      );
    }

    return this.props.children; 
  }
}

הסבר:

• מגדירים מחלקות NetworkError ו-ValidationError מותאמות אישית, המרחיבות את מחלקת Error המובנית.
• בשיטת render של רכיב MyErrorBoundary, האופרטור instanceof משמש לבדיקת סוג השגיאה שנתפסה.
• בהתבסס על סוג השגיאה, מוצגת הודעת שגיאה ספציפית ב-UI החלופי.

2. שימוש בקודי שגיאה או במאפיינים

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

דוגמה:

function fetchData(url) {
  return new Promise((resolve, reject) => {
    fetch(url)
      .then(response => {
        if (!response.ok) {
          const error = new Error("בקשת רשת נכשלה");
          error.code = response.status; // Add a custom error code
          reject(error);
        }
        return response.json();
      })
      .then(data => resolve(data))
      .catch(error => reject(error));
  });
}

class MyErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, error: null, errorInfo: null };
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true, error: error };
  }

  componentDidCatch(error, errorInfo) {
    // You can also log the error to an error reporting service
    console.error("Caught error:", error, errorInfo);
    this.setState({errorInfo: errorInfo});
  }

  render() {
    if (this.state.hasError) {
      let errorMessage = "משהו השתבש.";
      if (this.state.error.code === 404) {
        errorMessage = "המשאב לא נמצא.";
      } else if (this.state.error.code >= 500) {
        errorMessage = "שגיאת שרת. אנא נסה שוב מאוחר יותר.";
      }

      return (
        <div>
          <h2>שגיאה!</h2>
          <p>{errorMessage}</p>
          <details style={{ whiteSpace: 'pre-wrap' }}>
            {this.state.error && this.state.error.toString()}<br />
            {this.state.errorInfo.componentStack}
          </details>
        </div>
      );
    }

    return this.props.children; 
  }
}

הסבר:

• הפונקציה fetchData מוסיפה מאפיין code לאובייקט השגיאה, המייצג את קוד הסטטוס HTTP.
• רכיב MyErrorBoundary בודק את המאפיין code כדי לקבוע את תרחיש השגיאה הספציפי.
• הודעות שגיאה שונות מוצגות בהתבסס על קוד השגיאה.

3. שימוש במיפוי שגיאות מרכזי

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

דוגמה:

const errorMap = {
  "NETWORK_ERROR": {
    message: "אירעה שגיאת רשת. אנא בדוק את החיבור שלך.",
    retry: true,
  },
  "INVALID_INPUT": {
    message: "קלט לא חוקי. אנא בדוק את הנתונים שלך.",
    retry: false,
  },
  404: {
    message: "המשאב לא נמצא.",
    retry: false,
  },
  500: {
    message: "שגיאת שרת. אנא נסה שוב מאוחר יותר.",
    retry: true,
  },
  "DEFAULT": {
    message: "משהו השתבש.",
    retry: false,
  },
};

function handleCustomError(errorType) {
    const errorDetails = errorMap[errorType] || errorMap["DEFAULT"];
    return errorDetails;
}

class MyErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, errorDetails: null, errorInfo: null };
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    const errorDetails = handleCustomError(error.message);
    return { hasError: true, errorDetails: errorDetails };
  }

  componentDidCatch(error, errorInfo) {
    // You can also log the error to an error reporting service
    console.error("Caught error:", error, errorInfo);
    this.setState({errorInfo: errorInfo});
  }

  render() {
    if (this.state.hasError) {
      const { message } = this.state.errorDetails;
      return (
        <div>
          <h2>שגיאה!</h2>
          <p>{message}</p>
          <details style={{ whiteSpace: 'pre-wrap' }}>
            {this.state.errorDetails.message}<br />
            {this.state.errorInfo.componentStack}
          </details>
        </div>
      );
    }

    return this.props.children;
  }
}

function MyComponent(){
    const [data, setData] = React.useState(null);

    React.useEffect(() => {
      try {
        throw new Error("NETWORK_ERROR");
      } catch (e) {
        throw e;
      }
    }, []);

    return <div></div>;
}

הסבר:

• אובייקט errorMap מאחסן מידע על שגיאות, כולל הודעות ודגלי ניסיון חוזר, בהתבסס על סוגי שגיאות או קודים.
• הפונקציה handleCustomError מאחזרת פרטי שגיאה מ-errorMap בהתבסס על הודעת השגיאה ומחזירה ערכי ברירת מחדל אם לא נמצא קוד ספציפי.
• הרכיב MyErrorBoundary משתמש ב-handleCustomError כדי לקבל את הודעת השגיאה המתאימה מ-errorMap.

שיטות עבודה מומלצות לסיווג שגיאות

• הגדר סוגי שגיאות ברורים: קבע קבוצה עקבית של סוגי שגיאות או קודים עבור היישום שלך.
• ספק מידע הקשרי: כלול פרטים רלוונטיים באובייקטי שגיאה כדי להקל על ניפוי באגים.
• מרכז לוגיקת טיפול בשגיאות: השתמש במיפוי שגיאות מרכזי או בפונקציות עזר כדי לנהל טיפול בשגיאות בעקביות.
• רשום שגיאות ביעילות: השתלב עם שירותי דיווח שגיאות כדי לעקוב ולנתח שגיאות בפרודקשן. שירותים פופולריים כוללים את Sentry, Rollbar ו-Bugsnag.
• בדוק טיפול בשגיאות: כתוב בדיקות יחידה כדי לוודא שה-Error Boundaries שלך מטפלים כראוי בסוגי שגיאות שונים.
• שקול את חוויית המשתמש: הצג הודעות שגיאה אינפורמטיביות וידידותיות למשתמש המנחות משתמשים לפתרון. הימנע מז'רגון טכני.
• עקוב אחר שיעורי שגיאות: עקוב אחר התדירות של סוגי שגיאות שונים כדי לזהות בעיות חוזרות ונשנות ולתעדף תיקונים.
• בינאום (i18n): כאשר מציגים הודעות שגיאה למשתמש, ודאו שההודעות שלכם עוברות בינאום כראוי כדי לתמוך בשפות ותרבויות שונות. השתמשו בספריות כמו i18next או React's Context API כדי לנהל תרגומים.
• נגישות (a11y): ודאו שהודעות השגיאה שלכם נגישות למשתמשים עם מוגבלויות. השתמשו בתכונות ARIA כדי לספק הקשר נוסף לקוראי מסך.
• אבטחה: היזהרו לגבי איזה מידע אתם מציגים בהודעות שגיאה, במיוחד בסביבות פרודקשן. הימנעו מחשיפת נתונים רגישים שעלולים להיות מנוצלים על ידי תוקפים. לדוגמה, אל תציגו עקבות מחסנית גולמיים למשתמשי קצה.

תרחיש לדוגמה: טיפול בשגיאות API ביישום מסחר אלקטרוני

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

• שגיאות רשת: שרת ה-API אינו זמין או שחיבור האינטרנט של המשתמש מנותק.
• שגיאות אימות: אסימון האימות של המשתמש אינו חוקי או שפג תוקפו.
• שגיאות משאב לא נמצא: המוצר המבוקש אינו קיים.
• שגיאות שרת: שרת ה-API נתקל בשגיאה פנימית.

באמצעות Error Boundaries וסיווג שגיאות, היישום יכול לטפל בתרחישים אלה בחן:

// Example (Simplified)
async function fetchProduct(productId) {
  try {
    const response = await fetch(`/api/products/${productId}`);
    if (!response.ok) {
      if (response.status === 404) {
        throw new Error("PRODUCT_NOT_FOUND");
      } else if (response.status === 401 || response.status === 403) {
        throw new Error("AUTHENTICATION_ERROR");
      } else {
        throw new Error("SERVER_ERROR");
      }
    }
    return await response.json();
  } catch (error) {
    if (error instanceof TypeError && error.message === "Failed to fetch") {
      throw new Error("NETWORK_ERROR");
    }
    throw error;
  }
}

class ProductErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, errorDetails: null, errorInfo: null };
  }

  static getDerivedStateFromError(error) {
    const errorDetails = handleCustomError(error.message); // Use errorMap as shown previously
    return { hasError: true, errorDetails: errorDetails };
  }

  componentDidCatch(error, errorInfo) {
    console.error("Caught error:", error, errorInfo);
    this.setState({errorInfo: errorInfo});
  }

  render() {
    if (this.state.hasError) {
      const { message, retry } = this.state.errorDetails;
      return (
        <div>
          <h2>שגיאה!</h2>
          <p>{message}</p>
          {retry && <button onClick={() => window.location.reload()}>נסה שוב</button>}
        </div>
      );
    }

    return this.props.children;
  }
}

הסבר:

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

מסקנה

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

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

משאבים נוספים:

• תיעוד React Error Boundaries
• המדריך של Sentry ל-React 16 Error Boundaries
• המדריך של רובין ויירוך ל-React Error Boundary