diff --git a/src/content/reference/react/captureOwnerStack.md b/src/content/reference/react/captureOwnerStack.md index 6d8cc502d5..2ada8d3f87 100644 --- a/src/content/reference/react/captureOwnerStack.md +++ b/src/content/reference/react/captureOwnerStack.md @@ -1,10 +1,9 @@ --- title: captureOwnerStack --- - -`captureOwnerStack` reads the current Owner Stack in development and returns it as a string if available. +`captureOwnerStack` считывает текущий стек владельцев (Owner Stack) в режиме разработки и возвращает его в виде строки, если он доступен. ```js const stack = captureOwnerStack(); @@ -16,11 +15,11 @@ const stack = captureOwnerStack(); --- -## Reference {/*reference*/} +## Справочник {/*reference*/} ### `captureOwnerStack()` {/*captureownerstack*/} -Call `captureOwnerStack` to get the current Owner Stack. +Вызовите `captureOwnerStack`, чтобы получить текущий стек владельцев. ```js {5,5} import * as React from 'react'; @@ -33,33 +32,33 @@ function Component() { } ``` -#### Parameters {/*parameters*/} +#### Параметры {/*parameters*/} -`captureOwnerStack` does not take any parameters. +`captureOwnerStack` не принимает никаких параметров. -#### Returns {/*returns*/} +#### Возвращает {/*returns*/} -`captureOwnerStack` returns `string | null`. +`captureOwnerStack` возвращает `string | null`. -Owner Stacks are available in -- Component render -- Effects (e.g. `useEffect`) -- React's event handlers (e.g. ` - +
@@ -301,13 +300,13 @@ export function onConsoleError({ consoleMessage, ownerStack }) { const errorBody = document.getElementById("error-body"); const errorOwnerStack = document.getElementById("error-owner-stack"); - // Display console.error() message + // Отображение сообщения console.error() errorBody.innerText = consoleMessage; - // Display owner stack + // Отображение стека владельцев errorOwnerStack.innerText = ownerStack; - // Show the dialog + // Показать диалог errorDialog.classList.remove("hidden"); } ``` @@ -324,8 +323,8 @@ console.error = function patchedConsoleError(...args) { originalConsoleError.apply(console, args); const ownerStack = captureOwnerStack(); onConsoleError({ - // Keep in mind that in a real application, console.error can be - // called with multiple arguments which you should account for. + // Имейте в виду, что в реальном приложении console.error может быть + // вызван с несколькими аргументами, которые следует учитывать. consoleMessage: args[0], ownerStack, }); @@ -347,13 +346,13 @@ export default function App() { -## Troubleshooting {/*troubleshooting*/} +## Устранение неполадок {/*troubleshooting*/} -### The Owner Stack is `null` {/*the-owner-stack-is-null*/} +### Стек владельцев равен `null` {/*the-owner-stack-is-null*/} -The call of `captureOwnerStack` happened outside of a React controlled function e.g. in a `setTimeout` callback, after a `fetch` call or in a custom DOM event handler. During render, Effects, React event handlers, and React error handlers (e.g. `hydrateRoot#options.onCaughtError`) Owner Stacks should be available. +Вызов `captureOwnerStack` произошел вне функции, управляемой React, например, в колбэке `setTimeout`, после вызова `fetch` или в пользовательском обработчике событий DOM. Во время рендеринга, эффектов, обработчиков событий React и обработчиков ошибок React (например, `hydrateRoot#options.onCaughtError`) стеки владельцев должны быть доступны. -In the example below, clicking the button will log an empty Owner Stack because `captureOwnerStack` was called during a custom DOM event handler. The Owner Stack must be captured earlier e.g. by moving the call of `captureOwnerStack` into the Effect body. +В приведенном ниже примере нажатие на кнопку приведет к выводу пустого стека владельцев, поскольку `captureOwnerStack` был вызван во время пользовательского обработчика событий DOM. Стек владельцев должен быть захвачен раньше, например, путем перемещения вызова `captureOwnerStack` в тело эффекта. ```js @@ -361,10 +360,10 @@ import {captureOwnerStack, useEffect} from 'react'; export default function App() { useEffect(() => { - // Should call `captureOwnerStack` here. + // Следует вызвать `captureOwnerStack` здесь. function handleEvent() { - // Calling it in a custom DOM event handler is too late. - // The Owner Stack will be `null` at this point. + // Вызов в пользовательском обработчике событий DOM слишком поздний. + // Стек владельцев к этому моменту будет равен `null`. console.log('Owner Stack: ', captureOwnerStack()); } @@ -375,24 +374,24 @@ export default function App() { } }) - return ; + return ; } ``` -### `captureOwnerStack` is not available {/*captureownerstack-is-not-available*/} +### `captureOwnerStack` недоступен {/*captureownerstack-is-not-available*/} -`captureOwnerStack` is only exported in development builds. It will be `undefined` in production builds. If `captureOwnerStack` is used in files that are bundled for production and development, you should conditionally access it from a namespace import. +`captureOwnerStack` экспортируется только в сборках для разработки. В продакшен-сборках он будет равен `undefined`. Если `captureOwnerStack` используется в файлах, которые собираются как для продакшена, так и для разработки, следует получать к нему доступ условно из импорта пространства имен. ```js -// Don't use named imports of `captureOwnerStack` in files that are bundled for development and production. +// Не используйте именованные импорты `captureOwnerStack` в файлах, которые собираются для разработки и продакшена. import {captureOwnerStack} from 'react'; -// Use a namespace import instead and access `captureOwnerStack` conditionally. +// Вместо этого используйте импорт пространства имен и обращайтесь к `captureOwnerStack` условно. import * as React from 'react'; if (process.env.NODE_ENV !== 'production') { const ownerStack = React.captureOwnerStack(); console.log('Owner Stack', ownerStack); } -``` +``` \ No newline at end of file