Use console directly instead of warning() modules (#17599)

* Replace all warning/lowPriWarning with console calls

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

* Fail the build for console.error/warn() where we can't read the stack

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,18 @@ module.exports = {
         'jest/valid-expect-in-promise': ERROR,
       },
     },
+    {
+      files: [
+        '**/__tests__/**/*.js',
+        'scripts/**/*.js',
+        'packages/*/npm/**/*.js',
+        'packages/react-devtools*/**/*.js'
+      ],
+      rules: {
+        'react-internal/no-production-logging': OFF,
+        'react-internal/warning-args': OFF,
+      },
+    },
     {
       files: ['packages/react-native-renderer/**/*.js'],
       globals: {

packages/create-subscription/src/createSubscription.js

@@ -9,7 +9,6 @@
 
 import React from 'react';
 import invariant from 'shared/invariant';
-import warning from 'shared/warning';
 
 type Unsubscribe = () => void;
 
@@ -38,10 +37,10 @@ export function createSubscription<Property, Value>(
 
   if (__DEV__) {
     if (typeof getCurrentValue !== 'function') {
-      warning('Subscription must specify a getCurrentValue function');
+      console.error('Subscription must specify a getCurrentValue function');
     }
     if (typeof subscribe !== 'function') {
-      warning('Subscription must specify a subscribe function');
+      console.error('Subscription must specify a subscribe function');
     }
   }
 

packages/legacy-events/EventPluginUtils.js

@@ -7,7 +7,6 @@
 
 import {invokeGuardedCallbackAndCatchFirstError} from 'shared/ReactErrorUtils';
 import invariant from 'shared/invariant';
-import warning from 'shared/warning';
 
 export let getFiberCurrentPropsFromNode = null;
 export let getInstanceFromNode = null;
@@ -23,7 +22,7 @@ export function setComponentTree(
   getNodeFromInstance = getNodeFromInstanceImpl;
   if (__DEV__) {
     if (!getNodeFromInstance || !getInstanceFromNode) {
-      warning(
+      console.error(
         'EventPluginUtils.setComponentTree(...): Injected ' +
           'module is missing getNodeFromInstance or getInstanceFromNode.',
       );
@@ -52,7 +51,7 @@ if (__DEV__) {
         : 0;
 
     if (instancesIsArr !== listenersIsArr || instancesLen !== listenersLen) {
-      warning('EventPluginUtils: Invalid `event`.');
+      console.error('EventPluginUtils: Invalid `event`.');
     }
   };
 }

packages/legacy-events/EventPropagators.js

@@ -10,7 +10,6 @@ import {
   traverseTwoPhase,
   traverseEnterLeave,
 } from 'shared/ReactTreeTraversal';
-import warning from 'shared/warning';
 
 import {getListener} from './EventPluginHub';
 import accumulateInto from './accumulateInto';
@@ -47,7 +46,7 @@ function listenerAtPhase(inst, event, propagationPhase: PropagationPhases) {
 function accumulateDirectionalDispatches(inst, phase, event) {
   if (__DEV__) {
     if (!inst) {
-      warning('Dispatching inst must not be null');
+      console.error('Dispatching inst must not be null');
     }
   }
   const listener = listenerAtPhase(inst, event, phase);

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

@@ -8,7 +8,6 @@
  */
 
 import invariant from 'shared/invariant';
-import warning from 'shared/warning';
 
 import {isStartish, isMoveish, isEndish} from './ResponderTopLevelEventTypes';
 
@@ -96,7 +95,7 @@ function getTouchIdentifier({identifier}: Touch): number {
   invariant(identifier != null, 'Touch object is missing identifier.');
   if (__DEV__) {
     if (identifier > MAX_TOUCH_BANK) {
-      warning(
+      console.error(
         'Touch identifier %s is greater than maximum supported %s which causes ' +
           'performance issues backfilling array locations for all of the indices.',
         identifier,
@@ -130,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(),
+      );
+    }
   }
 }
 
@@ -151,12 +153,15 @@ 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(),
+      );
+    }
   }
 }
 
@@ -202,7 +207,7 @@ const ResponderTouchHistoryStore = {
         if (__DEV__) {
           const activeRecord = touchBank[touchHistory.indexOfSingleActiveTouch];
           if (activeRecord == null || !activeRecord.touchActive) {
-            warning('Cannot find single active touch.');
+            console.error('Cannot find single active touch.');
           }
         }
       }

packages/legacy-events/SyntheticEvent.js

@@ -8,7 +8,6 @@
 /* eslint valid-typeof: 0 */
 
 import invariant from 'shared/invariant';
-import warning from 'shared/warning';
 
 const EVENT_POOL_SIZE = 10;
 
@@ -284,7 +283,7 @@ function getPooledWarningPropertyDefinition(propName, getVal) {
 
   function warn(action, result) {
     if (__DEV__) {
-      warning(
+      console.error(
         "This synthetic event is reused for performance reasons. If you're seeing this, " +
           "you're %s `%s` on a released/nullified synthetic event. %s. " +
           'If you must keep the original synthetic event around, use event.persist(). ' +

packages/react-cache/src/ReactCache.js

@@ -8,7 +8,6 @@
  */
 
 import React from 'react';
-import warning from 'shared/warning';
 
 import {createLRU} from './LRU';
 
@@ -71,7 +70,7 @@ function identityHashFn(input) {
       input !== undefined &&
       input !== null
     ) {
-      warning(
+      console.error(
         'Invalid key type. Expected a string, number, symbol, or boolean, ' +
           'but instead received: %s' +
           '\n\nTo use non-primitive values as keys, you must pass a hash ' +

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

@@ -53,8 +53,6 @@ import {
 } from 'legacy-events/EventPropagators';
 import ReactVersion from 'shared/ReactVersion';
 import invariant from 'shared/invariant';
-import lowPriorityWarning from 'shared/lowPriorityWarning';
-import warning from 'shared/warning';
 import {exposeConcurrentModeAPIs} from 'shared/ReactFeatureFlags';
 
 import {
@@ -92,7 +90,7 @@ if (__DEV__) {
     typeof Set.prototype.clear !== 'function' ||
     typeof Set.prototype.forEach !== 'function'
   ) {
-    warning(
+    console.error(
       'React depends on Map and Set built-in types. Make sure that you load a ' +
         'polyfill in older browsers. https://fb.me/react-polyfills',
     );
@@ -144,7 +142,7 @@ const ReactDOM: Object = {
     if (__DEV__) {
       if (!didWarnAboutUnstableCreatePortal) {
         didWarnAboutUnstableCreatePortal = true;
-        lowPriorityWarning(
+        console.warn(
           'The ReactDOM.unstable_createPortal() alias has been deprecated, ' +
             'and will be removed in React 17+. Update your code to use ' +
             'ReactDOM.createPortal() instead. It has the exact same API, ' +
@@ -213,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/client/ReactDOMComponent.js

@@ -11,7 +11,6 @@
 import {getCurrentFiberOwnerNameInDevOrNull} from 'react-reconciler/src/ReactCurrentFiber';
 import {registrationNameModules} from 'legacy-events/EventPluginRegistry';
 import {canUseDOM} from 'shared/ExecutionEnvironment';
-import warning from 'shared/warning';
 import endsWith from 'shared/endsWith';
 import {setListenToResponderEventTypes} from '../events/DOMEventResponderSystem';
 
@@ -183,7 +182,7 @@ if (__DEV__) {
       return;
     }
     didWarnInvalidHydration = true;
-    warning(
+    console.error(
       'Text content did not match. Server: "%s" Client: "%s"',
       normalizedServerText,
       normalizedClientText,
@@ -208,7 +207,7 @@ if (__DEV__) {
       return;
     }
     didWarnInvalidHydration = true;
-    warning(
+    console.error(
       'Prop `%s` did not match. Server: %s Client: %s',
       propName,
       JSON.stringify(normalizedServerValue),
@@ -225,12 +224,12 @@ if (__DEV__) {
     attributeNames.forEach(function(name) {
       names.push(name);
     });
-    warning('Extra attributes from the server: %s', names);
+    console.error('Extra attributes from the server: %s', names);
   };
 
   warnForInvalidEventListener = function(registrationName, listener) {
     if (listener === false) {
-      warning(
+      console.error(
         'Expected `%s` listener to be a function, instead got `false`.\n\n' +
           'If you used to conditionally omit it with %s={condition && value}, ' +
           'pass %s={condition ? value : undefined} instead.',
@@ -239,7 +238,7 @@ if (__DEV__) {
         registrationName,
       );
     } else {
-      warning(
+      console.error(
         'Expected `%s` listener to be a function, instead got a value of `%s` type.',
         registrationName,
         typeof listener,
@@ -412,7 +411,7 @@ export function createElement(
       // Should this check be gated by parent namespace? Not sure we want to
       // allow <SVG> or <mATH>.
       if (!isCustomComponentTag && type !== type.toLowerCase()) {
-        warning(
+        console.error(
           '<%s /> is using incorrect casing. ' +
             'Use PascalCase for React components, ' +
             'or lowercase for HTML elements.',
@@ -427,7 +426,7 @@ export function createElement(
       const div = ownerDocument.createElement('div');
       if (__DEV__) {
         if (enableTrustedTypesIntegration && !didWarnScriptTags) {
-          warning(
+          console.error(
             'Encountered a script tag while rendering React component. ' +
               'Scripts inside React components are never executed when rendering ' +
               'on the client. Consider using template tag instead ' +
@@ -482,7 +481,7 @@ export function createElement(
         !Object.prototype.hasOwnProperty.call(warnedUnknownTags, type)
       ) {
         warnedUnknownTags[type] = true;
-        warning(
+        console.error(
           'The tag <%s> is unrecognized in this browser. ' +
             'If you meant to render a React component, start its name with ' +
             'an uppercase letter.',
@@ -518,7 +517,7 @@ export function setInitialProperties(
       !didWarnShadyDOM &&
       (domElement: any).shadyRoot
     ) {
-      warning(
+      console.error(
         '%s is using shady DOM. Using shady DOM with React can ' +
           'cause things to break subtly.',
         getCurrentFiberOwnerNameInDevOrNull() || 'A component',
@@ -918,7 +917,7 @@ export function diffHydratedProperties(
       !didWarnShadyDOM &&
       (domElement: any).shadyRoot
     ) {
-      warning(
+      console.error(
         '%s is using shady DOM. Using shady DOM with React can ' +
           'cause things to break subtly.',
         getCurrentFiberOwnerNameInDevOrNull() || 'A component',
@@ -1210,7 +1209,7 @@ export function warnForDeletedHydratableElement(
       return;
     }
     didWarnInvalidHydration = true;
-    warning(
+    console.error(
       'Did not expect server HTML to contain a <%s> in <%s>.',
       child.nodeName.toLowerCase(),
       parentNode.nodeName.toLowerCase(),
@@ -1227,7 +1226,7 @@ export function warnForDeletedHydratableText(
       return;
     }
     didWarnInvalidHydration = true;
-    warning(
+    console.error(
       'Did not expect server HTML to contain the text node "%s" in <%s>.',
       child.nodeValue,
       parentNode.nodeName.toLowerCase(),
@@ -1245,7 +1244,7 @@ export function warnForInsertedHydratedElement(
       return;
     }
     didWarnInvalidHydration = true;
-    warning(
+    console.error(
       'Expected server HTML to contain a matching <%s> in <%s>.',
       tag,
       parentNode.nodeName.toLowerCase(),
@@ -1269,7 +1268,7 @@ export function warnForInsertedHydratedText(
       return;
     }
     didWarnInvalidHydration = true;
-    warning(
+    console.error(
       'Expected server HTML to contain a matching text node for "%s" in <%s>.',
       text,
       parentNode.nodeName.toLowerCase(),