[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.
facebook · Sep 9, 2024 · 2283d72 · 2283d72
1 parent 3cac8cd
commit 2283d72
Show file tree

Hide file tree

Showing 18 changed files with 120 additions and 0 deletions.
diff --git a/packages/react-client/src/ReactFlightClient.js b/packages/react-client/src/ReactFlightClient.js
@@ -58,6 +58,8 @@ import {
   createStringDecoder,
   prepareDestinationForModule,
   bindToConsole,
+  rendererVersion,
+  rendererPackageName,
 } from './ReactFlightClientConfig';
 
 import {createBoundServerReference} from './ReactFlightReplyClient';
@@ -76,6 +78,10 @@ import getComponentNameFromType from 'shared/getComponentNameFromType';
 
 import {getOwnerStackByComponentInfoInDev} from 'shared/ReactComponentInfoStack';
 
+import {injectInternals} from './ReactFlightClientDevToolsHook';
+
+import ReactVersion from 'shared/ReactVersion';
+
 import isArray from 'shared/isArray';
 
 import * as React from 'react';
@@ -2921,3 +2927,21 @@ export function close(response: Response): void {
   // ref count of pending chunks.
   reportGlobalError(response, new Error('Connection closed.'));
 }
+
+function getCurrentOwnerInDEV(): null | ReactComponentInfo {
+  return currentOwnerInDEV;
+}
+
+export function injectIntoDevTools(): boolean {
+  const internals: Object = {
+    bundleType: __DEV__ ? 1 : 0, // Might add PROFILE later.
+    version: rendererVersion,
+    rendererPackageName: rendererPackageName,
+    currentDispatcherRef: ReactSharedInternals,
+    // Enables DevTools to detect reconciler version rather than renderer version
+    // which may not match for third party renderers.
+    reconcilerVersion: ReactVersion,
+    getCurrentComponentInfo: getCurrentOwnerInDEV,
+  };
+  return injectInternals(internals);
+}
diff --git a/packages/react-client/src/ReactFlightClientDevToolsHook.js b/packages/react-client/src/ReactFlightClientDevToolsHook.js
@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+declare const __REACT_DEVTOOLS_GLOBAL_HOOK__: Object | void;
+
+export function injectInternals(internals: Object): boolean {
+  if (typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ === 'undefined') {
+    // No DevTools
+    return false;
+  }
+  const hook = __REACT_DEVTOOLS_GLOBAL_HOOK__;
+  if (hook.isDisabled) {
+    // This isn't a real property on the hook, but it can be set to opt out
+    // of DevTools integration and associated warnings and logs.
+    // https://github.com/facebook/react/issues/3877
+    return true;
+  }
+  if (!hook.supportsFlight) {
+    // DevTools exists, even though it doesn't support Flight.
+    return true;
+  }
+  try {
+    hook.inject(internals);
+  } catch (err) {
+    // Catch all errors because it is unsafe to throw during initialization.
+    if (__DEV__) {
+      console.error('React instrumentation encountered an error: %s.', err);
+    }
+  }
+  if (hook.checkDCE) {
+    // This is the real DevTools.
+    return true;
+  } else {
+    // This is likely a hook installed by Fast Refresh runtime.
+    return false;
+  }
+}
diff --git a/packages/react-client/src/forks/ReactFlightClientConfig.custom.js b/packages/react-client/src/forks/ReactFlightClientConfig.custom.js
@@ -49,3 +49,6 @@ export const readPartialStringChunk = $$$config.readPartialStringChunk;
 export const readFinalStringChunk = $$$config.readFinalStringChunk;
 
 export const bindToConsole = $$$config.bindToConsole;
+
+export const rendererVersion = $$$config.rendererVersion;
+export const rendererPackageName = $$$config.rendererPackageName;
diff --git a/packages/react-client/src/forks/ReactFlightClientConfig.dom-browser-esm.js b/packages/react-client/src/forks/ReactFlightClientConfig.dom-browser-esm.js
@@ -7,6 +7,9 @@
  * @flow
  */
 
+export {default as rendererVersion} from 'shared/ReactVersion';
+export const rendererPackageName = 'react-server-dom-esm';
+
 export * from 'react-client/src/ReactFlightClientStreamConfigWeb';
 export * from 'react-client/src/ReactClientConsoleConfigBrowser';
 export * from 'react-server-dom-esm/src/client/ReactFlightClientConfigBundlerESM';

diff --git a/packages/react-client/src/forks/ReactFlightClientConfig.dom-browser-turbopack.js b/packages/react-client/src/forks/ReactFlightClientConfig.dom-browser-turbopack.js
@@ -7,6 +7,9 @@
  * @flow
  */
 
+export {default as rendererVersion} from 'shared/ReactVersion';
+export const rendererPackageName = 'react-server-dom-turbopack';
+
 export * from 'react-client/src/ReactFlightClientStreamConfigWeb';
 export * from 'react-client/src/ReactClientConsoleConfigBrowser';
 export * from 'react-server-dom-turbopack/src/client/ReactFlightClientConfigBundlerTurbopack';

diff --git a/packages/react-client/src/forks/ReactFlightClientConfig.dom-browser.js b/packages/react-client/src/forks/ReactFlightClientConfig.dom-browser.js
@@ -7,6 +7,9 @@
  * @flow
  */
 
+export {default as rendererVersion} from 'shared/ReactVersion';
+export const rendererPackageName = 'react-server-dom-webpack';
+
 export * from 'react-client/src/ReactFlightClientStreamConfigWeb';
 export * from 'react-client/src/ReactClientConsoleConfigBrowser';
 export * from 'react-server-dom-webpack/src/client/ReactFlightClientConfigBundlerWebpack';

diff --git a/packages/react-client/src/forks/ReactFlightClientConfig.dom-bun.js b/packages/react-client/src/forks/ReactFlightClientConfig.dom-bun.js
@@ -7,6 +7,9 @@
  * @flow
  */
 
+export {default as rendererVersion} from 'shared/ReactVersion';
+export const rendererPackageName = 'react-server-dom-bun';
+
 export * from 'react-client/src/ReactFlightClientStreamConfigWeb';
 export * from 'react-client/src/ReactClientConsoleConfigPlain';
 export * from 'react-dom-bindings/src/shared/ReactFlightClientConfigDOM';

diff --git a/packages/react-client/src/forks/ReactFlightClientConfig.dom-edge-turbopack.js b/packages/react-client/src/forks/ReactFlightClientConfig.dom-edge-turbopack.js
@@ -7,6 +7,9 @@
  * @flow
  */
 
+export {default as rendererVersion} from 'shared/ReactVersion';
+export const rendererPackageName = 'react-server-dom-turbopack';
+
 export * from 'react-client/src/ReactFlightClientStreamConfigWeb';
 export * from 'react-client/src/ReactClientConsoleConfigServer';
 export * from 'react-server-dom-turbopack/src/client/ReactFlightClientConfigBundlerTurbopack';

diff --git a/packages/react-client/src/forks/ReactFlightClientConfig.dom-edge-webpack.js b/packages/react-client/src/forks/ReactFlightClientConfig.dom-edge-webpack.js
@@ -7,6 +7,9 @@
  * @flow
  */
 
+export {default as rendererVersion} from 'shared/ReactVersion';
+export const rendererPackageName = 'react-server-dom-webpack';
+
 export * from 'react-client/src/ReactFlightClientStreamConfigWeb';
 export * from 'react-client/src/ReactClientConsoleConfigServer';
 export * from 'react-server-dom-webpack/src/client/ReactFlightClientConfigBundlerWebpack';

diff --git a/packages/react-client/src/forks/ReactFlightClientConfig.dom-legacy.js b/packages/react-client/src/forks/ReactFlightClientConfig.dom-legacy.js
@@ -7,6 +7,9 @@
  * @flow
  */
 
+export {default as rendererVersion} from 'shared/ReactVersion';
+export const rendererPackageName = 'not-used';
+
 export * from 'react-client/src/ReactFlightClientStreamConfigWeb';
 export * from 'react-client/src/ReactClientConsoleConfigBrowser';
 

diff --git a/packages/react-client/src/forks/ReactFlightClientConfig.dom-node-esm.js b/packages/react-client/src/forks/ReactFlightClientConfig.dom-node-esm.js
@@ -7,6 +7,9 @@
  * @flow
  */
 
+export {default as rendererVersion} from 'shared/ReactVersion';
+export const rendererPackageName = 'react-server-dom-esm';
+
 export * from 'react-client/src/ReactFlightClientStreamConfigNode';
 export * from 'react-client/src/ReactClientConsoleConfigServer';
 export * from 'react-server-dom-esm/src/client/ReactFlightClientConfigBundlerESM';

diff --git a/packages/react-client/src/forks/ReactFlightClientConfig.dom-node-turbopack.js b/packages/react-client/src/forks/ReactFlightClientConfig.dom-node-turbopack.js
@@ -7,6 +7,9 @@
  * @flow
  */
 
+export {default as rendererVersion} from 'shared/ReactVersion';
+export const rendererPackageName = 'react-server-dom-turbopack';
+
 export * from 'react-client/src/ReactFlightClientStreamConfigNode';
 export * from 'react-client/src/ReactClientConsoleConfigServer';
 export * from 'react-server-dom-turbopack/src/client/ReactFlightClientConfigBundlerTurbopack';

diff --git a/packages/react-client/src/forks/ReactFlightClientConfig.dom-node-webpack.js b/packages/react-client/src/forks/ReactFlightClientConfig.dom-node-webpack.js
@@ -6,6 +6,8 @@
  *
  * @flow
  */
+export {default as rendererVersion} from 'shared/ReactVersion';
+export const rendererPackageName = 'react-server-dom-webpack';
 
 export * from 'react-client/src/ReactFlightClientStreamConfigNode';
 export * from 'react-client/src/ReactClientConsoleConfigServer';

diff --git a/packages/react-client/src/forks/ReactFlightClientConfig.dom-node.js b/packages/react-client/src/forks/ReactFlightClientConfig.dom-node.js
@@ -7,6 +7,9 @@
  * @flow
  */
 
+export {default as rendererVersion} from 'shared/ReactVersion';
+export const rendererPackageName = 'react-server-dom-webpack';
+
 export * from 'react-client/src/ReactFlightClientStreamConfigNode';
 export * from 'react-client/src/ReactClientConsoleConfigServer';
 export * from 'react-server-dom-webpack/src/client/ReactFlightClientConfigBundlerNode';

diff --git a/packages/react-client/src/forks/ReactFlightClientConfig.markup.js b/packages/react-client/src/forks/ReactFlightClientConfig.markup.js
@@ -7,6 +7,9 @@
  * @flow
  */
 
+export {default as rendererVersion} from 'shared/ReactVersion';
+export const rendererPackageName = 'react-markup';
+
 import type {Thenable} from 'shared/ReactTypes';
 
 export * from 'react-markup/src/ReactMarkupLegacyClientStreamConfig.js';

diff --git a/packages/react-server-dom-esm/src/client/ReactFlightDOMClientBrowser.js b/packages/react-server-dom-esm/src/client/ReactFlightDOMClientBrowser.js
@@ -22,6 +22,7 @@ import {
   reportGlobalError,
   processBinaryChunk,
   close,
+  injectIntoDevTools,
 } from 'react-client/src/ReactFlightClient';
 
 import {
@@ -143,3 +144,7 @@ export {
   encodeReply,
   createServerReference,
 };
+
+if (__DEV__) {
+  injectIntoDevTools();
+}
diff --git a/packages/react-server-dom-turbopack/src/client/ReactFlightDOMClientBrowser.js b/packages/react-server-dom-turbopack/src/client/ReactFlightDOMClientBrowser.js
@@ -22,6 +22,7 @@ import {
   reportGlobalError,
   processBinaryChunk,
   close,
+  injectIntoDevTools,
 } from 'react-client/src/ReactFlightClient';
 
 import {
@@ -142,3 +143,7 @@ export {
   encodeReply,
   createServerReference,
 };
+
+if (__DEV__) {
+  injectIntoDevTools();
+}
diff --git a/packages/react-server-dom-webpack/src/client/ReactFlightDOMClientBrowser.js b/packages/react-server-dom-webpack/src/client/ReactFlightDOMClientBrowser.js
@@ -22,6 +22,7 @@ import {
   reportGlobalError,
   processBinaryChunk,
   close,
+  injectIntoDevTools,
 } from 'react-client/src/ReactFlightClient';
 
 import {
@@ -142,3 +143,7 @@ export {
   encodeReply,
   createServerReference,
 };
+
+if (__DEV__) {
+  injectIntoDevTools();
+}