Call life-cycles with a react-stack-bottom-frame stack frame

sebmarkbage · sebmarkbage · commit 3d211de5f5fd · 2024-07-23T00:08:57.000-04:00
Most hooks and such are called inside renders which already have these on
the stack but life-cycles that call out on them are useful to cut off too.

Typically we don't create JSX in here so they wouldn't be part of owner
stacks anyway but they can be apart of plain stacks such as the ones
prefixes to console logs or printed by error dialogs.
diff --git a/packages/react-devtools-shared/src/__tests__/console-test.js b/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 **)',
     );
   });
diff --git a/packages/react-reconciler/src/ReactFiberCallUserSpace.js b/packages/react-reconciler/src/ReactFiberCallUserSpace.js
@@ -7,9 +7,12 @@
  * @flow
  */
 
+import type {Fiber} from './ReactInternalTypes';
 import type {LazyComponent} from 'react/src/ReactLazy';
+import type {Effect} from './ReactFiberHooks';
 
 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 +45,13 @@ export const callComponentInDEV: <Props, Arg, R>(
 
 interface ClassInstance<R> {
   render(): R;
+  componentDidMount(): void;
+  componentDidUpdate(
+    prevProps: Object,
+    prevState: Object,
+    snaphot: Object,
+  ): void;
+  componentWillUnmount(): void;
 }
 
 const callRender = {
@@ -63,6 +73,119 @@ 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 callComponentWillUnmount = {
+  'react-stack-bottom-frame': function (
+    current: Fiber,
+    instance: ClassInstance<any>,
+  ): void {
+    try {
+      instance.componentWillUnmount();
+    } catch (error) {
+      captureCommitPhaseError(current, current.return, error);
+    }
+  },
+};
+
+export const callComponentWillUnmountInDEV: (
+  current: Fiber,
+  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;
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.js b/packages/react-reconciler/src/ReactFiberCommitWork.js
