קוראים כמוך עוזרים לתמוך ב-MUO. כאשר אתה מבצע רכישה באמצעות קישורים באתר שלנו, אנו עשויים להרוויח עמלת שותף. קרא עוד.

אם עבדת עם React במשך זמן מה, ייתכן שנתקלת בהודעה שכתובה "שקול להוסיף גבול שגיאה ל העץ שלך כדי להתאים אישית את התנהגות הטיפול בשגיאות." ייתכן שראית את זה במסוף הדפדפן שלך בכל פעם שהרכיבים שלך לְהִתְרַסֵק.

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

מהי מחלקת גבול השגיאה ב-React?

גבולות שגיאה עובדים כמו נסה/תפוס בלוק ב-Vanilla JavaScript. ההבדל הוא שהם תופסים את השגיאות שמתרחשות ברכיבי React. אם מתרחשת שגיאה ברכיב ממשק משתמש, React מבטל את הטעינה של העץ בתוך אותו רכיב ומחליף אותו בממשק המשתמש החלופי שהגדרת. המשמעות היא ששגיאה משפיעה רק על הרכיב בו היא מתרחשת ושאר האפליקציה פועלת כמצופה.

על פי תיעוד תגובה, מחלקות גבול שגיאות אינן תופסות שגיאות ב:

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

עבור השגיאות שלעיל, אתה יכול להשתמש בגוש try/catch.

לדוגמה, כדי לתפוס שגיאה שמתרחשת ב- מנהל אירועים, השתמש בקוד הבא:

instagram viewer 
פוּנקצִיָהEventComponent() {
const [error, setError] = useState(ריק)
const handleClick = () => {
לְנַסוֹת {
// עשה משהו
 } לתפוס (שגיאה) {
 setError (שגיאה)
 }
 }
לַחֲזוֹר (
<>
<div>{שְׁגִיאָה? שגיאה: ""}div>
<לַחְצָןבלחיצה={handleClick}>לַחְצָןלַחְצָן>

 )
}

השתמש בגבולות שגיאה כדי לתפוס שגיאות ברכיבי React בלבד.

יצירת מחלקה גבול שגיאה

אתה יכול ליצור גבול שגיאה על ידי הגדרת מחלקה המכילה אחת או שתיים מהשיטות הבאות:

  • סטטי getDerivedStateFromError()
  • componentDidCatch()

הפונקציה getDerivedStateFromError() מעדכנת את מצב הרכיב ברגע שהשגיאה נתפסת, בעוד שאתה יכול להשתמש ב-componentDidCatch() כדי לתייג מידע שגיאה למסוף. אתה יכול גם לשלוח את השגיאות לשירות דיווח שגיאות.

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

מעמדError Boundaryמשתרעלְהָגִיב.רְכִיב{
בַּנַאִי(אביזרים) {
סוּפֶּר(אביזרים);
זֶה.state = { שְׁגִיאָה: שֶׁקֶר };
 }
סטָטִיgetDerivedStateFromError(שְׁגִיאָה){
// עדכן מצב כך שהעיבוד הבא יציג את ממשק המשתמש החלופי.
לַחֲזוֹר { שְׁגִיאָה: error };
 }


 componentDidCatch (שגיאה, errorInfo) {
// התחבר לשגיאה לשירות דיווח שגיאות
 }


 render() {
אם (זֶה.מדינה.שְׁגִיאָה) {
// צור כאן ממשק משתמש חלופי מותאם אישית
לַחֲזוֹר<h1>נראה שיש בעיה.h1>;
 }

לַחֲזוֹרזֶה.props.children; 
 }
}
יְצוּאבְּרִירַת מֶחדָל ErrorBoundary;

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

אם אינך רוצה ליצור את מחלקת גבול השגיאה מאפס, השתמש ב- react-error-boundary חבילת NPM. חבילה זו מספקת את רכיב ErrorBoundary שעוטף רכיבים שלדעתך עלולים להעלות שגיאות.

שימוש במחלקת גבול השגיאה

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

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

<Error Boundary>
<אפליקציה/>
Error Boundary>

אם אתה עוטף רכיב בודד עם ErrorBoundary, שגיאה ברכיב זה לא תשפיע על אופן העיבוד של רכיב אחר.

<Error Boundary>
<פּרוֹפִיל/>
Error Boundary>

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

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

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

בעת בניית רכיב React שלך, צור מחלקת גבול שגיאה מאפס או באמצעות חבילת react-error-boundary כדי להציג הודעות שגיאה ידידותיות למשתמש.