From 5fa4d79b00988f354073bc27313363dd5cce9cd3 Mon Sep 17 00:00:00 2001 From: Juan Date: Fri, 8 Oct 2021 08:38:11 -0400 Subject: [PATCH] [DevTools] Register logger for standalone DevTools (#22524) --- .../react-devtools-core/src/standalone.js | 12 ++++- .../react-devtools-core/webpack.standalone.js | 3 ++ .../react-devtools-extensions/src/main.js | 4 +- .../config/DevToolsFeatureFlags.core-fb.js | 2 +- .../src/registerDevToolsEventLogger.js} | 53 ++++++++++--------- 5 files changed, 43 insertions(+), 31 deletions(-) rename packages/{react-devtools-extensions/src/registerExtensionsEventLogger.js => react-devtools-shared/src/registerDevToolsEventLogger.js} (63%) diff --git a/packages/react-devtools-core/src/standalone.js b/packages/react-devtools-core/src/standalone.js index bb6bd3d0c4..c37bb94533 100644 --- a/packages/react-devtools-core/src/standalone.js +++ b/packages/react-devtools-core/src/standalone.js @@ -23,6 +23,7 @@ import { getShowInlineWarningsAndErrors, getHideConsoleLogsInStrictMode, } from 'react-devtools-shared/src/utils'; +import {registerDevToolsEventLogger} from 'react-devtools-shared/src/registerDevToolsEventLogger'; import {Server} from 'ws'; import {join} from 'path'; import {readFileSync} from 'fs'; @@ -255,16 +256,23 @@ function connectToSocket(socket: WebSocket) { }; } -type ServerOptions = { +type ServerOptions = {| key?: string, cert?: string, -}; +|}; + +type LoggerOptions = {| + surface?: ?string, +|}; function startServer( port?: number = 8097, host?: string = 'localhost', httpsOptions?: ServerOptions, + loggerOptions?: LoggerOptions, ) { + registerDevToolsEventLogger(loggerOptions?.surface ?? 'standalone'); + const useHttps = !!httpsOptions; const httpServer = useHttps ? require('https').createServer(httpsOptions) diff --git a/packages/react-devtools-core/webpack.standalone.js b/packages/react-devtools-core/webpack.standalone.js index 17135f0677..fe7c1220f1 100644 --- a/packages/react-devtools-core/webpack.standalone.js +++ b/packages/react-devtools-core/webpack.standalone.js @@ -30,6 +30,8 @@ const __DEV__ = NODE_ENV === 'development'; const DEVTOOLS_VERSION = getVersionString(); +const LOGGING_URL = process.env.LOGGING_URL || null; + const featureFlagTarget = process.env.FEATURE_FLAG_TARGET || 'core/standalone-oss'; @@ -82,6 +84,7 @@ module.exports = { 'process.env.DEVTOOLS_PACKAGE': `"react-devtools-core"`, 'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`, 'process.env.GITHUB_URL': `"${GITHUB_URL}"`, + 'process.env.LOGGING_URL': `"${LOGGING_URL}"`, 'process.env.NODE_ENV': `"${NODE_ENV}"`, 'process.env.DARK_MODE_DIMMED_WARNING_COLOR': `"${DARK_MODE_DIMMED_WARNING_COLOR}"`, 'process.env.DARK_MODE_DIMMED_ERROR_COLOR': `"${DARK_MODE_DIMMED_ERROR_COLOR}"`, diff --git a/packages/react-devtools-extensions/src/main.js b/packages/react-devtools-extensions/src/main.js index 58a4dcfd08..6a3836839a 100644 --- a/packages/react-devtools-extensions/src/main.js +++ b/packages/react-devtools-extensions/src/main.js @@ -6,6 +6,7 @@ import Bridge from 'react-devtools-shared/src/bridge'; import Store from 'react-devtools-shared/src/devtools/store'; import {getBrowserName, getBrowserTheme} from './utils'; import {LOCAL_STORAGE_TRACE_UPDATES_ENABLED_KEY} from 'react-devtools-shared/src/constants'; +import {registerDevToolsEventLogger} from 'react-devtools-shared/src/registerDevToolsEventLogger'; import { getAppendComponentStack, getBreakOnConsoleErrors, @@ -20,7 +21,6 @@ import { } from 'react-devtools-shared/src/storage'; import DevTools from 'react-devtools-shared/src/devtools/views/DevTools'; import {__DEBUG__} from 'react-devtools-shared/src/constants'; -import {registerExtensionsEventLogger} from './registerExtensionsEventLogger'; import {logEvent} from 'react-devtools-shared/src/Logger'; const LOCAL_STORAGE_SUPPORTS_PROFILING_KEY = @@ -89,7 +89,7 @@ function createPanelIfReactLoaded() { const tabId = chrome.devtools.inspectedWindow.tabId; - registerExtensionsEventLogger(); + registerDevToolsEventLogger('extension'); function initBridgeAndStore() { const port = chrome.runtime.connect({ diff --git a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-fb.js b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-fb.js index f0278aa080..50eb47967b 100644 --- a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-fb.js +++ b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-fb.js @@ -16,7 +16,7 @@ export const enableProfilerChangedHookIndices = true; export const isInternalFacebookBuild = true; export const enableNamedHooksFeature = true; -export const enableLogger = false; +export const enableLogger = true; export const consoleManagedByDevToolsDuringStrictMode = false; /************************************************************************ diff --git a/packages/react-devtools-extensions/src/registerExtensionsEventLogger.js b/packages/react-devtools-shared/src/registerDevToolsEventLogger.js similarity index 63% rename from packages/react-devtools-extensions/src/registerExtensionsEventLogger.js rename to packages/react-devtools-shared/src/registerDevToolsEventLogger.js index 90917ef3a1..d475bc3e7d 100644 --- a/packages/react-devtools-extensions/src/registerExtensionsEventLogger.js +++ b/packages/react-devtools-shared/src/registerDevToolsEventLogger.js @@ -14,38 +14,39 @@ import {enableLogger} from 'react-devtools-feature-flags'; let loggingIFrame = null; let missedEvents = []; -function logEvent(event: LogEvent) { - if (enableLogger) { - if (loggingIFrame != null) { - loggingIFrame.contentWindow.postMessage( - { - source: 'react-devtools-logging', - event: event, - context: { - surface: 'extension', + +export function registerDevToolsEventLogger(surface: string) { + function logEvent(event: LogEvent) { + if (enableLogger) { + if (loggingIFrame != null) { + loggingIFrame.contentWindow.postMessage( + { + source: 'react-devtools-logging', + event: event, + context: { + surface, + }, }, - }, - '*', - ); - } else { - missedEvents.push(event); + '*', + ); + } else { + missedEvents.push(event); + } } } -} -function handleLoggingIFrameLoaded(iframe) { - if (loggingIFrame != null) { - return; + function handleLoggingIFrameLoaded(iframe) { + if (loggingIFrame != null) { + return; + } + + loggingIFrame = iframe; + if (missedEvents.length > 0) { + missedEvents.forEach(logEvent); + missedEvents = []; + } } - loggingIFrame = iframe; - if (missedEvents.length > 0) { - missedEvents.forEach(logEvent); - missedEvents = []; - } -} - -export function registerExtensionsEventLogger() { // If logger is enabled, register a logger that captures logged events // and render iframe where the logged events will be reported to if (enableLogger) {