diff --git a/packages/react-devtools-core/webpack.backend.js b/packages/react-devtools-core/webpack.backend.js index f111d7330c620..79d97e6a84b35 100644 --- a/packages/react-devtools-core/webpack.backend.js +++ b/packages/react-devtools-core/webpack.backend.js @@ -58,6 +58,9 @@ module.exports = { 'process.env.GITHUB_URL': `"${GITHUB_URL}"`, }), ], + optimization: { + minimize: false, + }, module: { rules: [ { diff --git a/packages/react-devtools-shared/src/backend/DevToolsComponentStackFrame.js b/packages/react-devtools-shared/src/backend/DevToolsComponentStackFrame.js index f673dbd7b975f..db84d32e2e45b 100644 --- a/packages/react-devtools-shared/src/backend/DevToolsComponentStackFrame.js +++ b/packages/react-devtools-shared/src/backend/DevToolsComponentStackFrame.js @@ -29,9 +29,9 @@ import { SUSPENSE_LIST_SYMBOL_STRING, } from './ReactSymbols'; -// These methods are safe to import from shared; -// there is no React-specific logic here. -import {disableLogs, reenableLogs} from 'shared/ConsolePatchingDev'; +// The shared console patching code is DEV-only. +// We can't use it since DevTools only ships production builds. +import {disableLogs, reenableLogs} from './DevToolsConsolePatching'; let prefix; export function describeBuiltInComponentFrame( diff --git a/packages/react-devtools-shared/src/backend/DevToolsConsolePatching.js b/packages/react-devtools-shared/src/backend/DevToolsConsolePatching.js new file mode 100644 index 0000000000000..4e945726e0bb2 --- /dev/null +++ b/packages/react-devtools-shared/src/backend/DevToolsConsolePatching.js @@ -0,0 +1,90 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @flow + */ + +// This is a DevTools fork of shared/ConsolePatchingDev. +// The shared console patching code is DEV-only. +// We can't use it since DevTools only ships production builds. + +// Helpers to patch console.logs to avoid logging during side-effect free +// replaying on render function. This currently only patches the object +// lazily which won't cover if the log function was extracted eagerly. +// We could also eagerly patch the method. + +let disabledDepth = 0; +let prevLog; +let prevInfo; +let prevWarn; +let prevError; +let prevGroup; +let prevGroupCollapsed; +let prevGroupEnd; + +function disabledLog() {} +disabledLog.__reactDisabledLog = true; + +export function disableLogs(): void { + if (disabledDepth === 0) { + /* eslint-disable react-internal/no-production-logging */ + prevLog = console.log; + prevInfo = console.info; + prevWarn = console.warn; + prevError = console.error; + prevGroup = console.group; + prevGroupCollapsed = console.groupCollapsed; + prevGroupEnd = console.groupEnd; + // https://github.com/facebook/react/issues/19099 + const props = { + configurable: true, + enumerable: true, + value: disabledLog, + writable: true, + }; + // $FlowFixMe Flow thinks console is immutable. + Object.defineProperties(console, { + info: props, + log: props, + warn: props, + error: props, + group: props, + groupCollapsed: props, + groupEnd: props, + }); + /* eslint-enable react-internal/no-production-logging */ + } + disabledDepth++; +} + +export function reenableLogs(): void { + disabledDepth--; + if (disabledDepth === 0) { + /* eslint-disable react-internal/no-production-logging */ + const props = { + configurable: true, + enumerable: true, + writable: true, + }; + // $FlowFixMe Flow thinks console is immutable. + Object.defineProperties(console, { + log: {...props, value: prevLog}, + info: {...props, value: prevInfo}, + warn: {...props, value: prevWarn}, + error: {...props, value: prevError}, + group: {...props, value: prevGroup}, + groupCollapsed: {...props, value: prevGroupCollapsed}, + groupEnd: {...props, value: prevGroupEnd}, + }); + /* eslint-enable react-internal/no-production-logging */ + } + if (disabledDepth < 0) { + console.error( + 'disabledDepth fell below zero. ' + + 'This is a bug in React. Please file an issue.', + ); + } +}