captureOwnerStack

const stack = captureOwnerStack();

• Reference
  • captureOwnerStack()
• Usage
  • Enhance a custom error overlay
• Troubleshooting
  • The Owner Stack is null
  • captureOwnerStack is not available

Reference

captureOwnerStack()

Call captureOwnerStack to get the current Owner Stack.

import * as React from 'react';

function Component() {
  if (process.env.NODE_ENV !== 'production') {
    const ownerStack = React.captureOwnerStack();
    console.log(ownerStack);
  }
}

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 (React Root options onCaughtError, onRecoverableError, and onUncaughtError)

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

Caveats

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

at SubComponent
at fieldset
at Component
at main
at React.Suspense
at App

at Component

Usage

Enhance a custom error overlay

import { captureOwnerStack } from "react";
import { instrumentedConsoleError } from "./errorOverlay";

const originalConsoleError = console.error;
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.
    consoleMessage: args[0],
    ownerStack,
  });
};

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.

// Don't use named imports of `captureOwnerStack` in files that are bundled for development and production.
import {captureOwnerStack} from 'react';
// Use a namespace import instead and access `captureOwnerStack` conditionally.
import * as React from 'react';

if (process.env.NODE_ENV !== 'production') {
  const ownerStack = React.captureOwnerStack();
  console.log('Owner Stack', ownerStack);
}