איך מטפלים בשגיאות בקומפוננטות שרת ב-Next.js מבלי לקבל מכתב פיטורים ️

טיפול בשגיאות בקומפוננטות שרת בnext.js 😎 כידוע אין דבר יותר מעורר חלחלה בנו כמפתחים מאשר שהאתר קורס לחלוטין (אולי אננס על פיצה טיפטיפה יותר), זה כבר מסיבת לחץ עם מלא מיגרנות ואנשים רודפים אחד אחרי השני עם מטאטא במסדרון, וכיסאות כתר כמיטב המסורת. בריאקט נורמלי אנחנו כמובן עוטפים כל קטע קוד שעלול לחרב לנו את המקום עבודה בtry catch , ואז נציג למשתמש קצה הודעת שגיאה עם הסבר כללי מה אירע (ודווקא לא console.log שמכיל את כל הסיסמאות לפרטי אשראי שלנו בניגוד לקונבנציה הרווחת). אבל הקוד בserver components שכמו ששמו מעיד עליו - רץ בשרת אם נזרוק שגיאה. הלקוח האומלל יקבל פשוט דף שגיאה ואנחנו הודעת פיטורים. אז הפיתרון של next הוא כמו שראינו בעבר (קראנו) דפים יעודיים כמו loading.ts וlayout.ts רק הפעם זה error.ts ושם יש לנו גישה לerror מה שאומר שנוכל לקחת משם את הודעת השגיאה, ואפילו אופציה מובנית של לנסות שוב להעלות את הדף - וכל זה מגיע בprops של הדף באופן אוטומטי. כמובן שנוכל להיות יותר מתוחכמים ולזרוק שגיאות ייחודיות ולטפל בהם לפי סוג השגיאה, אם מישהו ניגש לדוגמא למוצר לא קיים אנחנו נוביל אותו בעדינות לדף המוצרים, מוצר שנגמר? נפנה אותו בעדינות למוצר דומה, דף שאין לו הרשאה? נפנה אותו בעדינות לפיצה עם אננס או כל עינוי חמור אחר. מי שרוצה לקרוא יותר על טיפול בשגיאות וerror boundary מוזמן לקרוא בדוקומנטציה הרישמית: