From ff89ba734668fdac06e8de476486830bbf9e0785 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= Date: Fri, 12 Jul 2024 14:39:38 -0400 Subject: [PATCH] Disable consoleWithStackDev Transform except in RN/WWW (#30313) Stacked on #30308. This is now a noop module so we can stop applying the transform of console.error using the Babel plugin in the mainline builds. I'm keeping the transform for RN/WWW for now although it might be nice if the transform moved into those systems as it gets synced instead of keeping it upstream. In jest tests we're already not running the forks for RN/WWW so we don't need it at all there. --- .../src/ReactClientConsoleConfigBrowser.js | 12 +----- .../src/ReactClientConsoleConfigPlain.js | 12 +----- .../src/ReactClientConsoleConfigServer.js | 12 +----- .../react-client/src/ReactFlightClient.js | 2 +- .../src/ReactFiberErrorLogger.js | 4 +- packages/shared/consoleWithStackDev.js | 38 ++++--------------- scripts/jest/preprocessor.js | 12 +----- scripts/print-warnings/print-warnings.js | 1 - scripts/rollup/build-ghaction.js | 26 ++++++++----- scripts/rollup/build.js | 26 ++++++++----- 10 files changed, 50 insertions(+), 95 deletions(-) diff --git a/packages/react-client/src/ReactClientConsoleConfigBrowser.js b/packages/react-client/src/ReactClientConsoleConfigBrowser.js index a80a410d28..c1f525d28a 100644 --- a/packages/react-client/src/ReactClientConsoleConfigBrowser.js +++ b/packages/react-client/src/ReactClientConsoleConfigBrowser.js @@ -7,8 +7,6 @@ * @flow */ -import {warn, error} from 'shared/consoleWithStackDev'; - const badgeFormat = '%c%s%c '; // Same badge styling as DevTools. const badgeStyle = @@ -65,12 +63,6 @@ export function printToConsole( ); } - if (methodName === 'error' && __DEV__) { - error.apply(console, newArgs); - } else if (methodName === 'warn' && __DEV__) { - warn.apply(console, newArgs); - } else { - // $FlowFixMe[invalid-computed-prop] - console[methodName].apply(console, newArgs); // eslint-disable-line react-internal/no-production-logging - } + // $FlowFixMe[invalid-computed-prop] + console[methodName].apply(console, newArgs); // eslint-disable-line react-internal/no-production-logging } diff --git a/packages/react-client/src/ReactClientConsoleConfigPlain.js b/packages/react-client/src/ReactClientConsoleConfigPlain.js index 45069ea7bd..f2ec996b6a 100644 --- a/packages/react-client/src/ReactClientConsoleConfigPlain.js +++ b/packages/react-client/src/ReactClientConsoleConfigPlain.js @@ -7,8 +7,6 @@ * @flow */ -import {warn, error} from 'shared/consoleWithStackDev'; - const badgeFormat = '[%s] '; const pad = ' '; @@ -46,12 +44,6 @@ export function printToConsole( newArgs.splice(offset, 0, badgeFormat, pad + badgeName + pad); } - if (methodName === 'error' && __DEV__) { - error.apply(console, newArgs); - } else if (methodName === 'warn' && __DEV__) { - warn.apply(console, newArgs); - } else { - // $FlowFixMe[invalid-computed-prop] - console[methodName].apply(console, newArgs); // eslint-disable-line react-internal/no-production-logging - } + // $FlowFixMe[invalid-computed-prop] + console[methodName].apply(console, newArgs); // eslint-disable-line react-internal/no-production-logging } diff --git a/packages/react-client/src/ReactClientConsoleConfigServer.js b/packages/react-client/src/ReactClientConsoleConfigServer.js index 8ae8152a08..19da98a176 100644 --- a/packages/react-client/src/ReactClientConsoleConfigServer.js +++ b/packages/react-client/src/ReactClientConsoleConfigServer.js @@ -7,8 +7,6 @@ * @flow */ -import {warn, error} from 'shared/consoleWithStackDev'; - // This flips color using ANSI, then sets a color styling, then resets. const badgeFormat = '\x1b[0m\x1b[7m%c%s\x1b[0m%c '; // Same badge styling as DevTools. @@ -66,12 +64,6 @@ export function printToConsole( ); } - if (methodName === 'error' && __DEV__) { - error.apply(console, newArgs); - } else if (methodName === 'warn' && __DEV__) { - warn.apply(console, newArgs); - } else { - // $FlowFixMe[invalid-computed-prop] - console[methodName].apply(console, newArgs); // eslint-disable-line react-internal/no-production-logging - } + // $FlowFixMe[invalid-computed-prop] + console[methodName].apply(console, newArgs); // eslint-disable-line react-internal/no-production-logging } diff --git a/packages/react-client/src/ReactFlightClient.js b/packages/react-client/src/ReactFlightClient.js index 8243e67c51..03a4ab96c0 100644 --- a/packages/react-client/src/ReactFlightClient.js +++ b/packages/react-client/src/ReactFlightClient.js @@ -2090,7 +2090,7 @@ function resolveConsoleEntry( task.run(callStack); return; } - // TODO: Set the current owner so that consoleWithStackDev adds the component + // TODO: Set the current owner so that captureOwnerStack() adds the component // stack during the replay - if needed. } const rootTask = response._debugRootTask; diff --git a/packages/react-reconciler/src/ReactFiberErrorLogger.js b/packages/react-reconciler/src/ReactFiberErrorLogger.js index a8667b4bb5..b969b9c54c 100644 --- a/packages/react-reconciler/src/ReactFiberErrorLogger.js +++ b/packages/react-reconciler/src/ReactFiberErrorLogger.js @@ -124,7 +124,7 @@ export function defaultOnCaughtError( error, componentNameMessage, recreateMessage, - // We let our consoleWithStackDev wrapper add the component stack to the end. + // We let DevTools or console.createTask add the component stack to the end. ], error.environmentName, ); @@ -134,7 +134,7 @@ export function defaultOnCaughtError( error, componentNameMessage, recreateMessage, - // We let our consoleWithStackDev wrapper add the component stack to the end. + // We let our DevTools or console.createTask add the component stack to the end. ); } } finally { diff --git a/packages/shared/consoleWithStackDev.js b/packages/shared/consoleWithStackDev.js index b978b0b1d0..072f118599 100644 --- a/packages/shared/consoleWithStackDev.js +++ b/packages/shared/consoleWithStackDev.js @@ -5,36 +5,14 @@ * LICENSE file in the root directory of this source tree. */ -export function setSuppressWarning(newSuppressWarning) { - // TODO: Noop. Delete. -} - -// In DEV, calls to console.warn and console.error get replaced -// by calls to these methods by a Babel plugin. +// We expect that our Rollup, Jest, and Flow configurations +// always shim this module with the corresponding environment +// (either rn or www). // -// In PROD (or in packages without access to React internals), -// they are left as they are instead. +// We should never resolve to this file, but it exists to make +// sure that if we *do* accidentally break the configuration, +// the failure isn't silent. -export function warn(format, ...args) { - if (__DEV__) { - printWarning('warn', format, args); - } -} - -export function error(format, ...args) { - if (__DEV__) { - printWarning('error', format, args); - } -} - -function printWarning(level, format, args) { - // When changing this logic, you might want to also - // update consoleWithStackDev.www.js as well. - if (__DEV__) { - args.unshift(format); - // We intentionally don't use spread (or .apply) directly because it - // breaks IE9: https://github.com/facebook/react/issues/13610 - // eslint-disable-next-line react-internal/no-production-logging - Function.prototype.apply.call(console[level], console, args); - } +export function setSuppressWarning() { + // TODO: Delete this and error when even importing this module. } diff --git a/scripts/jest/preprocessor.js b/scripts/jest/preprocessor.js index f04cd2c3cf..974ff7137a 100644 --- a/scripts/jest/preprocessor.js +++ b/scripts/jest/preprocessor.js @@ -16,9 +16,6 @@ const pathToBabel = path.join( '../..', 'package.json' ); -const pathToBabelPluginReplaceConsoleCalls = require.resolve( - '../babel/transform-replace-console-calls' -); const pathToTransformInfiniteLoops = require.resolve( '../babel/transform-prevent-infinite-loops' ); @@ -73,14 +70,7 @@ module.exports = { const isInDevToolsPackages = !!filePath.match( /\/packages\/react-devtools.*\// ); - const testOnlyPlugins = []; - const sourceOnlyPlugins = []; - if (process.env.NODE_ENV === 'development' && !isInDevToolsPackages) { - sourceOnlyPlugins.push(pathToBabelPluginReplaceConsoleCalls); - } - const plugins = (isTestFile ? testOnlyPlugins : sourceOnlyPlugins).concat( - babelOptions.plugins - ); + const plugins = [].concat(babelOptions.plugins); if (isTestFile && isInDevToolsPackages) { plugins.push(pathToTransformReactVersionPragma); } diff --git a/scripts/print-warnings/print-warnings.js b/scripts/print-warnings/print-warnings.js index 69b986b3a0..62f248d998 100644 --- a/scripts/print-warnings/print-warnings.js +++ b/scripts/print-warnings/print-warnings.js @@ -68,7 +68,6 @@ function transform(file, enc, cb) { gs([ 'packages/**/*.js', '!packages/*/npm/**/*.js', - '!packages/shared/consoleWithStackDev.js', '!packages/react-devtools*/**/*.js', '!**/__tests__/**/*.js', '!**/__mocks__/**/*.js', diff --git a/scripts/rollup/build-ghaction.js b/scripts/rollup/build-ghaction.js index 08ac889aba..32a606772f 100644 --- a/scripts/rollup/build-ghaction.js +++ b/scripts/rollup/build-ghaction.js @@ -149,16 +149,22 @@ function getBabelConfig( sourcemap: false, }; if (isDevelopment) { - options.plugins.push( - ...babelToES5Plugins, - // Turn console.error/warn() into a custom wrapper - [ - require('../babel/transform-replace-console-calls'), - { - shouldError: !canAccessReactObject, - }, - ] - ); + options.plugins.push(...babelToES5Plugins); + if ( + bundleType === FB_WWW_DEV || + bundleType === RN_OSS_DEV || + bundleType === RN_FB_DEV + ) { + options.plugins.push( + // Turn console.error/warn() into a custom wrapper + [ + require('../babel/transform-replace-console-calls'), + { + shouldError: !canAccessReactObject, + }, + ] + ); + } } if (updateBabelOptions) { options = updateBabelOptions(options); diff --git a/scripts/rollup/build.js b/scripts/rollup/build.js index bee54c66f1..32aa543fc0 100644 --- a/scripts/rollup/build.js +++ b/scripts/rollup/build.js @@ -149,16 +149,22 @@ function getBabelConfig( sourcemap: false, }; if (isDevelopment) { - options.plugins.push( - ...babelToES5Plugins, - // Turn console.error/warn() into a custom wrapper - [ - require('../babel/transform-replace-console-calls'), - { - shouldError: !canAccessReactObject, - }, - ] - ); + options.plugins.push(...babelToES5Plugins); + if ( + bundleType === FB_WWW_DEV || + bundleType === RN_OSS_DEV || + bundleType === RN_FB_DEV + ) { + options.plugins.push( + // Turn console.error/warn() into a custom wrapper + [ + require('../babel/transform-replace-console-calls'), + { + shouldError: !canAccessReactObject, + }, + ] + ); + } } if (updateBabelOptions) { options = updateBabelOptions(options);