captureOwnerStack
Reference
captureOwnerStack()
Call captureOwnerStack
to get the current Owner Stack.
Parameters
captureOwnerStack
does not take any parameters.
Returns
captureOwnerStack
returns string | null
.
Owner Stacks are available in
- Component render
- Effects (e.g.
useEffect
) - React’s event handlers (e.g.
<button onClick={...} />
) - React error handlers (
onCaughtError
,onRecoverableError
, andonUncaughtError
)
If no Owner Stack is available, null
is returned (see ).
Caveats
- Owner Stacks are only available in development.
captureOwnerStack
will always returnnull
outside of development.
Deep Dive
Owner Stack vs Component Stack
Owner Stack vs Component Stack
The Owner Stack is different from the Component Stack available in React error handlers like .
For example, consider the following code:
SubComponent
would throw an error. The Component Stack of that error would be
However, the Owner Stack would only read
Neither App
nor the DOM components (e.g. fieldset
) are considered Owners in this Stack since they didn’t contribute to “creating” the node containing SubComponent
. App
and DOM components only forwarded the node. App
just rendered the children
node as opposed to Component
which created a node containing SubComponent
via <SubComponent />
.
Neither Navigation
nor legend
are in the stack at all since it’s only a sibling to a node containing <SubComponent />
.
SubComponent
is omitted because it’s already part of the callstack.
Usage
Enhance a custom error overlay
If you intercept console.error
calls to highlight them in an error overlay, you can call captureOwnerStack
to include the Owner Stack.
Troubleshooting
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.
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
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.