Replace console.warn/error with a custom wrapper at build time

Author: gaearon

.eslintrc.js

@@ -33,7 +33,8 @@ module.exports = {
     'comma-dangle': [ERROR, 'always-multiline'],
     'consistent-return': OFF,
     'dot-location': [ERROR, 'property'],
-    'dot-notation': ERROR,
+    // We use console['error']() as a signal to not transform it:
+    'dot-notation': [ERROR, {allowPattern: '^(error|warn)$'}],
     'eol-last': ERROR,
     eqeqeq: [ERROR, 'allow-null'],
     indent: OFF,
@@ -135,6 +136,16 @@ module.exports = {
         'jest/valid-expect-in-promise': ERROR,
       },
     },
+    {
+      files: [
+        '**/__tests__/**/*.js',
+        'scripts/**/*.js',
+        'packages/react-devtools*/**/*.js'
+      ],
+      rules: {
+        'react-internal/no-production-logging': OFF,
+      },
+    },
     {
       files: ['packages/react-native-renderer/**/*.js'],
       globals: {

packages/legacy-events/ResponderEventPlugin.js

@@ -515,9 +515,11 @@ const ResponderEventPlugin = {
       if (trackedTouchCount >= 0) {
         trackedTouchCount -= 1;
       } else {
-        console.warn(
-          'Ended a touch event which was not counted in `trackedTouchCount`.',
-        );
+        if (__DEV__) {
+          console.warn(
+            'Ended a touch event which was not counted in `trackedTouchCount`.',
+          );
+        }
         return null;
       }
     }

packages/legacy-events/ResponderTouchHistoryStore.js

@@ -129,12 +129,15 @@ function recordTouchMove(touch: Touch): void {
     touchRecord.currentTimeStamp = timestampForTouch(touch);
     touchHistory.mostRecentTimeStamp = timestampForTouch(touch);
   } else {
-    console.warn(
-      'Cannot record touch move without a touch start.\n' + 'Touch Move: %s\n',
-      'Touch Bank: %s',
-      printTouch(touch),
-      printTouchBank(),
-    );
+    if (__DEV__) {
+      console.warn(
+        'Cannot record touch move without a touch start.\n' +
+          'Touch Move: %s\n',
+        'Touch Bank: %s',
+        printTouch(touch),
+        printTouchBank(),
+      );
+    }
   }
 }
 
@@ -150,12 +153,14 @@ function recordTouchEnd(touch: Touch): void {
     touchRecord.currentTimeStamp = timestampForTouch(touch);
     touchHistory.mostRecentTimeStamp = timestampForTouch(touch);
   } else {
-    console.warn(
-      'Cannot record touch end without a touch start.\n' + 'Touch End: %s\n',
-      'Touch Bank: %s',
-      printTouch(touch),
-      printTouchBank(),
-    );
+    if (__DEV__) {
+      console.warn(
+        'Cannot record touch end without a touch start.\n' + 'Touch End: %s\n',
+        'Touch Bank: %s',
+        printTouch(touch),
+        printTouchBank(),
+      );
+    }
   }
 }
 

packages/react-dom/npm/index.js

@@ -24,7 +24,7 @@ function checkDCE() {
   } catch (err) {
     // DevTools shouldn't crash React, no matter what.
     // We should still report in case we break this code.
-    console.error(err);
+    console['error'](err);
   }
 }
 

packages/react-dom/npm/profiling.js

@@ -24,7 +24,7 @@ function checkDCE() {
   } catch (err) {
     // DevTools shouldn't crash React, no matter what.
     // We should still report in case we break this code.
-    console.error(err);
+    console['error'](err);
   }
 }
 

packages/react-dom/src/client/ReactDOM.js

@@ -211,6 +211,7 @@ if (__DEV__) {
       const protocol = window.location.protocol;
       // Don't warn in exotic cases like chrome-extension://.
       if (/^(https?|file):$/.test(protocol)) {
+        // eslint-disable-next-line react-internal/no-production-logging
         console.info(
           '%cDownload the React DevTools ' +
             'for a better development experience: ' +

packages/react-dom/src/test-utils/ReactTestUtilsAct.js

@@ -79,6 +79,7 @@ function act(callback: () => Thenable) {
   if (!__DEV__) {
     if (didWarnAboutUsingActInProd === false) {
       didWarnAboutUsingActInProd = true;
+      // eslint-disable-next-line react-internal/no-production-logging
       console.error(
         'act(...) is not supported in production builds of React, and might not behave as expected.',
       );

packages/react-interactions/events/src/dom/testing-library/domEnvironment.js

@@ -22,7 +22,9 @@ export function hasPointerEvent() {
 export function setPointerEvent(bool) {
   const pointerCaptureFn = name => id => {
     if (typeof id !== 'number') {
-      console.error(`A pointerId must be passed to "${name}"`);
+      if (__DEV__) {
+        console.error(`A pointerId must be passed to "${name}"`);
+      }
     }
   };
   global.PointerEvent = bool ? emptyFunction : undefined;

packages/react-is/src/ReactIs.js

@@ -25,7 +25,6 @@ import {
   REACT_SUSPENSE_TYPE,
 } from 'shared/ReactSymbols';
 import isValidElementType from 'shared/isValidElementType';
-import lowPriorityWarningWithoutStack from 'shared/lowPriorityWarningWithoutStack';
 
 export function typeOf(object: any) {
   if (typeof object === 'object' && object !== null) {
@@ -88,7 +87,7 @@ export function isAsyncMode(object: any) {
   if (__DEV__) {
     if (!hasWarnedAboutDeprecatedIsAsyncMode) {
       hasWarnedAboutDeprecatedIsAsyncMode = true;
-      lowPriorityWarningWithoutStack(
+      console.warn(
         'The ReactIs.isAsyncMode() alias has been deprecated, ' +
           'and will be removed in React 17+. Update your code to use ' +
           'ReactIs.isConcurrentMode() instead. It has the exact same API.',

packages/react-native-renderer/src/NativeMethodsMixinUtils.js

@@ -66,17 +66,19 @@ export function throwOnStylesProp(component: any, props: any) {
 }
 
 export function warnForStyleProps(props: any, validAttributes: any) {
-  for (const key in validAttributes.style) {
-    if (!(validAttributes[key] || props[key] === undefined)) {
-      console.error(
-        'You are setting the style `{ ' +
-          key +
-          ': ... }` as a prop. You ' +
-          'should nest it in a style object. ' +
-          'E.g. `{ style: { ' +
-          key +
-          ': ... } }`',
-      );
+  if (__DEV__) {
+    for (const key in validAttributes.style) {
+      if (!(validAttributes[key] || props[key] === undefined)) {
+        console.error(
+          'You are setting the style `{ ' +
+            key +
+            ': ... }` as a prop. You ' +
+            'should nest it in a style object. ' +
+            'E.g. `{ style: { ' +
+            key +
+            ': ... } }`',
+        );
+      }
     }
   }
 }

packages/react-noop-renderer/src/createReactNoop.js

@@ -638,6 +638,7 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
     if (!__DEV__) {
       if (didWarnAboutUsingActInProd === false) {
         didWarnAboutUsingActInProd = true;
+        // eslint-disable-next-line react-internal/no-production-logging
         console.error(
           'act(...) is not supported in production builds of React, and might not behave as expected.',
         );
@@ -1106,6 +1107,7 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
       const root = roots.get(rootID);
       const rootContainer = rootContainers.get(rootID);
       if (!root || !rootContainer) {
+        // eslint-disable-next-line react-internal/no-production-logging
         console.log('Nothing rendered yet.');
         return;
       }
@@ -1208,6 +1210,7 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
       log('FIBERS:');
       logFiber(root.current, 0);
 
+      // eslint-disable-next-line react-internal/no-production-logging
       console.log(...bufferedLog);
     },
 

packages/react-reconciler/src/ReactFiberErrorLogger.js

@@ -20,9 +20,6 @@ export function logCapturedError(capturedError: CapturedError): void {
     return;
   }
 
-  // Prevent it from being seen by Babel transform.
-  const rawConsoleError = console.error;
-
   const error = (capturedError.error: any);
   if (__DEV__) {
     const {
@@ -47,7 +44,7 @@ export function logCapturedError(capturedError: CapturedError): void {
       // been accidental, we'll surface it anyway.
       // However, the browser would have silenced the original error
       // so we'll print it first, and then print the stack addendum.
-      rawConsoleError(error);
+      console['error'](error); // Don't transform to our wrapper
       // For a more detailed description of this block, see:
       // https://github.com/facebook/react/pull/13384
     }
@@ -81,11 +78,12 @@ export function logCapturedError(capturedError: CapturedError): void {
     // We don't include the original error message and JS stack because the browser
     // has already printed it. Even if the application swallows the error, it is still
     // displayed by the browser thanks to the DEV-only fake event trick in ReactErrorUtils.
-    rawConsoleError(combinedMessage);
+    console['error'](combinedMessage); // Don't transform to our wrapper
   } else {
     // In production, we print the error directly.
     // This will include the message, the JS stack, and anything the browser wants to show.
     // We pass the error object instead of custom message so that the browser displays the error natively.
-    rawConsoleError(error);
+    // eslint-disable-next-line react-internal/no-production-logging
+    console['error'](error); // Don't transform to our wrapper
   }
 }

packages/react-test-renderer/src/ReactTestRendererAct.js

@@ -60,6 +60,7 @@ function act(callback: () => Thenable) {
   if (!__DEV__) {
     if (didWarnAboutUsingActInProd === false) {
       didWarnAboutUsingActInProd = true;
+      // eslint-disable-next-line react-internal/no-production-logging
       console.error(
         'act(...) is not supported in production builds of React, and might not behave as expected.',
       );

packages/scheduler/src/SchedulerProfiling.js

@@ -69,7 +69,8 @@ function logEvent(entries) {
     if (eventLogIndex + 1 > eventLogSize) {
       eventLogSize *= 2;
       if (eventLogSize > MAX_EVENT_LOG_SIZE) {
-        console.error(
+        console['error'](
+          // Don't transform to our wrapper
           "Scheduler Profiling: Event log exceeded maximum size. Don't " +
             'forget to call `stopLoggingProfilingEvents()`.',
         );

packages/scheduler/src/__tests__/SchedulerProfiling-test.js

@@ -544,7 +544,7 @@ Task 1 [Normal]              │                    █████████
     }
 
     expect(console.error).toHaveBeenCalledTimes(1);
-    expect(console.error.calls.argsFor(0)[0]).toContain(
+    expect(console.error.calls.argsFor(0)[0]).toBe(
       "Scheduler Profiling: Event log exceeded maximum size. Don't forget " +
         'to call `stopLoggingProfilingEvents()`.',
     );

packages/scheduler/src/forks/SchedulerHostConfig.default.js

@@ -81,14 +81,16 @@ if (
     const cancelAnimationFrame = window.cancelAnimationFrame;
     // TODO: Remove fb.me link
     if (typeof requestAnimationFrame !== 'function') {
-      console.error(
+      console['error'](
+        // Don't transform to our wrapper
         "This browser doesn't support requestAnimationFrame. " +
           'Make sure that you load a ' +
           'polyfill in older browsers. https://fb.me/react-polyfills',
       );
     }
     if (typeof cancelAnimationFrame !== 'function') {
-      console.error(
+      console['error'](
+        // Don't transform to our wrapper
         "This browser doesn't support cancelAnimationFrame. " +
           'Make sure that you load a ' +
           'polyfill in older browsers. https://fb.me/react-polyfills',
@@ -169,7 +171,8 @@ if (
 
   forceFrameRate = function(fps) {
     if (fps < 0 || fps > 125) {
-      console.error(
+      console['error'](
+        // Don't transform to our wrapper
         'forceFrameRate takes a positive int between 0 and 125, ' +
           'forcing framerates higher than 125 fps is not unsupported',
       );

packages/shared/enqueueTask.js

@@ -7,8 +7,6 @@
  * @flow
  */
 
-import warningWithoutStack from 'shared/warningWithoutStack';
-
 let didWarnAboutMessageChannel = false;
 let enqueueTask;
 try {
@@ -28,7 +26,7 @@ try {
       if (didWarnAboutMessageChannel === false) {
         didWarnAboutMessageChannel = true;
         if (typeof MessageChannel === 'undefined') {
-          warningWithoutStack(
+          console.error(
             'This browser does not have a MessageChannel implementation, ' +
               'so enqueuing tasks via await act(async () => ...) will fail. ' +
               'Please file an issue at https://github.com/facebook/react/issues ' +