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
Вызовите `captureOwnerStack`, чтобы получить текущий стек владельца.
22
+
Вызовите `captureOwnerStack`, чтобы получить текущий стек владельцев.
24
23
25
24
```js {5,5}
26
25
import*asReactfrom'react';
@@ -37,27 +36,27 @@ function Component() {
37
36
38
37
`captureOwnerStack` не принимает никаких параметров.
39
38
40
-
#### Возвращаемое значение {/*returns*/}
39
+
#### Возвращает {/*returns*/}
41
40
42
41
`captureOwnerStack` возвращает `string | null`.
43
42
44
-
Стеки владельца доступны в:
43
+
Стеки владельцев доступны в:
45
44
- Рендере компонента
46
45
- Эффектах (например, `useEffect`)
47
46
- Обработчиках событий React (например, `<button onClick={...} />`)
48
-
- Обработчиках ошибок React ([Параметры React Root](/reference/react-dom/client/createRoot#parameters)`onCaughtError`, `onRecoverableError` и `onUncaughtError`)
47
+
- Обработчиках ошибок React ([параметры React Root](/reference/react-dom/client/createRoot#parameters)`onCaughtError`, `onRecoverableError` и `onUncaughtError`)
49
48
50
-
Если стек владельца недоступен, возвращается `null` (см. [Устранение неполадок: Стек владельца равен `null`](#the-owner-stack-is-null)).
49
+
Если стек владельцев недоступен, возвращается `null` (см. [Устранение неполадок: Стек владельцев равен `null`](#the-owner-stack-is-null)).
51
50
52
51
#### Ограничения {/*caveats*/}
53
52
54
-
- Стеки владельца доступны только в режиме разработки. `captureOwnerStack` всегда будет возвращать `null` вне режима разработки.
53
+
- Стеки владельцев доступны только в режиме разработки. `captureOwnerStack` всегда будет возвращать `null` вне режима разработки.
55
54
56
55
<DeepDive>
57
56
58
-
#### Стек владельца против стека компонентов {/*owner-stack-vs-component-stack*/}
57
+
#### Стек владельцев против стека компонентов {/*owner-stack-vs-component-stack*/}
59
58
60
-
Стек владельца отличается от стека компонентов, доступного в обработчиках ошибок React, таких как [`errorInfo.componentStack` в `onUncaughtError`](/reference/react-dom/client/hydrateRoot#show-a-dialog-for-uncaught-errors).
59
+
Стек владельцев отличается от стека компонентов, доступного в обработчиках ошибок React, таких как [`errorInfo.componentStack` в `onUncaughtError`](/reference/react-dom/client/hydrateRoot#show-a-dialog-for-uncaught-errors).
61
60
62
61
Рассмотрим следующий код:
63
62
@@ -106,10 +105,10 @@ import './styles.css';
106
105
createRoot(document.createElement('div'), {
107
106
onUncaughtError: (error, errorInfo) => {
108
107
// Стеки выводятся в лог вместо прямого отображения в UI, чтобы
109
-
// подчеркнуть, что браузеры применяют sourcemaps к выведенным стекам.
108
+
// подчеркнуть, что браузеры применяют sourcemaps к логгируемым стекам.
110
109
// Обратите внимание, что sourcemapping применяется только в реальной консоли браузера, а не
111
110
// в поддельной, отображаемой на этой странице.
112
-
// Нажмите "fork", чтобы иметь возможность просмотреть стек с примененным sourcemapping в реальной консоли.
111
+
// Нажмите "fork", чтобы иметь возможность просмотреть стек с применением sourcemap в реальной консоли.
113
112
console.log(errorInfo.componentStack);
114
113
console.log(captureOwnerStack());
115
114
},
@@ -148,17 +147,17 @@ at React.Suspense
148
147
at App
149
148
```
150
149
151
-
Однако стек владельца будет содержать только:
150
+
Однако стек владельцев будет содержать только:
152
151
153
152
```
154
153
at Component
155
154
```
156
155
157
-
Ни `App`, ни DOM-компоненты (например, `fieldset`) не считаются владельцами в этом стеке, поскольку они не участвовали в «создании» узла, содержащего `SubComponent`. `App` и DOM-компоненты только перенаправляли узел. `App` просто отрендерил узел `children`, в отличие от `Component`, который создал узел, содержащий `SubComponent`, через `<SubComponent />`.
156
+
Ни `App`, ни DOM-компоненты (например, `fieldset`) не считаются владельцами в этом стеке, поскольку они не способствовали "созданию" узла, содержащего `SubComponent`. `App` и DOM-компоненты только перенаправляли узел. `App` просто отрендерил узел `children`, в отличие от `Component`, который создал узел, содержащий `SubComponent`, через `<SubComponent />`.
158
157
159
158
Ни `Navigation`, ни `legend` вообще не присутствуют в стеке, поскольку они являются лишь соседями узла, содержащего `<SubComponent />`.
160
159
161
-
`SubComponent`опущен, потому что он уже является частью стека вызовов.
160
+
`SubComponent`пропущен, потому что он уже является частью стека вызовов.
162
161
163
162
</DeepDive>
164
163
@@ -183,7 +182,7 @@ console.error = function patchedConsoleError(...args) {
183
182
};
184
183
```
185
184
186
-
Если вы перехватываете вызовы <CodeStepstep={1}>`console.error`</CodeStep>, чтобы отобразить их в оверлее ошибок, вы можете вызвать <CodeStepstep={2}>`captureOwnerStack`</CodeStep>, чтобы включить стек владельца.
185
+
Если вы перехватываете вызовы <CodeStepstep={1}>`console.error`</CodeStep>, чтобы выделить их в оверлее ошибок, вы можете вызвать <CodeStepstep={2}>`captureOwnerStack`</CodeStep>, чтобы включить стек владельцев.
187
186
188
187
<Sandpack>
189
188
@@ -269,25 +268,25 @@ pre.nowrap {
269
268
</head>
270
269
<body>
271
270
<!--
272
-
Error dialog in raw HTML
273
-
since an error in the React app may crash.
271
+
Диалог ошибок в сыром HTML,
272
+
поскольку ошибка в приложении React может привести к сбою.
Вызов `captureOwnerStack` произошел вне функции, управляемой React, например, в колбэке `setTimeout`, после вызова `fetch` или в пользовательском обработчике событий DOM. Во время рендеринга, эффектов, обработчиков событий React и обработчиков ошибок React (например, `hydrateRoot#options.onCaughtError`) стеки владельца должны быть доступны.
353
+
Вызов `captureOwnerStack` произошел вне функции, управляемой React, например, в колбэке `setTimeout`, после вызова `fetch` или в пользовательском обработчике событий DOM. Во время рендеринга, эффектов, обработчиков событий React и обработчиков ошибок React (например, `hydrateRoot#options.onCaughtError`) стеки владельцев должны быть доступны.
355
354
356
-
В приведенном ниже примере нажатие на кнопку приведет к выводу пустого стека владельца, поскольку `captureOwnerStack` был вызван во время пользовательского обработчика событий DOM. Стек владельца должен быть захвачен раньше, например, путем перемещения вызова `captureOwnerStack` в тело эффекта.
355
+
В приведенном ниже примере нажатие на кнопку приведет к выводу пустого стека владельцев, поскольку `captureOwnerStack` был вызван во время пользовательского обработчика событий DOM. Стек владельцев должен быть захвачен раньше, например, путем перемещения вызова `captureOwnerStack` в тело эффекта.
357
356
<Sandpack>
358
357
359
358
```js
@@ -363,8 +362,8 @@ export default function App() {
363
362
useEffect(() => {
364
363
// Следует вызвать `captureOwnerStack` здесь.
365
364
functionhandleEvent() {
366
-
// Вызов в пользовательском обработчике событий DOM — это слишком поздно.
367
-
// Стек владельца в этот момент будет равен `null`.
365
+
// Вызов в пользовательском обработчике событий DOM слишком поздний.
366
+
// Стек владельцев к этому моменту будет равен `null`.
`captureOwnerStack` экспортируется только в сборках для разработки. В продакшен-сборках он будет `undefined`. Если `captureOwnerStack` используется в файлах, которые собираются как для продакшена, так и для разработки, следует получать к нему доступ условно из импорта пространства имен.
385
+
`captureOwnerStack` экспортируется только в сборках для разработки. В продакшен-сборках он будет равен `undefined`. Если `captureOwnerStack` используется в файлах, которые собираются как для продакшена, так и для разработки, следует получать к нему доступ условно из импорта пространства имен.
387
386
388
387
```js
389
388
// Не используйте именованные импорты `captureOwnerStack` в файлах, которые собираются для разработки и продакшена.
0 commit comments