[useButton] Capture component stack for nativeButton error message (#3861)

Author: atomiks

packages/react/src/toolbar/button/ToolbarButton.test.tsx

@@ -107,7 +107,9 @@ describe('<Toolbar.Button />', () => {
 
         expect(console.error).toHaveBeenCalledTimes(1);
         expect(console.error).toHaveBeenCalledWith(
-          'Base UI: A component that acts as a button was not rendered as a native <button>, which does not match the default. Ensure that the element passed to the `render` prop of the component is a real <button>, or set the `nativeButton` prop on the component to `false`.',
+          expect.stringContaining(
+            'Base UI: A component that acts as a button was not rendered as a native <button>, which does not match the default. Ensure that the element passed to the `render` prop of the component is a real <button>, or set the `nativeButton` prop on the component to `false`.',
+          ),
         );
 
         expect(screen.getByTestId('button')).to.equal(screen.getByRole('switch'));
@@ -131,7 +133,9 @@ describe('<Toolbar.Button />', () => {
 
         expect(console.error).toHaveBeenCalledTimes(1);
         expect(console.error).toHaveBeenCalledWith(
-          'Base UI: A component that acts as a button was not rendered as a native <button>, which does not match the default. Ensure that the element passed to the `render` prop of the component is a real <button>, or set the `nativeButton` prop on the component to `false`.',
+          expect.stringContaining(
+            'Base UI: A component that acts as a button was not rendered as a native <button>, which does not match the default. Ensure that the element passed to the `render` prop of the component is a real <button>, or set the `nativeButton` prop on the component to `false`.',
+          ),
         );
 
         const switchElement = screen.getByRole('switch');
@@ -175,7 +179,9 @@ describe('<Toolbar.Button />', () => {
 
         expect(console.error).toHaveBeenCalledTimes(1);
         expect(console.error).toHaveBeenCalledWith(
-          'Base UI: A component that acts as a button was not rendered as a native <button>, which does not match the default. Ensure that the element passed to the `render` prop of the component is a real <button>, or set the `nativeButton` prop on the component to `false`.',
+          expect.stringContaining(
+            'Base UI: A component that acts as a button was not rendered as a native <button>, which does not match the default. Ensure that the element passed to the `render` prop of the component is a real <button>, or set the `nativeButton` prop on the component to `false`.',
+          ),
         );
 
         const switchElement = screen.getByRole('switch');

packages/react/src/use-button/useButton.test.tsx

@@ -283,31 +283,31 @@ describe('useButton', () => {
         .spyOn(console, 'error')
         .mockName('console.error')
         .mockImplementation(() => {});
+      const message =
+        'Base UI: A component that acts as a button was not rendered as a native <button>, which does not match the default. Ensure that the element passed to the `render` prop of the component is a real <button>, or set the `nativeButton` prop on the component to `false`.';
       function TestButton() {
         const { getButtonProps, buttonRef } = useButton({ native: true });
         return <span {...getButtonProps()} ref={buttonRef} />;
       }
       await render(<TestButton />);
       expect(errorSpy).toHaveBeenCalledTimes(1);
-      expect(errorSpy).toHaveBeenCalledWith(
-        'Base UI: A component that acts as a button was not rendered as a native <button>, which does not match the default. Ensure that the element passed to the `render` prop of the component is a real <button>, or set the `nativeButton` prop on the component to `false`.',
-      );
+      expect(errorSpy).toHaveBeenCalledWith(expect.stringContaining(message));
     });
 
     it('errors if nativeButton=false but ref is a button', async () => {
       const errorSpy = vi
         .spyOn(console, 'error')
         .mockName('console.error')
         .mockImplementation(() => {});
+      const message =
+        'Base UI: A component that acts as a button was rendered as a native <button>, which does not match the default. Ensure that the element passed to the `render` prop of the component is not a real <button>, or set the `nativeButton` prop on the component to `true`.';
       function TestButton() {
         const { getButtonProps, buttonRef } = useButton({ native: false });
         return <button {...getButtonProps()} ref={buttonRef} />;
       }
       await render(<TestButton />);
       expect(errorSpy).toHaveBeenCalledTimes(1);
-      expect(errorSpy).toHaveBeenCalledWith(
-        'Base UI: A component that acts as a button was rendered as a native <button>, which does not match the default. Ensure that the element passed to the `render` prop of the component is not a real <button>, or set the `nativeButton` prop on the component to `true`.',
-      );
+      expect(errorSpy).toHaveBeenCalledWith(expect.stringContaining(message));
     });
   });
 });

packages/react/src/use-button/useButton.ts

@@ -4,6 +4,7 @@ import { isHTMLElement } from '@floating-ui/utils/dom';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { error } from '@base-ui/utils/error';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
+import { SafeReact } from '@base-ui/utils/safeReact';
 import { makeEventPreventable, mergeProps } from '../merge-props';
 import { useCompositeRootContext } from '../composite/root/CompositeRootContext';
 import { BaseUIEvent, HTMLProps } from '../utils/types';
@@ -45,13 +46,15 @@ export function useButton(parameters: useButton.Parameters = {}): useButton.Retu
 
       if (isNativeButton) {
         if (!isButtonTag) {
+          const ownerStackMessage = SafeReact.captureOwnerStack?.() || '';
           error(
-            'A component that acts as a button was not rendered as a native <button>, which does not match the default. Ensure that the element passed to the `render` prop of the component is a real <button>, or set the `nativeButton` prop on the component to `false`.',
+            `A component that acts as a button was not rendered as a native <button>, which does not match the default. Ensure that the element passed to the \`render\` prop of the component is a real <button>, or set the \`nativeButton\` prop on the component to \`false\`.${ownerStackMessage}`,
           );
         }
       } else if (isButtonTag) {
+        const ownerStackMessage = SafeReact.captureOwnerStack?.() || '';
         error(
-          'A component that acts as a button was rendered as a native <button>, which does not match the default. Ensure that the element passed to the `render` prop of the component is not a real <button>, or set the `nativeButton` prop on the component to `true`.',
+          `A component that acts as a button was rendered as a native <button>, which does not match the default. Ensure that the element passed to the \`render\` prop of the component is not a real <button>, or set the \`nativeButton\` prop on the component to \`true\`.${ownerStackMessage}`,
         );
       }
     }, [isNativeButton]);