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
In the past, JavaScript errors inside components used to corrupt React’s internal state and cause it to [emit](https://github.com/facebook/react/issues/4026)[cryptic](https://github.com/facebook/react/issues/6895)[errors](https://github.com/facebook/react/issues/8579)on next renders. These errors were always caused by an earlier error in the application code, but React did not provide a way to handle them gracefully in components, and could not recover from them.
7
+
W przeszłości błędy javascriptowe wewnątrz komponentów uszkadzały wewnętrzny stan Reacta i [wywoływały](https://github.com/facebook/react/issues/4026)[tajemnicze](https://github.com/facebook/react/issues/6895)[błędy](https://github.com/facebook/react/issues/8579)w kolejnych renderowaniach. Były one następstwem wcześniejszego błędu w kodzie aplikacji, jednakże React nie dostarczał żadnego rozwiązania pozwalającego na właściwe ich obsłużenie wewnątrz komponentów oraz nie potrafił odtworzyć aplikacji po ich wystąpieniu.
8
8
9
+
## Przedstawiamy granice błędów {#introducing-error-boundaries}
Błąd w kodzie JavaScript, występujący w jednej z części interfejsu użytkownika (UI), nie powinien psuć całej aplikacji. Aby rozwiązać ten problem, w Reakcie 16 wprowadziliśmy koncepcję granic błędów (ang. *error boundary*).
11
12
12
-
A JavaScript error in a part of the UI shouldn’t break the whole app. To solve this problem for React users, React 16 introduces a new concept of an “error boundary”.
13
+
Granice błędów to komponenty reactowe, które **przechwytują błędy javascriptowe występujące gdziekolwiek wewnątrz drzewa komponentów ich potomków, a następnie logują je i wyświetlają zastępczy interfejs UI**, zamiast pokazywać ten niepoprawnie działający. Granice błędów przechwytują błędy występujące podczas renderowania, w metodach cyklu życia komponentów, a także w konstruktorach całego podrzędnego im drzewa komponentów.
13
14
14
-
Error boundaries are React components that **catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI** instead of the component tree that crashed. Error boundaries catch errors during rendering, in lifecycle methods, and in constructors of the whole tree below them.
> *Errors thrown in the error boundary itself (rather than its children)
19
+
> *Procedurach obsługi zdarzeń (ang. event handlers) ([informacje](#how-about-event-handlers))
20
+
> *Asynchronicznym kodzie (np. w metodach: `setTimeout`lub w funkcjach zwrotnych `requestAnimationFrame`)
21
+
> *Komponentach renderowanych po stronie serwera
22
+
> *Błędach rzuconych w samych granicach błędów (a nie w ich podrzędnych komponentach)
24
23
25
-
A class component becomes an error boundary if it defines either (or both) of the lifecycle methods [`static getDerivedStateFromError()`](/docs/react-component.html#static-getderivedstatefromerror)or[`componentDidCatch()`](/docs/react-component.html#componentdidcatch). Use `static getDerivedStateFromError()`to render a fallback UI after an error has been thrown. Use `componentDidCatch()` to log error information.
24
+
Aby komponent klasowy stał się granicą błędu, musi definiować jedną lub obie metody cyklu życia: [`static getDerivedStateFromError()`](/docs/react-component.html#static-getderivedstatefromerror)i/lub[`componentDidCatch()`](/docs/react-component.html#componentdidcatch). Należy używać `static getDerivedStateFromError()`do wyrenderowania zastępczego UI po rzuceniu błędu, a `componentDidCatch()`, aby zalogować informacje o błędzie.
26
25
27
26
```js{7-10,12-15,18-21}
28
27
class ErrorBoundary extends React.Component {
@@ -32,18 +31,18 @@ class ErrorBoundary extends React.Component {
32
31
}
33
32
34
33
static getDerivedStateFromError(error) {
35
-
// Update state so the next render will show the fallback UI.
34
+
// Zaktualizuj stan, aby następny render pokazał zastępcze UI.
36
35
return { hasError: true };
37
36
}
38
37
39
38
componentDidCatch(error, errorInfo) {
40
-
// You can also log the error to an error reporting service
39
+
// Możesz także zalogować błąd do zewnętrznego serwisu raportowania błędów
@@ -52,61 +51,59 @@ class ErrorBoundary extends React.Component {
52
51
}
53
52
```
54
53
55
-
Then you can use it as a regular component:
54
+
Po zdefiniowaniu, granicy błędu można używać jak normalnego komponentu:
56
55
57
56
```js
58
57
<ErrorBoundary>
59
58
<MyWidget />
60
59
</ErrorBoundary>
61
60
```
62
61
63
-
Error boundaries work like a JavaScript `catch {}` block, but for components. Only class components can be error boundaries. In practice, most of the time you’ll want to declare an error boundary component once and use it throughout your application.
64
-
65
-
Note that **error boundaries only catch errors in the components below them in the tree**. An error boundary can’t catch an error within itself. If an error boundary fails trying to render the error message, the error will propagate to the closest error boundary above it. This, too, is similar to how catch {} block works in JavaScript.
66
-
67
-
## Live Demo {#live-demo}
62
+
Granice błędów działają jak bloki `catch {}` w JavaScript, tyle że dla komponentów. Można je zdefiniować tylko w komponentach klasowych. W praktyce, w większości przypadków wystarczy zdefiniować jeden komponent granicy błędu i używać go w całej aplikacji.
68
63
69
-
Check out [this example of declaring and using an error boundary](https://codepen.io/gaearon/pen/wqvxGa?editors=0010) with [React 16](/blog/2017/09/26/react-v16.0.html).
64
+
Należy pamiętać, że **granice błędów wyłapują błędy w komponentach potomnych**. Nie są one jednak w stanie obsłużyć własnych błędów. W takim przypadku, jeżeli granica błędu nie będzie w stanie wyświetlić zastępczego UI, błąd zostanie przekazany do kolejnej najbliższej granicy błędu powyżej w strukturze komponentów. Jest to zachowanie podobne do tego znanego z javascriptowych bloków `catch {}`.
70
65
66
+
## Demo {#live-demo}
71
67
72
-
## Where to Place Error Boundaries {#where-to-place-error-boundaries}
68
+
[Przykład tworzenia i użycia granicy błędów](https://codepen.io/gaearon/pen/wqvxGa?editors=0010) z wykorzystaniem [Reacta 16](/blog/2017/09/26/react-v16.0.html).
73
69
74
-
The granularity of error boundaries is up to you. You may wrap top-level route components to display a “Something went wrong” message to the user, just like server-side frameworks often handle crashes. You may also wrap individual widgets in an error boundary to protect them from crashing the rest of the application.
75
70
71
+
## Gdzie umiejscowić granice błędów {#where-to-place-error-boundaries}
76
72
77
-
## New Behavior for Uncaught Errors {#new-behavior-for-uncaught-errors}
73
+
To, jak bardzo szczegółowo zostanie pokryty kod za pomocą granic błędów, jest kwestią preferencji. Możliwe jest, na przykład, opakowanie granicą błędów komponentu najwyższego poziomu odpowiedzialnego za routing aplikacji, aby wyświetlić informację: "Coś poszło nie tak" - tak jak ma to często miejsce w frameworkach po stronie serwera. Można również opakować pojedyncze fragmenty aplikacji, aby uchronić jej pozostałe części przed błędami.
78
74
79
-
This change has an important implication. **As of React 16, errors that were not caught by any error boundary will result in unmounting of the whole React component tree.**
75
+
## Nowe zachowanie nieobsłużonych błędów {#new-behavior-for-uncaught-errors}
80
76
81
-
We debated this decision, but in our experience it is worse to leave corrupted UI in place than to completely remove it. For example, in a product like Messenger leaving the broken UI visible could lead to somebody sending a message to the wrong person. Similarly, it is worse for a payments app to display a wrong amount than to render nothing.
77
+
Wprowadzenie granic błędów ma ważne następstwo. **Od Reacta w wersji 16, błędy, które nie zostały obsłużone za pomocą granicy błędów, spowodują odmontowanie całego drzewa komponentów.**
82
78
83
-
This change means that as you migrate to React 16, you will likely uncover existing crashes in your application that have been unnoticed before. Adding error boundaries lets you provide better user experience when something goes wrong.
79
+
Przedyskutowaliśmy tę zmianę i z naszego doświadczenia wynika, że lepiej jest usunąć całe drzewo komponentów niż wyświetlać zepsute fragmenty UI. Na przykład, w produkcie takim jak Messenger pozostawienie wyświetlonego zepsutego kawałka UI może sprawić, że ktoś nieświadomie wyśle wiadomość do innej osoby. Również w aplikacjach finansowych wyświetlanie złego stanu konta jest gorszą sytuacją niż nie wyświetlenie niczego.
84
80
85
-
For example, Facebook Messenger wraps content of the sidebar, the info panel, the conversation log, and the message input into separate error boundaries. If some component in one of these UI areas crashes, the rest of them remain interactive.
81
+
Ta zmiana oznacza, że wraz z migracją do nowej wersji Reacta odkryte zostaną błędy w aplikacjach, które do tej pory nie zostały zauważone. Dodanie granic błędów zapewni lepsze doświadczenie dla użytkownika, gdy coś pójdzie nie tak.
86
82
87
-
We also encourage you to use JS error reporting services (or build your own) so that you can learn about unhandled exceptions as they happen in production, and fix them.
83
+
Przykładowo, Facebook Messenger opakowuje w osobne granice błędów następujące fragmenty aplikacji: zawartość paska bocznego, panel z informacjami o konwersacji, listę konwersacji i pole tekstowe na wiadomość. Jeżeli jeden z tych elementów zadziała nieprawidłowo, reszta pozostanie interaktywa i działająca.
88
84
85
+
Zachęcamy również do używania (lub zbudowania własnego) narzędzia do raportowania błędów, dzięki czemu będzie możliwe poznanie nieobsłużonych błędów występujących w środowisku produkcyjnym.
React 16 prints all errors that occurred during rendering to the console in development, even if the application accidentally swallows them. In addition to the error message and the JavaScript stack, it also provides component stack traces. Now you can see where exactly in the component tree the failure has happened:
89
+
React 16, w środowisku deweloperskim, wyświetla w konsoli wszystkie błędy złapane podczas renderowania, nawet jeżeli aplikacja przypadkowo je przejmie. Oprócz wiadomości błędu i javascriptowego stosu, dostępny jest również stos komponentów. Dzięki temu wiadomo, gdzie dokładnie w drzewie komponentów wystąpił błąd:
93
90
94
-
<imgsrc="../images/docs/error-boundaries-stack-trace.png"style="max-width:100%"alt="Error caught by Error Boundary component">
91
+
<imgsrc="../images/docs/error-boundaries-stack-trace.png"style="max-width:100%"alt="Błąd złapany w komponencie będącym granicą błędów">
95
92
96
-
You can also see the filenames and line numbers in the component stack trace. This works by default in [Create React App](https://github.com/facebookincubator/create-react-app) projects:
93
+
W drzewie komponentów widoczne są również numery linii i nazwy plików. Ten mechanizm domyślnie działa w aplikacjach stworzonych przy użyciu [Create React App](https://github.com/facebookincubator/create-react-app):
97
94
98
-
<imgsrc="../images/docs/error-boundaries-stack-trace-line-numbers.png"style="max-width:100%"alt="Error caught by Error Boundary component with line numbers">
95
+
<imgsrc="../images/docs/error-boundaries-stack-trace-line-numbers.png"style="max-width:100%"alt="Błąd złapany w komponencie będącym granicą błędów wraz z numerami linii">
99
96
100
-
If you don’t use Create React App, you can add [this plugin](https://www.npmjs.com/package/babel-plugin-transform-react-jsx-source)manually to your Babel configuration. Note that it’s intended only for development and **must be disabled in production**.
97
+
Jeżeli nie używasz Create React App, możesz ręcznie dodać [ten plugin](https://www.npmjs.com/package/babel-plugin-transform-react-jsx-source)do swojej konfiguracji Babela. Został on stworzony do używania tylko podczas fazy deweloperskiej i **powinien zostać wyłączony w środowisku produkcyjnym**
101
98
102
-
> Note
99
+
> Uwaga
103
100
>
104
-
> Component names displayed in the stack traces depend on the [`Function.name`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/name) property. If you support older browsers and devices which may not yet provide this natively (e.g. IE 11), consider including a `Function.name` polyfill in your bundled application, such as [`function.name-polyfill`](https://github.com/JamesMGreene/Function.name). Alternatively, you may explicitly set the [`displayName`](/docs/react-component.html#displayname)property on all your components.
101
+
> Nazwy komponentów wyświetlane w śladzie stosu zależą od własności [`Function.name`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/name). Jeżeli obsługujesz starsze przeglądarki, które nie dostarczają jej natywnie (np. IE 11), możesz dodać łatkę taką jak [`function.name-polyfill`](https://github.com/JamesMGreene/Function.name). Alternatywą jest zadeklarowanie wprost [`displayName`](/docs/react-component.html#displayname)we wszystkich komponentach.
105
102
106
103
107
-
## How About try/catch? {#how-about-trycatch}
104
+
## A co z try/catch? {#how-about-trycatch}
108
105
109
-
`try` / `catch`is great but it only works for imperative code:
106
+
`try` / `catch`jest świetnym rozwiązaniem, ale działa tylko dla imperatywnego kodu:
110
107
111
108
```js
112
109
try {
@@ -116,21 +113,21 @@ try {
116
113
}
117
114
```
118
115
119
-
However, React components are declarative and specify *what* should be rendered:
116
+
Natomiast komponenty reactowe są deklaratywne i określają, *co* powinno zostać wyrenderowane:
120
117
121
118
```js
122
119
<Button />
123
120
```
124
121
125
-
Error boundaries preserve the declarative nature of React, and behave as you would expect. For example, even if an error occurs in a `componentDidUpdate`method caused by a `setState` somewhere deep in the tree, it will still correctly propagate to the closest error boundary.
122
+
Granice błędów zachowują deklaratywną naturę Reacta. Na przykład, jeżeli w metodzie `componentDidUpdate`wystąpi błąd podczas aktualizacji stanu, aplikacja poprawnie przekaże błąd do najbliższej granicy błędów.
126
123
127
-
## How About Event Handlers? {#how-about-event-handlers}
124
+
## A co z procedurami obsługi zdarzeń? {#how-about-event-handlers}
Granice błędów nie obsługują błędów z procedur obsługi zdarzeń.
130
127
131
-
React doesn't need error boundaries to recover from errors in event handlers. Unlike the render method and lifecycle methods, the event handlers don't happen during rendering. So if they throw, React still knows what to display on the screen.
128
+
React nie potrzebuje granic błędów do przywrócenia aplikacji po błędzie powstałych w procedurze obsługi zdarzeń. W przeciwieństwie do metod cyklu życia komponentu lub metody renderującej, procedury obsługi zdarzeń nie są wywoływane w trakcie renderowania. Dzięki temu nawet w przypadku błędu React wie, co wyświetlić na ekranie.
132
129
133
-
If you need to catch an error inside event handler, use the regular JavaScript `try` / `catch` statement:
130
+
Aby obsłużyć błąd w procedurze obsługi zdarzenia, należy użyć javascriptowego `try` / `catch`:
134
131
135
132
```js{9-13,17-20}
136
133
class MyComponent extends React.Component {
@@ -142,7 +139,7 @@ class MyComponent extends React.Component {
142
139
143
140
handleClick() {
144
141
try {
145
-
// Do something that could throw
142
+
// Kod, który rzuci wyjątek
146
143
} catch (error) {
147
144
this.setState({ error });
148
145
}
@@ -157,10 +154,10 @@ class MyComponent extends React.Component {
157
154
}
158
155
```
159
156
160
-
Note that the above example is demonstrating regular JavaScript behavior and doesn't use error boundaries.
157
+
Powyższy przykład prezentuje normalne zachowanie JavaScriptu i nie używa granic błędów.
161
158
162
-
## Naming Changes from React 15 {#naming-changes-from-react-15}
159
+
## Zmiany nazewnictwa od Reacta w wersji 15 {#naming-changes-from-react-15}
163
160
164
-
React 15 included a very limited support for error boundaries under a different method name: `unstable_handleError`. This method no longer works, and you will need to change it to `componentDidCatch`in your code starting from the first 16 beta release.
161
+
React 15 zawierał bardzo okrojoną obsługę granic błędów za pomocą metody o nazwie `unstable_handleError`. Ta metoda nie jest już obsługiwana i należy zmienić jej nazwę na `componentDidCatch`począwszy od pierwszych beta wersji Reacta 16.
165
162
166
-
For this change, we’ve provided a[codemod](https://github.com/reactjs/react-codemod#error-boundaries) to automatically migrate your code.
163
+
Ze względu na tę zmianę stworzyliśmy[codemod](https://github.com/reactjs/react-codemod#error-boundaries), który automatycznie przekształci twój kod.
0 commit comments