[Flight] Inject Client Into DevTools (#30910)
Stacked on #30906. Injects the Flight Client into the DevTools hook if it `supportsFlight`. This only injects in DEV. We could inject it in prod too but so far the only feature this exposes is only available in DEV anyway. I also only call `injectIntoDevTools` in the browser builds since we don't really support DevTools on the server anyway. The main purpose of this for now is so that DevTools can track the Server Component owner of replayed logs. This lets us add owner stacks where `console.createTask` is not natively supported (like Firefox). It also lets us associate the log with the Server Component in the Component tree #30905.
Sebastian Markbåge committed
Sep 9, 2024 at 15:11 UTC
2283d7204cfc200aa78b674d086a481c9a983007
18 files changed
+120
packages/react-client/src/ReactFlightClient.js
+24
@@ -58,6 +58,8 @@ import {
58
createStringDecoder,
59
prepareDestinationForModule,
60
bindToConsole,
61
+ rendererVersion,
62
+ rendererPackageName,
63
} from './ReactFlightClientConfig';
64
65
import {createBoundServerReference} from './ReactFlightReplyClient';
@@ -76,6 +78,10 @@ import getComponentNameFromType from 'shared/getComponentNameFromType';
78
79
import {getOwnerStackByComponentInfoInDev} from 'shared/ReactComponentInfoStack';
80
81
+import {injectInternals} from './ReactFlightClientDevToolsHook';
82
+
83
+import ReactVersion from 'shared/ReactVersion';
84
+
85
import isArray from 'shared/isArray';
86
87
import * as React from 'react';
@@ -2921,3 +2927,21 @@ export function close(response: Response): void {
2927
// ref count of pending chunks.
2928
reportGlobalError(response, new Error('Connection closed.'));
2929
}
2930
+
2931
+function getCurrentOwnerInDEV(): null | ReactComponentInfo {
2932
+ return currentOwnerInDEV;
2933
+}
2934
+
2935
+export function injectIntoDevTools(): boolean {
2936
+ const internals: Object = {
2937
+ bundleType: __DEV__ ? 1 : 0, // Might add PROFILE later.
2938
+ version: rendererVersion,
2939
+ rendererPackageName: rendererPackageName,
2940
+ currentDispatcherRef: ReactSharedInternals,
2941
+ // Enables DevTools to detect reconciler version rather than renderer version
2942
+ // which may not match for third party renderers.
2943
+ reconcilerVersion: ReactVersion,
2944
+ getCurrentComponentInfo: getCurrentOwnerInDEV,
2945
+ };
2946
+ return injectInternals(internals);
2947
+}
packages/react-client/src/ReactFlightClientDevToolsHook.js
new
+43
@@ -0,0 +1,43 @@
1
+/**
2
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
3
+ *
4
+ * This source code is licensed under the MIT license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ *
7
+ * @flow
8
+ */
9
+
10
+declare const __REACT_DEVTOOLS_GLOBAL_HOOK__: Object | void;
11
+
12
+export function injectInternals(internals: Object): boolean {
13
+ if (typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ === 'undefined') {
14
+ // No DevTools
15
+ return false;
16
+ }
17
+ const hook = __REACT_DEVTOOLS_GLOBAL_HOOK__;
18
+ if (hook.isDisabled) {
19
+ // This isn't a real property on the hook, but it can be set to opt out
20
+ // of DevTools integration and associated warnings and logs.
21
+ // https://github.com/facebook/react/issues/3877
22
+ return true;
23
+ }
24
+ if (!hook.supportsFlight) {
25
+ // DevTools exists, even though it doesn't support Flight.
26
+ return true;
27
+ }
28
+ try {
29
+ hook.inject(internals);
30
+ } catch (err) {
31
+ // Catch all errors because it is unsafe to throw during initialization.
32
+ if (__DEV__) {
33
+ console.error('React instrumentation encountered an error: %s.', err);
34
+ }
35
+ }
36
+ if (hook.checkDCE) {
37
+ // This is the real DevTools.
38
+ return true;
39
+ } else {
40
+ // This is likely a hook installed by Fast Refresh runtime.
41
+ return false;
42
+ }
43
+}
packages/react-client/src/forks/ReactFlightClientConfig.custom.js
+3
@@ -49,3 +49,6 @@ export const readPartialStringChunk = $$$config.readPartialStringChunk;
49
export const readFinalStringChunk = $$$config.readFinalStringChunk;
50
51
export const bindToConsole = $$$config.bindToConsole;
52
+
53
+export const rendererVersion = $$$config.rendererVersion;
54
+export const rendererPackageName = $$$config.rendererPackageName;
packages/react-client/src/forks/ReactFlightClientConfig.dom-browser-esm.js
+3
@@ -7,6 +7,9 @@
7
* @flow
8
*/
9
10
+export {default as rendererVersion} from 'shared/ReactVersion';
11
+export const rendererPackageName = 'react-server-dom-esm';
12
+
13
export * from 'react-client/src/ReactFlightClientStreamConfigWeb';
14
export * from 'react-client/src/ReactClientConsoleConfigBrowser';
15
export * from 'react-server-dom-esm/src/client/ReactFlightClientConfigBundlerESM';
packages/react-client/src/forks/ReactFlightClientConfig.dom-browser-turbopack.js
+3
@@ -7,6 +7,9 @@
7
* @flow
8
*/
9
10
+export {default as rendererVersion} from 'shared/ReactVersion';
11
+export const rendererPackageName = 'react-server-dom-turbopack';
12
+
13
export * from 'react-client/src/ReactFlightClientStreamConfigWeb';
14
export * from 'react-client/src/ReactClientConsoleConfigBrowser';
15
export * from 'react-server-dom-turbopack/src/client/ReactFlightClientConfigBundlerTurbopack';
packages/react-client/src/forks/ReactFlightClientConfig.dom-browser.js
+3
@@ -7,6 +7,9 @@
7
* @flow
8
*/
9
10
+export {default as rendererVersion} from 'shared/ReactVersion';
11
+export const rendererPackageName = 'react-server-dom-webpack';
12
+
13
export * from 'react-client/src/ReactFlightClientStreamConfigWeb';
14
export * from 'react-client/src/ReactClientConsoleConfigBrowser';
15
export * from 'react-server-dom-webpack/src/client/ReactFlightClientConfigBundlerWebpack';
packages/react-client/src/forks/ReactFlightClientConfig.dom-bun.js
+3
@@ -7,6 +7,9 @@
7
* @flow
8
*/
9
10
+export {default as rendererVersion} from 'shared/ReactVersion';
11
+export const rendererPackageName = 'react-server-dom-bun';
12
+
13
export * from 'react-client/src/ReactFlightClientStreamConfigWeb';
14
export * from 'react-client/src/ReactClientConsoleConfigPlain';
15
export * from 'react-dom-bindings/src/shared/ReactFlightClientConfigDOM';
packages/react-client/src/forks/ReactFlightClientConfig.dom-edge-turbopack.js
+3
@@ -7,6 +7,9 @@
7
* @flow
8
*/
9
10
+export {default as rendererVersion} from 'shared/ReactVersion';
11
+export const rendererPackageName = 'react-server-dom-turbopack';
12
+
13
export * from 'react-client/src/ReactFlightClientStreamConfigWeb';
14
export * from 'react-client/src/ReactClientConsoleConfigServer';
15
export * from 'react-server-dom-turbopack/src/client/ReactFlightClientConfigBundlerTurbopack';
packages/react-client/src/forks/ReactFlightClientConfig.dom-edge-webpack.js
+3
@@ -7,6 +7,9 @@
7
* @flow
8
*/
9
10
+export {default as rendererVersion} from 'shared/ReactVersion';
11
+export const rendererPackageName = 'react-server-dom-webpack';
12
+
13
export * from 'react-client/src/ReactFlightClientStreamConfigWeb';
14
export * from 'react-client/src/ReactClientConsoleConfigServer';
15
export * from 'react-server-dom-webpack/src/client/ReactFlightClientConfigBundlerWebpack';
packages/react-client/src/forks/ReactFlightClientConfig.dom-legacy.js
+3
@@ -7,6 +7,9 @@
7
* @flow
8
*/
9
10
+export {default as rendererVersion} from 'shared/ReactVersion';
11
+export const rendererPackageName = 'not-used';
12
+
13
export * from 'react-client/src/ReactFlightClientStreamConfigWeb';
14
export * from 'react-client/src/ReactClientConsoleConfigBrowser';
15
packages/react-client/src/forks/ReactFlightClientConfig.dom-node-esm.js
+3
@@ -7,6 +7,9 @@
7
* @flow
8
*/
9
10
+export {default as rendererVersion} from 'shared/ReactVersion';
11
+export const rendererPackageName = 'react-server-dom-esm';
12
+
13
export * from 'react-client/src/ReactFlightClientStreamConfigNode';
14
export * from 'react-client/src/ReactClientConsoleConfigServer';
15
export * from 'react-server-dom-esm/src/client/ReactFlightClientConfigBundlerESM';
packages/react-client/src/forks/ReactFlightClientConfig.dom-node-turbopack.js
+3
@@ -7,6 +7,9 @@
7
* @flow
8
*/
9
10
+export {default as rendererVersion} from 'shared/ReactVersion';
11
+export const rendererPackageName = 'react-server-dom-turbopack';
12
+
13
export * from 'react-client/src/ReactFlightClientStreamConfigNode';
14
export * from 'react-client/src/ReactClientConsoleConfigServer';
15
export * from 'react-server-dom-turbopack/src/client/ReactFlightClientConfigBundlerTurbopack';
packages/react-client/src/forks/ReactFlightClientConfig.dom-node-webpack.js
+2
@@ -6,6 +6,8 @@
6
*
7
* @flow
8
*/
9
+export {default as rendererVersion} from 'shared/ReactVersion';
10
+export const rendererPackageName = 'react-server-dom-webpack';
11
12
export * from 'react-client/src/ReactFlightClientStreamConfigNode';
13
export * from 'react-client/src/ReactClientConsoleConfigServer';
packages/react-client/src/forks/ReactFlightClientConfig.dom-node.js
+3
@@ -7,6 +7,9 @@
7
* @flow
8
*/
9
10
+export {default as rendererVersion} from 'shared/ReactVersion';
11
+export const rendererPackageName = 'react-server-dom-webpack';
12
+
13
export * from 'react-client/src/ReactFlightClientStreamConfigNode';
14
export * from 'react-client/src/ReactClientConsoleConfigServer';
15
export * from 'react-server-dom-webpack/src/client/ReactFlightClientConfigBundlerNode';
packages/react-client/src/forks/ReactFlightClientConfig.markup.js
+3
@@ -7,6 +7,9 @@
7
* @flow
8
*/
9
10
+export {default as rendererVersion} from 'shared/ReactVersion';
11
+export const rendererPackageName = 'react-markup';
12
+
13
import type {Thenable} from 'shared/ReactTypes';
14
15
export * from 'react-markup/src/ReactMarkupLegacyClientStreamConfig.js';
packages/react-server-dom-esm/src/client/ReactFlightDOMClientBrowser.js
+5
@@ -22,6 +22,7 @@ import {
22
reportGlobalError,
23
processBinaryChunk,
24
close,
25
+ injectIntoDevTools,
26
} from 'react-client/src/ReactFlightClient';
27
28
import {
@@ -143,3 +144,7 @@ export {
144
encodeReply,
145
createServerReference,
146
};
147
+
148
+if (__DEV__) {
149
+ injectIntoDevTools();
150
+}
packages/react-server-dom-turbopack/src/client/ReactFlightDOMClientBrowser.js
+5
@@ -22,6 +22,7 @@ import {
22
reportGlobalError,
23
processBinaryChunk,
24
close,
25
+ injectIntoDevTools,
26
} from 'react-client/src/ReactFlightClient';
27
28
import {
@@ -142,3 +143,7 @@ export {
143
encodeReply,
144
createServerReference,
145
};
146
+
147
+if (__DEV__) {
148
+ injectIntoDevTools();
149
+}
packages/react-server-dom-webpack/src/client/ReactFlightDOMClientBrowser.js
+5
@@ -22,6 +22,7 @@ import {
22
reportGlobalError,
23
processBinaryChunk,
24
close,
25
+ injectIntoDevTools,
26
} from 'react-client/src/ReactFlightClient';
27
28
import {
@@ -142,3 +143,7 @@ export {
143
encodeReply,
144
createServerReference,
145
};
146
+
147
+if (__DEV__) {
148
+ injectIntoDevTools();
149
+}