Adds displayName to EventComponent and EventTarget

packages/react-dom/src/events/__tests__/DOMEventResponderSystem-test.internal.js

@@ -21,6 +21,7 @@ function createReactEventComponent(targetEventTypes, handleEvent) {
 
   return {
     $$typeof: Symbol.for('react.event_component'),
+    displayName: 'TestEventComponent',
     props: null,
     responder: testEventResponder,
   };

packages/react-events/src/Drag.js

@@ -182,6 +182,7 @@ const DragResponder = {
 
 export default {
   $$typeof: REACT_EVENT_COMPONENT_TYPE,
+  displayName: 'Drag',
   props: null,
   responder: DragResponder,
 };

packages/react-events/src/Focus.js

@@ -96,6 +96,7 @@ const FocusResponder = {
 
 export default {
   $$typeof: REACT_EVENT_COMPONENT_TYPE,
+  displayName: 'Focus',
   props: null,
   responder: FocusResponder,
 };

packages/react-events/src/Hover.js

@@ -174,6 +174,7 @@ const HoverResponder = {
 
 export default {
   $$typeof: REACT_EVENT_COMPONENT_TYPE,
+  displayName: 'Hover',
   props: null,
   responder: HoverResponder,
 };

packages/react-events/src/Press.js

@@ -373,6 +373,7 @@ const PressResponder = {
 
 export default {
   $$typeof: REACT_EVENT_COMPONENT_TYPE,
+  displayName: 'Press',
   props: null,
   responder: PressResponder,
 };

packages/react-events/src/Swipe.js

@@ -212,6 +212,7 @@ const SwipeResponder = {
 
 export default {
   $$typeof: REACT_EVENT_COMPONENT_TYPE,
+  displayName: 'Swipe',
   props: null,
   responder: SwipeResponder,
 };

packages/react-events/src/__tests__/Press-test.internal.js

@@ -392,4 +392,8 @@ describe('Event responder: Press', () => {
       expect(events).toEqual(['keydown', 'inner: onPress']);
     });
   });
+
+  it('expect displayName to show up for event component', () => {
+    expect(Press.displayName).toBe('Press');
+  });
 });

packages/react-reconciler/src/__tests__/ReactFiberEvents-test-internal.js

@@ -29,6 +29,7 @@ const noOpResponder = {
 function createReactEventComponent() {
   return {
     $$typeof: ReactSymbols.REACT_EVENT_COMPONENT_TYPE,
+    displayName: 'TestEventComponent',
     props: null,
     responder: noOpResponder,
   };
@@ -37,6 +38,7 @@ function createReactEventComponent() {
 function createReactEventTarget() {
   return {
     $$typeof: ReactSymbols.REACT_EVENT_TARGET_TYPE,
+    displayName: 'TestEventTarget',
     type: Symbol.for('react.event_target.test'),
   };
 }
@@ -392,6 +394,54 @@ describe('ReactFiberEvents', () => {
         'Warning: validateDOMNesting: React event targets must not have event components as children.',
       );
     });
+
+    it('should error with a component stack contains the names of the event components and event targets', () => {
+      let componentStackMessage;
+
+      function ErrorComponent() {
+        throw new Error('Failed!');
+      }
+
+      const Test = () => (
+        <EventComponent>
+          <EventTarget>
+            <span>
+              <ErrorComponent />
+            </span>
+          </EventTarget>
+        </EventComponent>
+      );
+
+      class Wrapper extends React.Component {
+        state = {
+          error: null,
+        };
+
+        componentDidCatch(error, errMessage) {
+          componentStackMessage = errMessage.componentStack;
+          this.setState({
+            error,
+          });
+        }
+
+        render() {
+          if (this.state.error) {
+            return null;
+          }
+          return <Test />;
+        }
+      }
+
+      ReactNoop.render(<Wrapper />);
+      expect(Scheduler).toFlushWithoutYielding();
+
+      expect(componentStackMessage.includes('ErrorComponent')).toBe(true);
+      expect(componentStackMessage.includes('span')).toBe(true);
+      expect(componentStackMessage.includes('TestEventTarget')).toBe(true);
+      expect(componentStackMessage.includes('TestEventComponent')).toBe(true);
+      expect(componentStackMessage.includes('Test')).toBe(true);
+      expect(componentStackMessage.includes('Wrapper')).toBe(true);
+    });
   });
 
   describe('TestRenderer', () => {
@@ -570,7 +620,7 @@ describe('ReactFiberEvents', () => {
           error: null,
         };
 
-        componentDidCatch(error) {
+        componentDidCatch(error, errStack) {
           this.setState({
             error,
           });
@@ -734,6 +784,55 @@ describe('ReactFiberEvents', () => {
         'Warning: validateDOMNesting: React event targets must not have event components as children.',
       );
     });
+
+    it('should error with a component stack contains the names of the event components and event targets', () => {
+      let componentStackMessage;
+
+      function ErrorComponent() {
+        throw new Error('Failed!');
+      }
+
+      const Test = () => (
+        <EventComponent>
+          <EventTarget>
+            <span>
+              <ErrorComponent />
+            </span>
+          </EventTarget>
+        </EventComponent>
+      );
+
+      class Wrapper extends React.Component {
+        state = {
+          error: null,
+        };
+
+        componentDidCatch(error, errMessage) {
+          componentStackMessage = errMessage.componentStack;
+          this.setState({
+            error,
+          });
+        }
+
+        render() {
+          if (this.state.error) {
+            return null;
+          }
+          return <Test />;
+        }
+      }
+
+      const root = ReactTestRenderer.create(null);
+      root.update(<Wrapper />);
+      expect(Scheduler).toFlushWithoutYielding();
+
+      expect(componentStackMessage.includes('ErrorComponent')).toBe(true);
+      expect(componentStackMessage.includes('span')).toBe(true);
+      expect(componentStackMessage.includes('TestEventTarget')).toBe(true);
+      expect(componentStackMessage.includes('TestEventComponent')).toBe(true);
+      expect(componentStackMessage.includes('Test')).toBe(true);
+      expect(componentStackMessage.includes('Wrapper')).toBe(true);
+    });
   });
 
   describe('ReactDOM', () => {
@@ -1053,6 +1152,54 @@ describe('ReactFiberEvents', () => {
         'Warning: validateDOMNesting: React event targets must not have event components as children.',
       );
     });
+
+    it('should error with a component stack contains the names of the event components and event targets', () => {
+      let componentStackMessage;
+
+      function ErrorComponent() {
+        throw new Error('Failed!');
+      }
+
+      const Test = () => (
+        <EventComponent>
+          <EventTarget>
+            <span>
+              <ErrorComponent />
+            </span>
+          </EventTarget>
+        </EventComponent>
+      );
+
+      class Wrapper extends React.Component {
+        state = {
+          error: null,
+        };
+
+        componentDidCatch(error, errMessage) {
+          componentStackMessage = errMessage.componentStack;
+          this.setState({
+            error,
+          });
+        }
+
+        render() {
+          if (this.state.error) {
+            return null;
+          }
+          return <Test />;
+        }
+      }
+
+      const container = document.createElement('div');
+      ReactDOM.render(<Wrapper />, container);
+
+      expect(componentStackMessage.includes('ErrorComponent')).toBe(true);
+      expect(componentStackMessage.includes('span')).toBe(true);
+      expect(componentStackMessage.includes('TestEventTarget')).toBe(true);
+      expect(componentStackMessage.includes('TestEventComponent')).toBe(true);
+      expect(componentStackMessage.includes('Test')).toBe(true);
+      expect(componentStackMessage.includes('Wrapper')).toBe(true);
+    });
   });
 
   describe('ReactDOMServer', () => {

packages/shared/ReactTypes.js

@@ -93,11 +93,13 @@ export type ReactEventResponder = {
 
 export type ReactEventComponent = {|
   $$typeof: Symbol | number,
+  displayName?: string,
   props: null | Object,
   responder: ReactEventResponder,
 |};
 
 export type ReactEventTarget = {|
   $$typeof: Symbol | number,
+  displayName?: string,
   type: Symbol | number,
 |};

packages/shared/getComponentName.js

@@ -22,8 +22,12 @@ import {
   REACT_STRICT_MODE_TYPE,
   REACT_SUSPENSE_TYPE,
   REACT_LAZY_TYPE,
+  REACT_EVENT_COMPONENT_TYPE,
+  REACT_EVENT_TARGET_TYPE,
+  REACT_EVENT_TARGET_TOUCH_HIT,
 } from 'shared/ReactSymbols';
 import {refineResolvedLazyComponent} from 'shared/ReactLazyComponent';
+import type {ReactEventComponent, ReactEventTarget} from 'shared/ReactTypes';
 
 function getWrappedName(
   outerType: mixed,
@@ -87,6 +91,25 @@ function getComponentName(type: mixed): string | null {
         if (resolvedThenable) {
           return getComponentName(resolvedThenable);
         }
+        break;
+      }
+      case REACT_EVENT_COMPONENT_TYPE: {
+        const eventComponent = ((type: any): ReactEventComponent);
+        const displayName = eventComponent.displayName;
+        if (displayName !== undefined) {
+          return displayName;
+        }
+        break;
+      }
+      case REACT_EVENT_TARGET_TYPE: {
+        const eventTarget = ((type: any): ReactEventTarget);
+        if (eventTarget.type === REACT_EVENT_TARGET_TOUCH_HIT) {
+          return 'TouchHitTarget';
+        }
+        const displayName = eventTarget.displayName;
+        if (displayName !== undefined) {
+          return displayName;
+        }
       }
     }
   }