fix: rename bottom stack frame

packages/react-client/src/ReactFlightClient.js

@@ -2947,7 +2947,7 @@ function buildFakeTask(
 }
 
 const createFakeJSXCallStack = {
-  'react-stack-bottom-frame': function (
+  react_stack_bottom_frame: function (
     response: Response,
     stack: ReactStackTrace,
     environmentName: string,
@@ -2969,7 +2969,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);
@@ -3083,7 +3083,7 @@ function getCurrentStackInDEV(): string {
 }
 
 const replayConsoleWithCallStack = {
-  'react-stack-bottom-frame': function (
+  react_stack_bottom_frame: function (
     response: Response,
     methodName: string,
     stackTrace: ReactStackTrace,
@@ -3135,7 +3135,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

@@ -19,7 +19,7 @@ import {captureCommitPhaseError} from './ReactFiberWorkLoop';
 // 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,
@@ -41,7 +41,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> {
@@ -57,7 +57,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 {
@@ -72,11 +72,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 {
@@ -93,13 +93,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,
@@ -122,13 +122,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 {
@@ -145,13 +145,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>,
@@ -170,13 +170,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 {
     const create = effect.create;
@@ -189,11 +189,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,
@@ -212,11 +212,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);
@@ -225,5 +225,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

@@ -59,7 +59,7 @@ function collectStackTrace(
   for (let i = framesToSkip; i < structuredStackTrace.length; i++) {
     const callSite = structuredStackTrace[i];
     let name = callSite.getFunctionName() || '<anonymous>';
-    if (name === 'react-stack-bottom-frame') {
+    if (name.includes('react_stack_bottom_frame')) {
       // Skip everything after the bottom frame since it'll be internals.
       break;
     } else if (callSite.isNative()) {
@@ -174,7 +174,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);
   }