@samitouri / QOS-React-1 / commits / ff89ba7346

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.

Sebastian Markbåge committed Jul 12, 2024 at 14:39 UTC ff89ba734668fdac06e8de476486830bbf9e0785
10 files changed +50 -95
packages/react-client/src/ReactClientConsoleConfigBrowser.js
+2 -10
@@ -7,8 +7,6 @@
7 * @flow
8 */
9
10 -import {warn, error} from 'shared/consoleWithStackDev';
11 -
10 const badgeFormat = '%c%s%c ';
11 // Same badge styling as DevTools.
12 const badgeStyle =
@@ -65,12 +63,6 @@ export function printToConsole(
63 );
64 }
65
68 - if (methodName === 'error' && __DEV__) {
69 - error.apply(console, newArgs);
70 - } else if (methodName === 'warn' && __DEV__) {
71 - warn.apply(console, newArgs);
72 - } else {
73 - // $FlowFixMe[invalid-computed-prop]
74 - console[methodName].apply(console, newArgs); // eslint-disable-line react-internal/no-production-logging
75 - }
66 + // $FlowFixMe[invalid-computed-prop]
67 + console[methodName].apply(console, newArgs); // eslint-disable-line react-internal/no-production-logging
68 }
packages/react-client/src/ReactClientConsoleConfigPlain.js
+2 -10
@@ -7,8 +7,6 @@
7 * @flow
8 */
9
10 -import {warn, error} from 'shared/consoleWithStackDev';
11 -
10 const badgeFormat = '[%s] ';
11 const pad = ' ';
12
@@ -46,12 +44,6 @@ export function printToConsole(
44 newArgs.splice(offset, 0, badgeFormat, pad + badgeName + pad);
45 }
46
49 - if (methodName === 'error' && __DEV__) {
50 - error.apply(console, newArgs);
51 - } else if (methodName === 'warn' && __DEV__) {
52 - warn.apply(console, newArgs);
53 - } else {
54 - // $FlowFixMe[invalid-computed-prop]
55 - console[methodName].apply(console, newArgs); // eslint-disable-line react-internal/no-production-logging
56 - }
47 + // $FlowFixMe[invalid-computed-prop]
48 + console[methodName].apply(console, newArgs); // eslint-disable-line react-internal/no-production-logging
49 }
packages/react-client/src/ReactClientConsoleConfigServer.js
+2 -10
@@ -7,8 +7,6 @@
7 * @flow
8 */
9
10 -import {warn, error} from 'shared/consoleWithStackDev';
11 -
10 // This flips color using ANSI, then sets a color styling, then resets.
11 const badgeFormat = '\x1b[0m\x1b[7m%c%s\x1b[0m%c ';
12 // Same badge styling as DevTools.
@@ -66,12 +64,6 @@ export function printToConsole(
64 );
65 }
66
69 - if (methodName === 'error' && __DEV__) {
70 - error.apply(console, newArgs);
71 - } else if (methodName === 'warn' && __DEV__) {
72 - warn.apply(console, newArgs);
73 - } else {
74 - // $FlowFixMe[invalid-computed-prop]
75 - console[methodName].apply(console, newArgs); // eslint-disable-line react-internal/no-production-logging
76 - }
67 + // $FlowFixMe[invalid-computed-prop]
68 + console[methodName].apply(console, newArgs); // eslint-disable-line react-internal/no-production-logging
69 }
packages/react-client/src/ReactFlightClient.js
+1 -1
@@ -2090,7 +2090,7 @@ function resolveConsoleEntry(
2090 task.run(callStack);
2091 return;
2092 }
2093 - // TODO: Set the current owner so that consoleWithStackDev adds the component
2093 + // TODO: Set the current owner so that captureOwnerStack() adds the component
2094 // stack during the replay - if needed.
2095 }
2096 const rootTask = response._debugRootTask;
packages/react-reconciler/src/ReactFiberErrorLogger.js
+2 -2
@@ -124,7 +124,7 @@ export function defaultOnCaughtError(
124 error,
125 componentNameMessage,
126 recreateMessage,
127 - // We let our consoleWithStackDev wrapper add the component stack to the end.
127 + // We let DevTools or console.createTask add the component stack to the end.
128 ],
129 error.environmentName,
130 );
@@ -134,7 +134,7 @@ export function defaultOnCaughtError(
134 error,
135 componentNameMessage,
136 recreateMessage,
137 - // We let our consoleWithStackDev wrapper add the component stack to the end.
137 + // We let our DevTools or console.createTask add the component stack to the end.
138 );
139 }
140 } finally {
packages/shared/consoleWithStackDev.js
+8 -30
@@ -5,36 +5,14 @@
5 * LICENSE file in the root directory of this source tree.
6 */
7
8 -export function setSuppressWarning(newSuppressWarning) {
9 - // TODO: Noop. Delete.
10 -}
11 -
12 -// In DEV, calls to console.warn and console.error get replaced
13 -// by calls to these methods by a Babel plugin.
8 +// We expect that our Rollup, Jest, and Flow configurations
9 +// always shim this module with the corresponding environment
10 +// (either rn or www).
11 //
15 -// In PROD (or in packages without access to React internals),
16 -// they are left as they are instead.
17 -
18 -export function warn(format, ...args) {
19 - if (__DEV__) {
20 - printWarning('warn', format, args);
21 - }
22 -}
23 -
24 -export function error(format, ...args) {
25 - if (__DEV__) {
26 - printWarning('error', format, args);
27 - }
28 -}
12 +// We should never resolve to this file, but it exists to make
13 +// sure that if we *do* accidentally break the configuration,
14 +// the failure isn't silent.
15
30 -function printWarning(level, format, args) {
31 - // When changing this logic, you might want to also
32 - // update consoleWithStackDev.www.js as well.
33 - if (__DEV__) {
34 - args.unshift(format);
35 - // We intentionally don't use spread (or .apply) directly because it
36 - // breaks IE9: https://github.com/facebook/react/issues/13610
37 - // eslint-disable-next-line react-internal/no-production-logging
38 - Function.prototype.apply.call(console[level], console, args);
39 - }
16 +export function setSuppressWarning() {
17 + // TODO: Delete this and error when even importing this module.
18 }
scripts/jest/preprocessor.js
+1 -11
@@ -16,9 +16,6 @@ const pathToBabel = path.join(
16 '../..',
17 'package.json'
18 );
19 -const pathToBabelPluginReplaceConsoleCalls = require.resolve(
20 - '../babel/transform-replace-console-calls'
21 -);
19 const pathToTransformInfiniteLoops = require.resolve(
20 '../babel/transform-prevent-infinite-loops'
21 );
@@ -73,14 +70,7 @@ module.exports = {
70 const isInDevToolsPackages = !!filePath.match(
71 /\/packages\/react-devtools.*\//
72 );
76 - const testOnlyPlugins = [];
77 - const sourceOnlyPlugins = [];
78 - if (process.env.NODE_ENV === 'development' && !isInDevToolsPackages) {
79 - sourceOnlyPlugins.push(pathToBabelPluginReplaceConsoleCalls);
80 - }
81 - const plugins = (isTestFile ? testOnlyPlugins : sourceOnlyPlugins).concat(
82 - babelOptions.plugins
83 - );
73 + const plugins = [].concat(babelOptions.plugins);
74 if (isTestFile && isInDevToolsPackages) {
75 plugins.push(pathToTransformReactVersionPragma);
76 }
scripts/print-warnings/print-warnings.js
-1
@@ -68,7 +68,6 @@ function transform(file, enc, cb) {
68 gs([
69 'packages/**/*.js',
70 '!packages/*/npm/**/*.js',
71 - '!packages/shared/consoleWithStackDev.js',
71 '!packages/react-devtools*/**/*.js',
72 '!**/__tests__/**/*.js',
73 '!**/__mocks__/**/*.js',
scripts/rollup/build-ghaction.js
+16 -10
@@ -149,16 +149,22 @@ function getBabelConfig(
149 sourcemap: false,
150 };
151 if (isDevelopment) {
152 - options.plugins.push(
153 - ...babelToES5Plugins,
154 - // Turn console.error/warn() into a custom wrapper
155 - [
156 - require('../babel/transform-replace-console-calls'),
157 - {
158 - shouldError: !canAccessReactObject,
159 - },
160 - ]
161 - );
152 + options.plugins.push(...babelToES5Plugins);
153 + if (
154 + bundleType === FB_WWW_DEV ||
155 + bundleType === RN_OSS_DEV ||
156 + bundleType === RN_FB_DEV
157 + ) {
158 + options.plugins.push(
159 + // Turn console.error/warn() into a custom wrapper
160 + [
161 + require('../babel/transform-replace-console-calls'),
162 + {
163 + shouldError: !canAccessReactObject,
164 + },
165 + ]
166 + );
167 + }
168 }
169 if (updateBabelOptions) {
170 options = updateBabelOptions(options);
scripts/rollup/build.js
+16 -10
@@ -149,16 +149,22 @@ function getBabelConfig(
149 sourcemap: false,
150 };
151 if (isDevelopment) {
152 - options.plugins.push(
153 - ...babelToES5Plugins,
154 - // Turn console.error/warn() into a custom wrapper
155 - [
156 - require('../babel/transform-replace-console-calls'),
157 - {
158 - shouldError: !canAccessReactObject,
159 - },
160 - ]
161 - );
152 + options.plugins.push(...babelToES5Plugins);
153 + if (
154 + bundleType === FB_WWW_DEV ||
155 + bundleType === RN_OSS_DEV ||
156 + bundleType === RN_FB_DEV
157 + ) {
158 + options.plugins.push(
159 + // Turn console.error/warn() into a custom wrapper
160 + [
161 + require('../babel/transform-replace-console-calls'),
162 + {
163 + shouldError: !canAccessReactObject,
164 + },
165 + ]
166 + );
167 + }
168 }
169 if (updateBabelOptions) {
170 options = updateBabelOptions(options);