[Fiber] Call life-cycles with a react-stack-bottom-frame stack frame

packages/react-devtools-shared/src/__tests__/console-test.js

@@ -254,12 +254,12 @@ describe('console', () => {
       </Intermediate>
     );
     const Child = ({children}) => {
-      React.useLayoutEffect(() => {
+      React.useLayoutEffect(function Child_useLayoutEffect() {
         fakeConsole.error('active error');
         fakeConsole.log('active log');
         fakeConsole.warn('active warn');
       });
-      React.useEffect(() => {
+      React.useEffect(function Child_useEffect() {
         fakeConsole.error('passive error');
         fakeConsole.log('passive log');
         fakeConsole.warn('passive warn');
@@ -279,30 +279,29 @@ describe('console', () => {
     expect(mockWarn.mock.calls[0][0]).toBe('active warn');
     expect(normalizeCodeLocInfo(mockWarn.mock.calls[0][1])).toEqual(
       supportsOwnerStacks
-        ? // TODO: It would be nice to have a Child stack frame here since it's just the effect function.
-          '\n    in Parent (at **)'
+        ? '\n    in Child_useLayoutEffect (at **)\n    in Parent (at **)'
         : '\n    in Child (at **)\n    in Intermediate (at **)\n    in Parent (at **)',
     );
     expect(mockWarn.mock.calls[1]).toHaveLength(2);
     expect(mockWarn.mock.calls[1][0]).toBe('passive warn');
     expect(normalizeCodeLocInfo(mockWarn.mock.calls[1][1])).toEqual(
       supportsOwnerStacks
-        ? '\n    in Parent (at **)'
+        ? '\n    in Child_useEffect (at **)\n    in Parent (at **)'
         : '\n    in Child (at **)\n    in Intermediate (at **)\n    in Parent (at **)',
     );
     expect(mockError).toHaveBeenCalledTimes(2);
     expect(mockError.mock.calls[0]).toHaveLength(2);
     expect(mockError.mock.calls[0][0]).toBe('active error');
     expect(normalizeCodeLocInfo(mockError.mock.calls[0][1])).toBe(
       supportsOwnerStacks
-        ? '\n    in Parent (at **)'
+        ? '\n    in Child_useLayoutEffect (at **)\n    in Parent (at **)'
         : '\n    in Child (at **)\n    in Intermediate (at **)\n    in Parent (at **)',
     );
     expect(mockError.mock.calls[1]).toHaveLength(2);
     expect(mockError.mock.calls[1][0]).toBe('passive error');
     expect(normalizeCodeLocInfo(mockError.mock.calls[1][1])).toBe(
       supportsOwnerStacks
-        ? '\n    in Parent (at **)'
+        ? '\n    in Child_useEffect (at **)\n    in Parent (at **)'
         : '\n    in Child (at **)\n    in Intermediate (at **)\n    in Parent (at **)',
     );
   });
@@ -346,29 +345,29 @@ describe('console', () => {
     expect(mockWarn.mock.calls[0][0]).toBe('didMount warn');
     expect(normalizeCodeLocInfo(mockWarn.mock.calls[0][1])).toEqual(
       supportsOwnerStacks
-        ? '\n    in Parent (at **)'
+        ? '\n    in Child.componentDidMount (at **)\n    in Parent (at **)'
         : '\n    in Child (at **)\n    in Intermediate (at **)\n    in Parent (at **)',
     );
     expect(mockWarn.mock.calls[1]).toHaveLength(2);
     expect(mockWarn.mock.calls[1][0]).toBe('didUpdate warn');
     expect(normalizeCodeLocInfo(mockWarn.mock.calls[1][1])).toEqual(
       supportsOwnerStacks
-        ? '\n    in Parent (at **)'
+        ? '\n    in Child.componentDidUpdate (at **)\n    in Parent (at **)'
         : '\n    in Child (at **)\n    in Intermediate (at **)\n    in Parent (at **)',
     );
     expect(mockError).toHaveBeenCalledTimes(2);
     expect(mockError.mock.calls[0]).toHaveLength(2);
     expect(mockError.mock.calls[0][0]).toBe('didMount error');
     expect(normalizeCodeLocInfo(mockError.mock.calls[0][1])).toBe(
       supportsOwnerStacks
-        ? '\n    in Parent (at **)'
+        ? '\n    in Child.componentDidMount (at **)\n    in Parent (at **)'
         : '\n    in Child (at **)\n    in Intermediate (at **)\n    in Parent (at **)',
     );
     expect(mockError.mock.calls[1]).toHaveLength(2);
     expect(mockError.mock.calls[1][0]).toBe('didUpdate error');
     expect(normalizeCodeLocInfo(mockError.mock.calls[1][1])).toBe(
       supportsOwnerStacks
-        ? '\n    in Parent (at **)'
+        ? '\n    in Child.componentDidUpdate (at **)\n    in Parent (at **)'
         : '\n    in Child (at **)\n    in Intermediate (at **)\n    in Parent (at **)',
     );
   });

packages/react-reconciler/src/ReactFiberCallUserSpace.js

@@ -7,9 +7,13 @@
  * @flow
  */
 
+import type {Fiber} from './ReactInternalTypes';
 import type {LazyComponent} from 'react/src/ReactLazy';
+import type {Effect} from './ReactFiberHooks';
+import type {CapturedValue} from './ReactCapturedValue';
 
 import {isRendering, setIsRendering} from './ReactCurrentFiber';
+import {captureCommitPhaseError} from './ReactFiberWorkLoop';
 
 // These indirections exists so we can exclude its stack frame in DEV (and anything below it).
 // TODO: Consider marking the whole bundle instead of these boundaries.
@@ -42,6 +46,14 @@ export const callComponentInDEV: <Props, Arg, R>(
 
 interface ClassInstance<R> {
   render(): R;
+  componentDidMount(): void;
+  componentDidUpdate(
+    prevProps: Object,
+    prevState: Object,
+    snaphot: Object,
+  ): void;
+  componentDidCatch(error: mixed, errorInfo: {componentStack: string}): void;
+  componentWillUnmount(): void;
 }
 
 const callRender = {
@@ -63,6 +75,144 @@ export const callRenderInDEV: <R>(instance: ClassInstance<R>) => R => R =
       (callRender['react-stack-bottom-frame'].bind(callRender): any)
     : (null: any);
 
+const callComponentDidMount = {
+  'react-stack-bottom-frame': function (
+    finishedWork: Fiber,
+    instance: ClassInstance<any>,
+  ): void {
+    try {
+      instance.componentDidMount();
+    } catch (error) {
+      captureCommitPhaseError(finishedWork, finishedWork.return, error);
+    }
+  },
+};
+
+export const callComponentDidMountInDEV: (
+  finishedWork: Fiber,
+  instance: ClassInstance<any>,
+) => void = __DEV__
+  ? // We use this technique to trick minifiers to preserve the function name.
+    (callComponentDidMount['react-stack-bottom-frame'].bind(
+      callComponentDidMount,
+    ): any)
+  : (null: any);
+
+const callComponentDidUpdate = {
+  'react-stack-bottom-frame': function (
+    finishedWork: Fiber,
+    instance: ClassInstance<any>,
+    prevProps: Object,
+    prevState: Object,
+    snapshot: Object,
+  ): void {
+    try {
+      instance.componentDidUpdate(prevProps, prevState, snapshot);
+    } catch (error) {
+      captureCommitPhaseError(finishedWork, finishedWork.return, error);
+    }
+  },
+};
+
+export const callComponentDidUpdateInDEV: (
+  finishedWork: Fiber,
+  instance: ClassInstance<any>,
+  prevProps: Object,
+  prevState: Object,
+  snaphot: Object,
+) => void = __DEV__
+  ? // We use this technique to trick minifiers to preserve the function name.
+    (callComponentDidUpdate['react-stack-bottom-frame'].bind(
+      callComponentDidUpdate,
+    ): any)
+  : (null: any);
+
+const callComponentDidCatch = {
+  'react-stack-bottom-frame': function (
+    instance: ClassInstance<any>,
+    errorInfo: CapturedValue<mixed>,
+  ): void {
+    const error = errorInfo.value;
+    const stack = errorInfo.stack;
+    instance.componentDidCatch(error, {
+      componentStack: stack !== null ? stack : '',
+    });
+  },
+};
+
+export const callComponentDidCatchInDEV: (
+  instance: ClassInstance<any>,
+  errorInfo: CapturedValue<mixed>,
+) => void = __DEV__
+  ? // We use this technique to trick minifiers to preserve the function name.
+    (callComponentDidCatch['react-stack-bottom-frame'].bind(
+      callComponentDidCatch,
+    ): any)
+  : (null: any);
+
+const callComponentWillUnmount = {
+  'react-stack-bottom-frame': function (
+    current: Fiber,
+    nearestMountedAncestor: Fiber | null,
+    instance: ClassInstance<any>,
+  ): void {
+    try {
+      instance.componentWillUnmount();
+    } catch (error) {
+      captureCommitPhaseError(current, nearestMountedAncestor, error);
+    }
+  },
+};
+
+export const callComponentWillUnmountInDEV: (
+  current: Fiber,
+  nearestMountedAncestor: Fiber | null,
+  instance: ClassInstance<any>,
+) => void = __DEV__
+  ? // We use this technique to trick minifiers to preserve the function name.
+    (callComponentWillUnmount['react-stack-bottom-frame'].bind(
+      callComponentWillUnmount,
+    ): any)
+  : (null: any);
+
+const callCreate = {
+  'react-stack-bottom-frame': function (effect: Effect): (() => void) | void {
+    const create = effect.create;
+    const inst = effect.inst;
+    const destroy = create();
+    inst.destroy = destroy;
+    return destroy;
+  },
+};
+
+export const callCreateInDEV: (effect: Effect) => (() => void) | void = __DEV__
+  ? // We use this technique to trick minifiers to preserve the function name.
+    (callCreate['react-stack-bottom-frame'].bind(callCreate): any)
+  : (null: any);
+
+const callDestroy = {
+  'react-stack-bottom-frame': function (
+    current: Fiber,
+    nearestMountedAncestor: Fiber | null,
+    destroy: () => void,
+  ): void {
+    try {
+      destroy();
+    } catch (error) {
+      captureCommitPhaseError(current, nearestMountedAncestor, error);
+    }
+  },
+};
+
+export const callDestroyInDEV: (
+  current: Fiber,
+  nearestMountedAncestor: Fiber | null,
+  destroy: () => void,
+) => void = __DEV__
+  ? // We use this technique to trick minifiers to preserve the function name.
+    (callDestroy['react-stack-bottom-frame'].bind(callDestroy): any)
+  : (null: any);
+
 const callLazyInit = {
   'react-stack-bottom-frame': function (lazy: LazyComponent<any, any>): any {
     const payload = lazy._payload;