diff --git a/packages/react-client/src/ReactFlightClient.js b/packages/react-client/src/ReactFlightClient.js index 7d43db08c8ca2..d538e077abb1c 100644 --- a/packages/react-client/src/ReactFlightClient.js +++ b/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, ) => 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); diff --git a/packages/react-devtools-shared/src/backend/shared/DevToolsOwnerStack.js b/packages/react-devtools-shared/src/backend/shared/DevToolsOwnerStack.js index 7d4cfa65ce030..fdd7bce2f8d9e 100644 --- a/packages/react-devtools-shared/src/backend/shared/DevToolsOwnerStack.js +++ b/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); } diff --git a/packages/react-devtools-shared/src/backend/utils/index.js b/packages/react-devtools-shared/src/backend/utils/index.js index 950161a020b21..a8a2053204f22 100644 --- a/packages/react-devtools-shared/src/backend/utils/index.js +++ b/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. diff --git a/packages/react-reconciler/src/ReactFiberCallUserSpace.js b/packages/react-reconciler/src/ReactFiberCallUserSpace.js index b48933fe3c0dd..ce88814797c53 100644 --- a/packages/react-reconciler/src/ReactFiberCallUserSpace.js +++ b/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 ( + react_stack_bottom_frame: function ( Component: (p: Props, arg: Arg) => R, props: Props, secondArg: Arg, @@ -41,7 +41,7 @@ export const callComponentInDEV: ( 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 { @@ -57,7 +57,7 @@ interface ClassInstance { } const callRender = { - 'react-stack-bottom-frame': function (instance: ClassInstance): R { + react_stack_bottom_frame: function (instance: ClassInstance): R { const wasRendering = isRendering; setIsRendering(true); try { @@ -72,11 +72,11 @@ const callRender = { export const callRenderInDEV: (instance: ClassInstance) => 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, ): void { @@ -93,13 +93,13 @@ export const callComponentDidMountInDEV: ( instance: ClassInstance, ) => 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, 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, errorInfo: CapturedValue, ): void { @@ -145,13 +145,13 @@ export const callComponentDidCatchInDEV: ( errorInfo: CapturedValue, ) => 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, @@ -170,13 +170,13 @@ export const callComponentWillUnmountInDEV: ( instance: ClassInstance, ) => 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 { + react_stack_bottom_frame: function (lazy: LazyComponent): any { const payload = lazy._payload; const init = lazy._init; return init(payload); @@ -225,5 +225,5 @@ const callLazyInit = { export const callLazyInitInDEV: (lazy: LazyComponent) => 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); diff --git a/packages/react-server/src/ReactFizzCallUserSpace.js b/packages/react-server/src/ReactFizzCallUserSpace.js index 3995d6c2b2cde..d90a80ec0e849 100644 --- a/packages/react-server/src/ReactFizzCallUserSpace.js +++ b/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 ( + react_stack_bottom_frame: function ( Component: (p: Props, arg: Arg) => R, props: Props, secondArg: Arg, @@ -28,7 +28,7 @@ export const callComponentInDEV: ( 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 { @@ -36,7 +36,7 @@ interface ClassInstance { } const callRender = { - 'react-stack-bottom-frame': function (instance: ClassInstance): R { + react_stack_bottom_frame: function (instance: ClassInstance): R { return instance.render(); }, }; @@ -44,11 +44,11 @@ const callRender = { export const callRenderInDEV: (instance: ClassInstance) => 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 { + react_stack_bottom_frame: function (lazy: LazyComponent): any { const payload = lazy._payload; const init = lazy._init; return init(payload); @@ -57,5 +57,5 @@ const callLazyInit = { export const callLazyInitInDEV: (lazy: LazyComponent) => 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); diff --git a/packages/react-server/src/ReactFlightCallUserSpace.js b/packages/react-server/src/ReactFlightCallUserSpace.js index 4f7e065153f94..becd0e1d71abf 100644 --- a/packages/react-server/src/ReactFlightCallUserSpace.js +++ b/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 ( + react_stack_bottom_frame: function ( Component: (p: Props, arg: void) => R, props: Props, componentDebugInfo: ReactComponentInfo, @@ -41,11 +41,11 @@ export const callComponentInDEV: ( 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 { + react_stack_bottom_frame: function (lazy: LazyComponent): any { const payload = lazy._payload; const init = lazy._init; return init(payload); @@ -54,11 +54,11 @@ const callLazyInit = { export const callLazyInitInDEV: (lazy: LazyComponent) => 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, 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); diff --git a/packages/react-server/src/ReactFlightStackConfigV8.js b/packages/react-server/src/ReactFlightStackConfigV8.js index 4905dfd63281e..01f9bb5218bc3 100644 --- a/packages/react-server/src/ReactFlightStackConfigV8.js +++ b/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() || ''; - 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); } diff --git a/packages/react/src/jsx/ReactJSXElement.js b/packages/react/src/jsx/ReactJSXElement.js index a20378a93cb4d..68c553ab9fe14 100644 --- a/packages/react/src/jsx/ReactJSXElement.js +++ b/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, )(); diff --git a/packages/shared/ReactOwnerStackFrames.js b/packages/shared/ReactOwnerStackFrames.js index d7543858f1281..b7a883636f65a 100644 --- a/packages/shared/ReactOwnerStackFrames.js +++ b/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); }