[DevTools] Register logger for standalone DevTools (#22524)
Juan committed
Oct 8, 2021 at 08:38 UTC
5fa4d79b00988f354073bc27313363dd5cce9cd3
5 files changed
+42
-30
packages/react-devtools-core/src/standalone.js
+10
-2
@@ -23,6 +23,7 @@ import {
23
getShowInlineWarningsAndErrors,
24
getHideConsoleLogsInStrictMode,
25
} from 'react-devtools-shared/src/utils';
26
+import {registerDevToolsEventLogger} from 'react-devtools-shared/src/registerDevToolsEventLogger';
27
import {Server} from 'ws';
28
import {join} from 'path';
29
import {readFileSync} from 'fs';
@@ -255,16 +256,23 @@ function connectToSocket(socket: WebSocket) {
256
};
257
}
258
258
-type ServerOptions = {
259
+type ServerOptions = {|
260
key?: string,
261
cert?: string,
261
-};
262
+|};
263
+
264
+type LoggerOptions = {|
265
+ surface?: ?string,
266
+|};
267
268
function startServer(
269
port?: number = 8097,
270
host?: string = 'localhost',
271
httpsOptions?: ServerOptions,
272
+ loggerOptions?: LoggerOptions,
273
) {
274
+ registerDevToolsEventLogger(loggerOptions?.surface ?? 'standalone');
275
+
276
const useHttps = !!httpsOptions;
277
const httpServer = useHttps
278
? require('https').createServer(httpsOptions)
packages/react-devtools-core/webpack.standalone.js
+3
@@ -30,6 +30,8 @@ const __DEV__ = NODE_ENV === 'development';
30
31
const DEVTOOLS_VERSION = getVersionString();
32
33
+const LOGGING_URL = process.env.LOGGING_URL || null;
34
+
35
const featureFlagTarget =
36
process.env.FEATURE_FLAG_TARGET || 'core/standalone-oss';
37
@@ -82,6 +84,7 @@ module.exports = {
84
'process.env.DEVTOOLS_PACKAGE': `"react-devtools-core"`,
85
'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
86
'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
87
+ 'process.env.LOGGING_URL': `"${LOGGING_URL}"`,
88
'process.env.NODE_ENV': `"${NODE_ENV}"`,
89
'process.env.DARK_MODE_DIMMED_WARNING_COLOR': `"${DARK_MODE_DIMMED_WARNING_COLOR}"`,
90
'process.env.DARK_MODE_DIMMED_ERROR_COLOR': `"${DARK_MODE_DIMMED_ERROR_COLOR}"`,
packages/react-devtools-extensions/src/main.js
+2
-2
@@ -6,6 +6,7 @@ import Bridge from 'react-devtools-shared/src/bridge';
6
import Store from 'react-devtools-shared/src/devtools/store';
7
import {getBrowserName, getBrowserTheme} from './utils';
8
import {LOCAL_STORAGE_TRACE_UPDATES_ENABLED_KEY} from 'react-devtools-shared/src/constants';
9
+import {registerDevToolsEventLogger} from 'react-devtools-shared/src/registerDevToolsEventLogger';
10
import {
11
getAppendComponentStack,
12
getBreakOnConsoleErrors,
@@ -20,7 +21,6 @@ import {
21
} from 'react-devtools-shared/src/storage';
22
import DevTools from 'react-devtools-shared/src/devtools/views/DevTools';
23
import {__DEBUG__} from 'react-devtools-shared/src/constants';
23
-import {registerExtensionsEventLogger} from './registerExtensionsEventLogger';
24
import {logEvent} from 'react-devtools-shared/src/Logger';
25
26
const LOCAL_STORAGE_SUPPORTS_PROFILING_KEY =
@@ -89,7 +89,7 @@ function createPanelIfReactLoaded() {
89
90
const tabId = chrome.devtools.inspectedWindow.tabId;
91
92
- registerExtensionsEventLogger();
92
+ registerDevToolsEventLogger('extension');
93
94
function initBridgeAndStore() {
95
const port = chrome.runtime.connect({
packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-fb.js
+1
-1
@@ -16,7 +16,7 @@
16
export const enableProfilerChangedHookIndices = true;
17
export const isInternalFacebookBuild = true;
18
export const enableNamedHooksFeature = true;
19
-export const enableLogger = false;
19
+export const enableLogger = true;
20
export const consoleManagedByDevToolsDuringStrictMode = false;
21
22
/************************************************************************
packages/react-devtools-shared/src/registerDevToolsEventLogger.js
renamed
+26
-25
@@ -14,38 +14,39 @@ import {enableLogger} from 'react-devtools-feature-flags';
14
15
let loggingIFrame = null;
16
let missedEvents = [];
17
-function logEvent(event: LogEvent) {
18
- if (enableLogger) {
19
- if (loggingIFrame != null) {
20
- loggingIFrame.contentWindow.postMessage(
21
- {
22
- source: 'react-devtools-logging',
23
- event: event,
24
- context: {
25
- surface: 'extension',
17
+
18
+export function registerDevToolsEventLogger(surface: string) {
19
+ function logEvent(event: LogEvent) {
20
+ if (enableLogger) {
21
+ if (loggingIFrame != null) {
22
+ loggingIFrame.contentWindow.postMessage(
23
+ {
24
+ source: 'react-devtools-logging',
25
+ event: event,
26
+ context: {
27
+ surface,
28
+ },
29
},
27
- },
28
- '*',
29
- );
30
- } else {
31
- missedEvents.push(event);
30
+ '*',
31
+ );
32
+ } else {
33
+ missedEvents.push(event);
34
+ }
35
}
36
}
34
-}
37
36
-function handleLoggingIFrameLoaded(iframe) {
37
- if (loggingIFrame != null) {
38
- return;
39
- }
38
+ function handleLoggingIFrameLoaded(iframe) {
39
+ if (loggingIFrame != null) {
40
+ return;
41
+ }
42
41
- loggingIFrame = iframe;
42
- if (missedEvents.length > 0) {
43
- missedEvents.forEach(logEvent);
44
- missedEvents = [];
43
+ loggingIFrame = iframe;
44
+ if (missedEvents.length > 0) {
45
+ missedEvents.forEach(logEvent);
46
+ missedEvents = [];
47
+ }
48
}
46
-}
49
48
-export function registerExtensionsEventLogger() {
50
// If logger is enabled, register a logger that captures logged events
51
// and render iframe where the logged events will be reported to
52
if (enableLogger) {