You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: content/docs/error-boundaries.md
+22-22Lines changed: 22 additions & 22 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,27 +1,27 @@
1
1
---
2
2
id: error-boundaries
3
-
title: גבולות שגיאות
3
+
title: גבולות שגיאה
4
4
permalink: docs/error-boundaries.html
5
5
---
6
6
7
7
בעבר, שגיאות בתוך קומפוננטות ב-JavaScript הובילו להשחתת המצב הפנימי של React וגרמו ל[פליטת](https://github.com/facebook/react/issues/4026)[שגיאות](https://github.com/facebook/react/issues/6895)[אניגמטיות](https://github.com/facebook/react/issues/8579) ברינדור המסך הבא. מקור הבעיה תמיד נבע משגיאות קודמות בקוד האפליקציה, אבל React לא סיפק דרך לטפל בהם בחן בתוך הקומפוננטות, ולא מצא דרך להתאושש מהם.
8
8
9
-
## גובלי השגיאות {#introducing-error-boundaries}
9
+
## גבולות השגיאה {#introducing-error-boundaries}
10
10
11
-
שגיאת JavaScript בחלק מממשק המשתמש לא אמורה לשבור את כל האפליקציה. כדי לפתור את הבעיה למשתמשי React, גרסה 16 מציגה קונספט חדש של ״גובלי שגיאות״.
11
+
שגיאת JavaScript בחלק מממשק המשתמש לא אמורה לשבור את כל האפליקציה. כדי לפתור את הבעיה למשתמשי React, גרסה 16 מציגה קונספט חדש של ״גבולות שגיאה״.
12
12
13
-
גובלי שגיאות הם בעצם קומפוננטות ש**תופסות שגיאות JavaScript שקורות בכל אחד מקומפוננטות הילד שלהן, מתעדות אותן ומציגות ממשק חלופי.** במקום להציג את הקומפוננטה השבורה. הן תופסות שגיאות בזמן רינדור, במתודות מחזור חיים ובבנאי הקומפוננטות עבור כל אחת מקומפוננטות הילד שלהן.
13
+
גבולות שגיאה הם בעצם קומפוננטות ש**תופסות שגיאות JavaScript שקורות בכל אחד מקומפוננטות הילד שלהן, מתעדות אותן ומציגות ממשק חלופי.** במקום להציג את הקומפוננטה השבורה. הן תופסות שגיאות בזמן רינדור, במתודות מחזור חיים ובבנאי הקומפוננטות עבור כל אחת מקומפוננטות הילד שלהן.
14
14
15
15
> הערה
16
16
>
17
-
> גובלי שגיאות**לא** תופסים שגיאות ב:
17
+
> גבולות שגיאה**לא** תופסים שגיאות ב:
18
18
>
19
19
> * מטפלי אירועים ([מידע נוסף](#how-about-event-handlers))
20
20
> * קוד אסינכרוני (לדוגמא `setTimeout` או `requestAnimationFrame`)
21
21
> * רינדור בצד השרת
22
-
> * שגיאות שקורות בגובל השגיאות עצמו
22
+
> * שגיאות שקורות בגבול השגיאה עצמו
23
23
24
-
קומפוננטת מחלקה הופכת לגובל שגיאות אם היא מגדירה לפחות אחת ממתודות מחזור החיים [`static getDerivedStateFromError()`](/docs/react-component.html#static-getderivedstatefromerror) או [`componentDidCatch()`](/docs/react-component.html#componentdidcatch).
24
+
קומפוננטת מחלקה הופכת לגבול שגיאה אם היא מגדירה לפחות אחת ממתודות מחזור החיים [`static getDerivedStateFromError()`](/docs/react-component.html#static-getderivedstatefromerror) או [`componentDidCatch()`](/docs/react-component.html#componentdidcatch).
25
25
המתודה `static getDerivedStateFromError()` משמשת לרנדור ממשק חלופי לאחר שגיאה שנתפסה, ו- `componentDidCatch()` עוזרת בתיעוד השגיאה.
26
26
27
27
```js{7-10,12-15,18-21}
@@ -52,49 +52,49 @@ class ErrorBoundary extends React.Component {
52
52
}
53
53
```
54
54
55
-
השימוש בגובל השגיאות זהה לשימוש בכל קומפוננטה רגילה:
55
+
השימוש בגבולות שגיאה זהה לשימוש בכל קומפוננטה רגילה:
56
56
57
57
```js
58
58
<ErrorBoundary>
59
59
<MyWidget />
60
60
</ErrorBoundary>
61
61
```
62
62
63
-
גובלי שגיאות עובדים בצורה דומה לבלוק `catch {}` ב-JavaScript, אבל בתוך הקומפוננטה.
64
-
רק קומפוננטות מחלקה יכולות לגבול שגיאות. בפועל, מגדירים בדרך כלל גובל שגיאות אחד ונשתמש בו בצורה אחידה בכל האפליקציה.
63
+
גבולות שגיאה עובדים בצורה דומה לבלוק `catch {}` ב-JavaScript, אבל בתוך הקומפוננטה.
64
+
רק קומפוננטות מחלקה יכולות להיות גבולות שגיאה. בפועל, מגדירים בדרך כלל גבול שגיאה אחד ונשתמש בו בצורה אחידה בכל האפליקציה.
65
65
66
-
שימו לב ש**גובלי שגיאות תופסים אך ורק שגיאות בקומפוננטות הילד שלהם**, ולא בתוך עצמם. אם מתרחשת שגיאה בקוד ה- `render` של גובל השגיאות לדוגמא, השגיאות תעלה לגובל השגיאות הבא מעליה, בדיוק כמצופה מההתנהגות של בלוק ה- `catch {}` ב-JavaScript.
66
+
שימו לב ש**גבולות שגיאה תופסים אך ורק שגיאות בקומפוננטות הילד שלהם**, ולא בתוך עצמם. אם מתרחשת שגיאה בקוד ה- `render` של גבולות השגיאה לדוגמא, השגיאות תעלה לגבול שגיאה הבא מעליה, בדיוק כמצופה מההתנהגות של בלוק ה- `catch {}` ב-JavaScript.
67
67
68
68
## הדגמה חיה {#live-demo}
69
69
70
-
שימו לב ל[דוגמא הבאה של הגדרה ושימוש בגובל שגיאות](https://codepen.io/gaearon/pen/wqvxGa?editors=0010) עם [גרסה 16 של React](/blog/2017/09/26/react-v16.0.html).
70
+
שימו לב ל[דוגמא הבאה של הגדרה ושימוש בגבולות שגיאה](https://codepen.io/gaearon/pen/wqvxGa?editors=0010) עם [גרסה 16 של React](/blog/2017/09/26/react-v16.0.html).
71
71
72
72
73
-
## איפה למקם את גובל השגיאות {#where-to-place-error-boundaries}
73
+
## איפה למקם את גבולות שגיאה {#where-to-place-error-boundaries}
74
74
75
-
אפשר להגדיר גובלי שגיאות ברמה גבוהה או נמוכה לפי הצורך או לפי ההעדפה אישית. לדוגמא, בשורש הצומת של עץ הקומפוננטות עם ממשק חלופי של ״משהו השתבש..״ (כמו שלרוב מנוהלות התרסקויות בצד השרת), או לחלופין לעטוף כל קומפוננטה או ווידג׳ט בגובל שגיאות אישי כדי למנוע התרסקות של שאר האפליקציה.
75
+
אפשר להגדיר גבולות שגיאה ברמה גבוהה או נמוכה לפי הצורך או לפי ההעדפה אישית. לדוגמא, בשורש הצומת של עץ הקומפוננטות עם ממשק חלופי של ״משהו השתבש..״ (כמו שלרוב מנוהלות התרסקויות בצד השרת), או לחלופין לעטוף כל קומפוננטה או ווידג׳ט בגבול שגיאה אישי כדי למנוע התרסקות של שאר האפליקציה.
76
76
77
77
## התנהגות חדשה לשגיאות שלא נתפסו {#new-behavior-for-uncaught-errors}
78
78
79
-
גרסה 16 של React מציגה שינוי בהתנהגות עם השלכות חשובות. **שגיאות של נתפסות על ידי גובל שגיאות יביאו לפירוק מוחלט של עץ הקומפוננטות הראשי**.
79
+
גרסה 16 של React מציגה שינוי בהתנהגות עם השלכות חשובות. **שגיאות של נתפסות על ידי גבולות שגיאה יביאו לפירוק מוחלט של עץ הקומפוננטות הראשי**.
80
80
81
81
דנו בהחלטה זו לא מעט, אבל מנסיונינו תמיד כדאי שלא להשתמש בממשק מושחת, אלא להפטר ממנו לגמרי. לדוגמא, באפליקציה כמו מסנג׳ר, להשאיר ממשק שבור בצורה גלויה לעין יכול להוביל לשליחת הודעה לאדם הלא נכון. באותה מידה, באפליקציה שמנהלת כספים עדיף לא להציג כלום מאשר להציג סכום שגוי.
82
82
83
-
השינוי הזה אומר שכשמשדרגים לגרסה 16, בדרך כלל מגלים שגיאות באפליקציה שעד אז לא שמנו לב אליהן. הוספת גובלי שגיאות מאפשר לנו לספק חווית משתמש טובה יותר בכל מצב.
83
+
השינוי הזה אומר שכשמשדרגים לגרסה 16, בדרך כלל מגלים שגיאות באפליקציה שעד אז לא שמנו לב אליהן. הוספת גבולות שגיאה מאפשר לנו לספק חווית משתמש טובה יותר בכל מצב.
84
84
85
-
לדוגמא, המסנג׳ר של Facebook עוטף תוכן מהסרגל הצידי, חלונית המידע, חלונית השיחה ושדה הקלט של ההודעה בגובלי שגיאות נפרדים. במקרה ואחד מהם קורס, האחרים נשארים זמינים ואינטרקטיביים.
85
+
לדוגמא, המסנג׳ר של Facebook עוטף תוכן מהסרגל הצידי, חלונית המידע, חלונית השיחה ושדה הקלט של ההודעה בגבולות שגיאה נפרדים. במקרה ואחד מהם קורס, האחרים נשארים זמינים ואינטרקטיביים.
86
86
87
87
אנחנו ממליצים גם להשתמש בשירותי דיווח השגיאות של JavaScript (או לבנות שירותים דומים בעצמכם), על מנת למצוא בעיות בסביבת הייצור ולתקן אותן בקלות ובמהירות.
בגרסה 16 של React כל השגיאות שקורות בזמן הרינדור בסביבת הפיתוח מודפסות למסוף בדפדפן, אפילו אם האפליקציה בולעת אותם בטעות. בנוסף להודעת השגיאה ומעקב העירומת של JavaScript, מודפס גם מעקר הערימה של הקומפפוננטה. עכשיו אפשר לראות בדיוק איפה בקומפוננטה קרתה השגיאה:
92
92
93
-
<imgsrc="../images/docs/error-boundaries-stack-trace.png"style="max-width:100%"alt="שיגאה שנתפסה על ידי גובל השגיאות">
93
+
<imgsrc="../images/docs/error-boundaries-stack-trace.png"style="max-width:100%"alt="שיגאה שנתפסה על ידי גבולות שגיאה">
94
94
95
95
אפשר גם לראות את שם הקובץ ומספר השורה בקוד הקומפוננטה בעזרת מעקב הערימות. זה עובד בברירת המחדל בפרויקטים שנוצרו עם [אפליקצית Create React](https://github.com/facebookincubator/create-react-app):
96
96
97
-
<imgsrc="../images/docs/error-boundaries-stack-trace-line-numbers.png"style="max-width:100%"alt="שגיאה שנתפסה על ידי גובל השגיאות עם מספר שורה">
97
+
<imgsrc="../images/docs/error-boundaries-stack-trace-line-numbers.png"style="max-width:100%"alt="שגיאה שנתפסה על ידי גבולות שגיאה עם מספר שורה">
98
98
99
99
אם לא יצרתם את הפרויקט עם אפליקצית Create React, תוכלו להשתמש [בתוסף הזה](https://www.npmjs.com/package/babel-plugin-transform-react-jsx-source) - הוסיפו אותו לתצורת ה-Babel בפרויקט. שימו לב שהוא מיועד רק לשימוש בסביבת הפיתוח ו**חובה לנטרל אותו בסביבת הייצור**.
100
100
@@ -121,13 +121,13 @@ try {
121
121
<Button />
122
122
```
123
123
124
-
גובלי שגיאות משמרים את האופן הדקלרטיבי של React ומספקים התנהגות דומה. לדוגמא, אפילו אם שגיאה צצה במתודת ה-`componentDidUpdate` שנגרמה איפשהו עמוק בתוך העץ בתוך `setState`, היא תוצף לגובל השגיאות הקרוב ביותר.
124
+
גבולות שגיאה משמרים את האופן הדקלרטיבי של React ומספקים התנהגות דומה. לדוגמא, אפילו אם שגיאה צצה במתודת ה-`componentDidUpdate` שנגרמה איפשהו עמוק בתוך העץ בתוך `setState`, היא תוצף לגבול השגיאה הקרוב ביותר.
125
125
126
126
## מה עם מטפלי אירועים? {#how-about-event-handlers}
127
127
128
-
גובלי שגיאות**לא** תופסים שגיאות מתוך מטפלי אירועים.
128
+
גבולות שגיאה**לא** תופסים שגיאות מתוך מטפלי אירועים.
129
129
130
-
React לא צריך גובלי שגיאות כדי להתאושש משגיאות במטפלי אירועים. בשונה מהמתודת הרינדור ומתודות מחזור החיים, שגיאות שצצות במטפלי האירועים לא קורות בזמן הרינדור. אז אם צצה שגיאה, React עדיין ידע מה להציג.
130
+
React לא צריך גבולות שגיאה כדי להתאושש משגיאות במטפלי אירועים. בשונה מהמתודת הרינדור ומתודות מחזור החיים, שגיאות שצצות במטפלי האירועים לא קורות בזמן הרינדור. אז אם צצה שגיאה, React עדיין ידע מה להציג.
131
131
132
132
כשיש צורך לתפוס שגיאה במטפל האירועים, השתמשו בבלוק ה-`try` / `catch` כרגיל:
0 commit comments