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 a80a410d28d90..c1f525d28a8c7 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 45069ea7bd087..f2ec996b6af13 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 8ae8152a08809..19da98a176ada 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 8243e67c51884..03a4ab96c0abc 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 a8667b4bb5969..b969b9c54cb19 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 b978b0b1d0804..072f11859985f 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. - -export function warn(format, ...args) { - if (__DEV__) { - printWarning('warn', format, args); - } -} - -export function error(format, ...args) { - if (__DEV__) { - printWarning('error', format, args); - } -} +// 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. -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 f04cd2c3cfc84..974ff7137ab9f 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 69b986b3a0d58..62f248d9987ea 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 08ac889aba43d..32a606772f0c0 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 bee54c66f156f..32aa543fc03d5 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);