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, and onUncaughtError)

If no Owner Stack is available, null is returned (see ).

Caveats

  • Owner Stacks are only available in development. captureOwnerStack will always return null outside of development.
Deep Dive

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.