Improve debugging info in useAtomsDevtools

[dai-shi]

Moved from pmndrs/jotai#931

Experimental PR: pmndrs/jotai#943

If we do something, it will be jotai, not only jotai-devtools, but this should be a good place for discussion.

[dai-shi]

This can be a hint: pmndrs/zustand#2061 (comment) by @AlexeevSasha

[Wendystraite]

I quite like Zedux's way of capturing the React component name without a stack trace.

Basically using React's internal API.

Snippet taken from https://github.com/Omnistac/zedux/blob/master/packages/react/src/hooks/useReactComponentId.ts :

const react19KeyBase = '_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE';
const clientKey = `__CLIENT${react19KeyBase}` as const;
const serverKey = `__SERVER${react19KeyBase}` as const;

export function useReactComponentId() {
  const component: MaybeComponent =
    ((React as React19)[clientKey] ?? (React as React19)[serverKey])?.A?.getOwner?.().type ??
    (React as React18).__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED?.ReactCurrentOwner?.current?.type;
  const name = component?.displayName || component?.name || 'unknown';
  const id = useId();
  return `${name}-${id}`;
}

Cons :

• It can break after any React update
• It doesn't give you the potential names of custom hooks, only the React component using them
• (as I can see) It must be called in the render function, not inside an useEffect, callback or whatever. This means that Jotai core must be changed in order to get the component's name.

[Wendystraite]

Good news, React 19.1 introduced captureOwnerStack : an API to retrieve the list of parent components.

I've been toying with it a bit and released an experimental API for jotai-logger today using both captureOwnerStack and React 19's internal method getOwner.

Instead of trying to parse error strack traces ourselves, this is much more stable.