Error Boundaries הוצג לנו בריאקט 16 כדרך לתפוס שגיאות המתרחשות בשלב הרנדור ולהציג למשתמש fallback שאותו נגדיר. בפוסט זה נלמד מהם Error Boundaries מה הם באו לפתור,איך ואיפה צריך להשתמשמש בהם.
לפני שנצלול לתוך Error Boundaries בואו נבין את הקונספט. Error Boundaries היא קומפוננטת ריאקט שתופסת שגיאות JavaScript בכל עץ הקומפוננטות שתחתיו, כאשר נתפסת שגיאה קומפוננטה זו יודעת להציג fallback במקום שבו הקומפוננטה קרסה או לרשום את השגיאה עצמה. Error Boundaries תופסים שגיאות במהלך הרנדר, ב-lifecycle methods וב-constructors של מי שמתחתם בעץ הקומפוננטות.
בדוגמא הבאה נדמה שגיאה כדי לראות מה קורה בדרך כלל כאשר אנחנו לא מתשמשים ב-Error Boundaries
נלחץ על הכפתור "+" ובלחיצה החמישית זה ייכשל ויזרוק לנו הערה
כאשר האפליקציה נתקלת בשגיאה כזו במצב production הקומפוננטה תעבור למצב unmount והיוזר ישאר עם ״מקום ריק״ באפליקציה . זוהי חוויות ux מאוד רעה ולא נרצה שהמשתמשים שלנו לא יבינו מה קורה.
Error Boundaries בא לתת לנו מענה בדיוק בשביל זה!
תהיו הראשונים לדעת!
הרשמו לניוזלטר שלנו וקבלו התראות על מאמרים חדשים ישירות למייל
ועכשיו נוסיף Error Boundaries
אז Error Boundaries היא בעצם קומפוננטה מסוג class אשר משתמשת בשתי lifecycle methods.
static getDerivedStateFromError ו- componentDidCatch שאותן מייד נסביר
static getDerivedStateFromError משמש אותנו על מנת לרנדר fallback לאחר שנזרקה שגיאה
ו- componentDidCatch משמש אותנו בכדי לקבל ולרשום מידע על השגיאה שקיבלנו.אפשר גם לשלוח את השגיאה ללוגרים (loggers) למשל Sentry.
בואו נראה איך הקומפוננטה נראית
ואז אנחנו יכולים להשתמש בה כקומפוננטה רגילה
בואו נראה את זה על הדוגמא הקודמת שימו לב שגם פה תוצג לנו הודעת שגיאה כמו קודם וזה צפוי מכיוון שהצוות של ריקאט תכנן את Error Boundaries שנקבל את השגיאות המוכרות לנו גם בסביבת פיתוח. שימו לב שאם נלחץ על האיקס בפינה הימנית העליונה נוכל לראות את ה-fallback.
זה נותן לנו משוב חזותי למשתמש שמשהו נשבר ומאפשר לו להמשיך באינטראקציה עם האפליקציה שלנו.
Error Boundaries או Try…Catch
Error Boundaries למעשה אינם מתחרים עם try catch. והם מיועדים לתפוס שגיאות שמקורם בשלושה מקומות
- During render phase
- In a lifecycle method
- In the constructor
אך שימו לב Error Boundaries לא מטפלת בשגיאות שמקורן ב- - Event handlers.
- setTimeout or requestAnimationFramecallbacks.
- רנדור בצד שרת-Server side rendering.
אז Error Boundaries לא באמת משפיעים על אופן השימוש שלנו ב-try catch ושניהם נחוצים לטיפול בשגיאות בריאקט
לסיכום
כעת שאנחנו מכירים את Error Boundaries ויודעים איך להשתמש בהם נוכל לתפוס שגיאות בקומפוננטות שלנו ולתת חוויות משתמש הרבה יותר טובה ליוזרים של האפליקציה שלנו. יש שיגידו שצריך לעטוף לפחות את הקומפוננטה הראשית כשלב ראשון ואז לאט לאט להוסיף עוד Error Boundaries. אם אתם משתמשים ב- lazy &Suspense אז זה מקרה קלאסי לעטוף אותם ב- Error Boundaries. מוזמנים לתת דוגמאות בתגובות איפה אתם משתמשים ב- Error Boundaries.
אם אהבתם את המאמר אשמח אם תשתפו/תמליצו לאחרים, אם יש לכם שאלות או הערות תוכלו להשאיר אותם בתגובות מתחת.
למה לעשות את זה כקומפוננטה נפרדת, ולא פשוט להוסיף את 2 המתודות הללו לקומפוננטה קיימת שיש לי, וככה להגיב לשגיאת render?
כי Error Boundaries לא יודע לתפוס שגיאות של עצמו אלא רק את מי שהוא עוטף