fix: rename bottom stack frame (#33680)

`react-stack-bottom-frame` -> `react_stack_bottom_frame`.

This survives `@babel/plugin-transform-function-name`, but now frames
will be displayed as `at Object.react_stack_bottom_frame (...)` in V8.
Checks that were relying on exact function name match were updated to
use either `.indexOf()` or `.includes()`

For backwards compatibility, both React DevTools and Flight Client will
look for both options. I am not so sure about the latter and if React
version is locked.

Author: hoxyq

packages/react-client/src/ReactFlightClient.js

@@ -2438,7 +2438,7 @@ function buildFakeTask(
 }
 
 const createFakeJSXCallStack = {
-  'react-stack-bottom-frame': function (
+  react_stack_bottom_frame: function (
     response: Response,
     stack: ReactStackTrace,
     environmentName: string,
@@ -2459,7 +2459,7 @@ const createFakeJSXCallStackInDEV: (
   environmentName: string,
 ) => Error = __DEV__
   ? // We use this technique to trick minifiers to preserve the function name.
-    (createFakeJSXCallStack['react-stack-bottom-frame'].bind(
+    (createFakeJSXCallStack.react_stack_bottom_frame.bind(
       createFakeJSXCallStack,
     ): any)
   : (null: any);
@@ -2563,7 +2563,7 @@ function getCurrentStackInDEV(): string {
 }
 
 const replayConsoleWithCallStack = {
-  'react-stack-bottom-frame': function (
+  react_stack_bottom_frame: function (
     response: Response,
     methodName: string,
     stackTrace: ReactStackTrace,
@@ -2614,7 +2614,7 @@ const replayConsoleWithCallStackInDEV: (
   args: Array<mixed>,
 ) => void = __DEV__
   ? // We use this technique to trick minifiers to preserve the function name.
-    (replayConsoleWithCallStack['react-stack-bottom-frame'].bind(
+    (replayConsoleWithCallStack.react_stack_bottom_frame.bind(
       replayConsoleWithCallStack,
     ): any)
   : (null: any);

packages/react-devtools-shared/src/backend/shared/DevToolsOwnerStack.js

@@ -29,7 +29,10 @@ export function formatOwnerStackString(stack: string): string {
     // Pop the JSX frame.
     stack = stack.slice(idx + 1);
   }
-  idx = stack.indexOf('react-stack-bottom-frame');
+  idx = stack.indexOf('react_stack_bottom_frame');
+  if (idx === -1) {
+    idx = stack.indexOf('react-stack-bottom-frame');
+  }
   if (idx !== -1) {
     idx = stack.lastIndexOf('\n', idx);
   }

packages/react-devtools-shared/src/backend/utils/index.js

@@ -358,7 +358,11 @@ function collectStackTrace(
   // We mirror how V8 serializes stack frames and how we later parse them.
   for (let i = 0; i < structuredStackTrace.length; i++) {
     const callSite = structuredStackTrace[i];
-    if (callSite.getFunctionName() === 'react-stack-bottom-frame') {
+    const name = callSite.getFunctionName();
+    if (
+      name.includes('react_stack_bottom_frame') ||
+      name.includes('react-stack-bottom-frame')
+    ) {
       // We pick the last frame that matches before the bottom frame since
       // that will be immediately inside the component as opposed to some helper.
       // If we don't find a bottom frame then we bail to string parsing.

packages/react-reconciler/src/ReactFiberCallUserSpace.js

@@ -24,7 +24,7 @@ import {enableUseEffectCRUDOverload} from 'shared/ReactFeatureFlags';
 // TODO: Consider marking the whole bundle instead of these boundaries.
 
 const callComponent = {
-  'react-stack-bottom-frame': function <Props, Arg, R>(
+  react_stack_bottom_frame: function <Props, Arg, R>(
     Component: (p: Props, arg: Arg) => R,
     props: Props,
     secondArg: Arg,
@@ -46,7 +46,7 @@ export const callComponentInDEV: <Props, Arg, R>(
   secondArg: Arg,
 ) => R = __DEV__
   ? // We use this technique to trick minifiers to preserve the function name.
-    (callComponent['react-stack-bottom-frame'].bind(callComponent): any)
+    (callComponent.react_stack_bottom_frame.bind(callComponent): any)
   : (null: any);
 
 interface ClassInstance<R> {
@@ -62,7 +62,7 @@ interface ClassInstance<R> {
 }
 
 const callRender = {
-  'react-stack-bottom-frame': function <R>(instance: ClassInstance<R>): R {
+  react_stack_bottom_frame: function <R>(instance: ClassInstance<R>): R {
     const wasRendering = isRendering;
     setIsRendering(true);
     try {
@@ -77,11 +77,11 @@ const callRender = {
 export const callRenderInDEV: <R>(instance: ClassInstance<R>) => R => R =
   __DEV__
     ? // We use this technique to trick minifiers to preserve the function name.
-      (callRender['react-stack-bottom-frame'].bind(callRender): any)
+      (callRender.react_stack_bottom_frame.bind(callRender): any)
     : (null: any);
 
 const callComponentDidMount = {
-  'react-stack-bottom-frame': function (
+  react_stack_bottom_frame: function (
     finishedWork: Fiber,
     instance: ClassInstance<any>,
   ): void {
@@ -98,13 +98,13 @@ export const callComponentDidMountInDEV: (
   instance: ClassInstance<any>,
 ) => void = __DEV__
   ? // We use this technique to trick minifiers to preserve the function name.
-    (callComponentDidMount['react-stack-bottom-frame'].bind(
+    (callComponentDidMount.react_stack_bottom_frame.bind(
       callComponentDidMount,
     ): any)
   : (null: any);
 
 const callComponentDidUpdate = {
-  'react-stack-bottom-frame': function (
+  react_stack_bottom_frame: function (
     finishedWork: Fiber,
     instance: ClassInstance<any>,
     prevProps: Object,
@@ -127,13 +127,13 @@ export const callComponentDidUpdateInDEV: (
   snaphot: Object,
 ) => void = __DEV__
   ? // We use this technique to trick minifiers to preserve the function name.
-    (callComponentDidUpdate['react-stack-bottom-frame'].bind(
+    (callComponentDidUpdate.react_stack_bottom_frame.bind(
       callComponentDidUpdate,
     ): any)
   : (null: any);
 
 const callComponentDidCatch = {
-  'react-stack-bottom-frame': function (
+  react_stack_bottom_frame: function (
     instance: ClassInstance<any>,
     errorInfo: CapturedValue<mixed>,
   ): void {
@@ -150,13 +150,13 @@ export const callComponentDidCatchInDEV: (
   errorInfo: CapturedValue<mixed>,
 ) => void = __DEV__
   ? // We use this technique to trick minifiers to preserve the function name.
-    (callComponentDidCatch['react-stack-bottom-frame'].bind(
+    (callComponentDidCatch.react_stack_bottom_frame.bind(
       callComponentDidCatch,
     ): any)
   : (null: any);
 
 const callComponentWillUnmount = {
-  'react-stack-bottom-frame': function (
+  react_stack_bottom_frame: function (
     current: Fiber,
     nearestMountedAncestor: Fiber | null,
     instance: ClassInstance<any>,
@@ -175,13 +175,13 @@ export const callComponentWillUnmountInDEV: (
   instance: ClassInstance<any>,
 ) => void = __DEV__
   ? // We use this technique to trick minifiers to preserve the function name.
-    (callComponentWillUnmount['react-stack-bottom-frame'].bind(
+    (callComponentWillUnmount.react_stack_bottom_frame.bind(
       callComponentWillUnmount,
     ): any)
   : (null: any);
 
 const callCreate = {
-  'react-stack-bottom-frame': function (
+  react_stack_bottom_frame: function (
     effect: Effect,
   ): (() => void) | {...} | void | null {
     if (!enableUseEffectCRUDOverload) {
@@ -234,11 +234,11 @@ const callCreate = {
 
 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)
+    (callCreate.react_stack_bottom_frame.bind(callCreate): any)
   : (null: any);
 
 const callDestroy = {
-  'react-stack-bottom-frame': function (
+  react_stack_bottom_frame: function (
     current: Fiber,
     nearestMountedAncestor: Fiber | null,
     destroy: () => void,
@@ -257,11 +257,11 @@ export const callDestroyInDEV: (
   destroy: (() => void) | (({...}) => void),
 ) => void = __DEV__
   ? // We use this technique to trick minifiers to preserve the function name.
-    (callDestroy['react-stack-bottom-frame'].bind(callDestroy): any)
+    (callDestroy.react_stack_bottom_frame.bind(callDestroy): any)
   : (null: any);
 
 const callLazyInit = {
-  'react-stack-bottom-frame': function (lazy: LazyComponent<any, any>): any {
+  react_stack_bottom_frame: function (lazy: LazyComponent<any, any>): any {
     const payload = lazy._payload;
     const init = lazy._init;
     return init(payload);
@@ -270,5 +270,5 @@ const callLazyInit = {
 
 export const callLazyInitInDEV: (lazy: LazyComponent<any, any>) => any = __DEV__
   ? // We use this technique to trick minifiers to preserve the function name.
-    (callLazyInit['react-stack-bottom-frame'].bind(callLazyInit): any)
+    (callLazyInit.react_stack_bottom_frame.bind(callLazyInit): any)
   : (null: any);

packages/react-server/src/ReactFizzCallUserSpace.js

@@ -13,7 +13,7 @@ import type {LazyComponent} from 'react/src/ReactLazy';
 // TODO: Consider marking the whole bundle instead of these boundaries.
 
 const callComponent = {
-  'react-stack-bottom-frame': function <Props, Arg, R>(
+  react_stack_bottom_frame: function <Props, Arg, R>(
     Component: (p: Props, arg: Arg) => R,
     props: Props,
     secondArg: Arg,
@@ -28,27 +28,27 @@ export const callComponentInDEV: <Props, Arg, R>(
   secondArg: Arg,
 ) => R = __DEV__
   ? // We use this technique to trick minifiers to preserve the function name.
-    (callComponent['react-stack-bottom-frame'].bind(callComponent): any)
+    (callComponent.react_stack_bottom_frame.bind(callComponent): any)
   : (null: any);
 
 interface ClassInstance<R> {
   render(): R;
 }
 
 const callRender = {
-  'react-stack-bottom-frame': function <R>(instance: ClassInstance<R>): R {
+  react_stack_bottom_frame: function <R>(instance: ClassInstance<R>): R {
     return instance.render();
   },
 };
 
 export const callRenderInDEV: <R>(instance: ClassInstance<R>) => R => R =
   __DEV__
     ? // We use this technique to trick minifiers to preserve the function name.
-      (callRender['react-stack-bottom-frame'].bind(callRender): any)
+      (callRender.react_stack_bottom_frame.bind(callRender): any)
     : (null: any);
 
 const callLazyInit = {
-  'react-stack-bottom-frame': function (lazy: LazyComponent<any, any>): any {
+  react_stack_bottom_frame: function (lazy: LazyComponent<any, any>): any {
     const payload = lazy._payload;
     const init = lazy._init;
     return init(payload);
@@ -57,5 +57,5 @@ const callLazyInit = {
 
 export const callLazyInitInDEV: (lazy: LazyComponent<any, any>) => any = __DEV__
   ? // We use this technique to trick minifiers to preserve the function name.
-    (callLazyInit['react-stack-bottom-frame'].bind(callLazyInit): any)
+    (callLazyInit.react_stack_bottom_frame.bind(callLazyInit): any)
   : (null: any);

packages/react-server/src/ReactFlightCallUserSpace.js

@@ -19,7 +19,7 @@ import {setCurrentOwner} from './flight/ReactFlightCurrentOwner';
 // TODO: Consider marking the whole bundle instead of these boundaries.
 
 const callComponent = {
-  'react-stack-bottom-frame': function <Props, R>(
+  react_stack_bottom_frame: function <Props, R>(
     Component: (p: Props, arg: void) => R,
     props: Props,
     componentDebugInfo: ReactComponentInfo,
@@ -41,11 +41,11 @@ export const callComponentInDEV: <Props, R>(
   componentDebugInfo: ReactComponentInfo,
 ) => R = __DEV__
   ? // We use this technique to trick minifiers to preserve the function name.
-    (callComponent['react-stack-bottom-frame'].bind(callComponent): any)
+    (callComponent.react_stack_bottom_frame.bind(callComponent): any)
   : (null: any);
 
 const callLazyInit = {
-  'react-stack-bottom-frame': function (lazy: LazyComponent<any, any>): any {
+  react_stack_bottom_frame: function (lazy: LazyComponent<any, any>): any {
     const payload = lazy._payload;
     const init = lazy._init;
     return init(payload);
@@ -54,11 +54,11 @@ const callLazyInit = {
 
 export const callLazyInitInDEV: (lazy: LazyComponent<any, any>) => any = __DEV__
   ? // We use this technique to trick minifiers to preserve the function name.
-    (callLazyInit['react-stack-bottom-frame'].bind(callLazyInit): any)
+    (callLazyInit.react_stack_bottom_frame.bind(callLazyInit): any)
   : (null: any);
 
 const callIterator = {
-  'react-stack-bottom-frame': function (
+  react_stack_bottom_frame: function (
     iterator: $AsyncIterator<ReactClientValue, ReactClientValue, void>,
     progress: (
       entry:
@@ -81,5 +81,5 @@ export const callIteratorInDEV: (
   error: (reason: mixed) => void,
 ) => void = __DEV__
   ? // We use this technique to trick minifiers to preserve the function name.
-    (callIterator['react-stack-bottom-frame'].bind(callIterator): any)
+    (callIterator.react_stack_bottom_frame.bind(callIterator): any)
   : (null: any);

packages/react-server/src/ReactFlightStackConfigV8.js

@@ -45,7 +45,7 @@ export function parseStackTrace(
     // don't want/need.
     stack = stack.slice(29);
   }
-  let idx = stack.indexOf('react-stack-bottom-frame');
+  let idx = stack.indexOf('react_stack_bottom_frame');
   if (idx !== -1) {
     idx = stack.lastIndexOf('\n', idx);
   }

packages/react/src/jsx/ReactJSXElement.js

@@ -66,7 +66,7 @@ function UnknownOwner() {
   return (() => Error('react-stack-top-frame'))();
 }
 const createFakeCallStack = {
-  'react-stack-bottom-frame': function (callStackForError) {
+  react_stack_bottom_frame: function (callStackForError) {
     return callStackForError();
   },
 };
@@ -81,7 +81,7 @@ if (__DEV__) {
   didWarnAboutElementRef = {};
 
   // We use this technique to trick minifiers to preserve the function name.
-  unknownOwnerDebugStack = createFakeCallStack['react-stack-bottom-frame'].bind(
+  unknownOwnerDebugStack = createFakeCallStack.react_stack_bottom_frame.bind(
     createFakeCallStack,
     UnknownOwner,
   )();

packages/shared/ReactOwnerStackFrames.js

@@ -24,7 +24,7 @@ export function formatOwnerStack(error: Error): string {
     // Pop the JSX frame.
     stack = stack.slice(idx + 1);
   }
-  idx = stack.indexOf('react-stack-bottom-frame');
+  idx = stack.indexOf('react_stack_bottom_frame');
   if (idx !== -1) {
     idx = stack.lastIndexOf('\n', idx);
   }