Skip to content

Commit

Permalink
feat[react-devtools]: add settings to global hook object (#30564)
Browse files Browse the repository at this point in the history 
Right now we are patching console 2 times: when hook is installed
(before page is loaded) and when backend is connected. Because of this,
even if user had `appendComponentStack` setting enabled, all emitted
error and warning logs are not going to have component stacks appended.
They also won't have component stacks appended retroactively when user
opens browser DevTools (this is when frontend is initialized and
connects to backend).

This behavior adds potential race conditions with LogBox in React
Native, and also unpredictable to the user, because in order to get
component stacks logged you have to open browser DevTools, but by the
time you do it, error or warning log was already emitted.

To solve this, we are going to only patch console in the hook object,
because it is guaranteed to load even before React. Settings are going
to be synchronized with the hook via Bridge, and React DevTools Backend
Host (React Native or browser extension shell) will be responsible for
persisting these settings across the session, this is going to be
implemented in a separate PR.

DiffTrain build for [5e83d9a](5e83d9a)
  • Loading branch information
@hoxyq
hoxyq committed Sep 18, 2024
1 parent c0925f3 commit 6f75707
Show file tree
Hide file tree
Showing 34 changed files with 181 additions and 177 deletions.
2 changes: 1 addition & 1 deletion compiled/facebook-www/REVISION
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
5dcb009760160c085496e943f76090d98528f971
5e83d9ab3b3f88853591dff43cd70ee4e5c90c5d
2 changes: 1 addition & 1 deletion compiled/facebook-www/REVISION_TRANSFORMS
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
5dcb009760160c085496e943f76090d98528f971
5e83d9ab3b3f88853591dff43cd70ee4e5c90c5d
2 changes: 1 addition & 1 deletion compiled/facebook-www/React-dev.classic.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2000,7 +2000,7 @@ __DEV__ &&
exports.useTransition = function () {
return resolveDispatcher().useTransition();
};
exports.version = "19.0.0-www-classic-5dcb0097-20240918";
exports.version = "19.0.0-www-classic-5e83d9ab-20240918";
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
"function" ===
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&
Expand Down
2 changes: 1 addition & 1 deletion compiled/facebook-www/React-dev.modern.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1980,7 +1980,7 @@ __DEV__ &&
exports.useTransition = function () {
return resolveDispatcher().useTransition();
};
exports.version = "19.0.0-www-modern-5dcb0097-20240918";
exports.version = "19.0.0-www-modern-5e83d9ab-20240918";
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
"function" ===
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&
Expand Down
2 changes: 1 addition & 1 deletion compiled/facebook-www/React-prod.classic.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -665,4 +665,4 @@ exports.useSyncExternalStore = function (
exports.useTransition = function () {
return ReactSharedInternals.H.useTransition();
};
exports.version = "19.0.0-www-classic-5dcb0097-20240918";
exports.version = "19.0.0-www-classic-5e83d9ab-20240918";
2 changes: 1 addition & 1 deletion compiled/facebook-www/React-prod.modern.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -665,4 +665,4 @@ exports.useSyncExternalStore = function (
exports.useTransition = function () {
return ReactSharedInternals.H.useTransition();
};
exports.version = "19.0.0-www-modern-5dcb0097-20240918";
exports.version = "19.0.0-www-modern-5e83d9ab-20240918";
2 changes: 1 addition & 1 deletion compiled/facebook-www/React-profiling.classic.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -669,7 +669,7 @@ exports.useSyncExternalStore = function (
exports.useTransition = function () {
return ReactSharedInternals.H.useTransition();
};
exports.version = "19.0.0-www-classic-5dcb0097-20240918";
exports.version = "19.0.0-www-classic-5e83d9ab-20240918";
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
"function" ===
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&
Expand Down
2 changes: 1 addition & 1 deletion compiled/facebook-www/React-profiling.modern.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -669,7 +669,7 @@ exports.useSyncExternalStore = function (
exports.useTransition = function () {
return ReactSharedInternals.H.useTransition();
};
exports.version = "19.0.0-www-modern-5dcb0097-20240918";
exports.version = "19.0.0-www-modern-5e83d9ab-20240918";
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
"function" ===
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&
Expand Down
6 changes: 3 additions & 3 deletions compiled/facebook-www/ReactART-dev.classic.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17026,11 +17026,11 @@ __DEV__ &&
(function () {
var internals = {
bundleType: 1,
version: "19.0.0-www-classic-5dcb0097-20240918",
version: "19.0.0-www-classic-5e83d9ab-20240918",
rendererPackageName: "react-art",
currentDispatcherRef: ReactSharedInternals,
findFiberByHostInstance: getInstanceFromNode,
reconcilerVersion: "19.0.0-www-classic-5dcb0097-20240918"
reconcilerVersion: "19.0.0-www-classic-5e83d9ab-20240918"
};
internals.overrideHookState = overrideHookState;
internals.overrideHookStateDeletePath = overrideHookStateDeletePath;
Expand Down Expand Up @@ -17064,7 +17064,7 @@ __DEV__ &&
exports.Shape = Shape;
exports.Surface = Surface;
exports.Text = Text;
exports.version = "19.0.0-www-classic-5dcb0097-20240918";
exports.version = "19.0.0-www-classic-5e83d9ab-20240918";
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
"function" ===
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&
Expand Down
6 changes: 3 additions & 3 deletions compiled/facebook-www/ReactART-dev.modern.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16472,11 +16472,11 @@ __DEV__ &&
(function () {
var internals = {
bundleType: 1,
version: "19.0.0-www-modern-5dcb0097-20240918",
version: "19.0.0-www-modern-5e83d9ab-20240918",
rendererPackageName: "react-art",
currentDispatcherRef: ReactSharedInternals,
findFiberByHostInstance: getInstanceFromNode,
reconcilerVersion: "19.0.0-www-modern-5dcb0097-20240918"
reconcilerVersion: "19.0.0-www-modern-5e83d9ab-20240918"
};
internals.overrideHookState = overrideHookState;
internals.overrideHookStateDeletePath = overrideHookStateDeletePath;
Expand Down Expand Up @@ -16510,7 +16510,7 @@ __DEV__ &&
exports.Shape = Shape;
exports.Surface = Surface;
exports.Text = Text;
exports.version = "19.0.0-www-modern-5dcb0097-20240918";
exports.version = "19.0.0-www-modern-5e83d9ab-20240918";
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
"function" ===
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&
Expand Down
6 changes: 3 additions & 3 deletions compiled/facebook-www/ReactART-prod.classic.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10853,13 +10853,13 @@ var slice = Array.prototype.slice,
})(React.Component);
var internals$jscomp$inline_1439 = {
bundleType: 0,
version: "19.0.0-www-classic-5dcb0097-20240918",
version: "19.0.0-www-classic-5e83d9ab-20240918",
rendererPackageName: "react-art",
currentDispatcherRef: ReactSharedInternals,
findFiberByHostInstance: function () {
return null;
},
reconcilerVersion: "19.0.0-www-classic-5dcb0097-20240918"
reconcilerVersion: "19.0.0-www-classic-5e83d9ab-20240918"
};
if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
var hook$jscomp$inline_1440 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
Expand All @@ -10885,4 +10885,4 @@ exports.RadialGradient = RadialGradient;
exports.Shape = TYPES.SHAPE;
exports.Surface = Surface;
exports.Text = Text;
exports.version = "19.0.0-www-classic-5dcb0097-20240918";
exports.version = "19.0.0-www-classic-5e83d9ab-20240918";
6 changes: 3 additions & 3 deletions compiled/facebook-www/ReactART-prod.modern.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10367,13 +10367,13 @@ var slice = Array.prototype.slice,
})(React.Component);
var internals$jscomp$inline_1431 = {
bundleType: 0,
version: "19.0.0-www-modern-5dcb0097-20240918",
version: "19.0.0-www-modern-5e83d9ab-20240918",
rendererPackageName: "react-art",
currentDispatcherRef: ReactSharedInternals,
findFiberByHostInstance: function () {
return null;
},
reconcilerVersion: "19.0.0-www-modern-5dcb0097-20240918"
reconcilerVersion: "19.0.0-www-modern-5e83d9ab-20240918"
};
if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
var hook$jscomp$inline_1432 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
Expand All @@ -10399,4 +10399,4 @@ exports.RadialGradient = RadialGradient;
exports.Shape = TYPES.SHAPE;
exports.Surface = Surface;
exports.Text = Text;
exports.version = "19.0.0-www-modern-5dcb0097-20240918";
exports.version = "19.0.0-www-modern-5e83d9ab-20240918";
28 changes: 14 additions & 14 deletions compiled/facebook-www/ReactDOM-dev.classic.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18576,41 +18576,41 @@ __DEV__ &&
: !1;
}
function getActiveElementDeep(containerInfo) {
var $jscomp$optchain$tmpm70183647$1, $jscomp$nullish$tmp0;
var $jscomp$optchain$tmp1765074778$1, $jscomp$nullish$tmp0;
containerInfo =
null !=
($jscomp$nullish$tmp0 =
null == containerInfo
? void 0
: null ==
($jscomp$optchain$tmpm70183647$1 = containerInfo.ownerDocument)
($jscomp$optchain$tmp1765074778$1 = containerInfo.ownerDocument)
? void 0
: $jscomp$optchain$tmpm70183647$1.defaultView)
: $jscomp$optchain$tmp1765074778$1.defaultView)
? $jscomp$nullish$tmp0
: window;
for (
$jscomp$optchain$tmpm70183647$1 = getActiveElement(
$jscomp$optchain$tmp1765074778$1 = getActiveElement(
containerInfo.document
);
$jscomp$optchain$tmpm70183647$1 instanceof
$jscomp$optchain$tmp1765074778$1 instanceof
containerInfo.HTMLIFrameElement;

) {
try {
var JSCompiler_inline_result =
"string" ===
typeof $jscomp$optchain$tmpm70183647$1.contentWindow.location.href;
typeof $jscomp$optchain$tmp1765074778$1.contentWindow.location.href;
} catch (err) {
JSCompiler_inline_result = !1;
}
if (JSCompiler_inline_result)
containerInfo = $jscomp$optchain$tmpm70183647$1.contentWindow;
containerInfo = $jscomp$optchain$tmp1765074778$1.contentWindow;
else break;
$jscomp$optchain$tmpm70183647$1 = getActiveElement(
$jscomp$optchain$tmp1765074778$1 = getActiveElement(
containerInfo.document
);
}
return $jscomp$optchain$tmpm70183647$1;
return $jscomp$optchain$tmp1765074778$1;
}
function hasSelectionCapabilities(elem) {
var nodeName = elem && elem.nodeName && elem.nodeName.toLowerCase();
Expand Down Expand Up @@ -27774,11 +27774,11 @@ __DEV__ &&
: flushSyncErrorInBuildsThatSupportLegacyMode;
(function () {
var isomorphicReactPackageVersion = React.version;
if ("19.0.0-www-classic-5dcb0097-20240918" !== isomorphicReactPackageVersion)
if ("19.0.0-www-classic-5e83d9ab-20240918" !== isomorphicReactPackageVersion)
throw Error(
'Incompatible React versions: The "react" and "react-dom" packages must have the exact same version. Instead got:\n - react: ' +
(isomorphicReactPackageVersion +
"\n - react-dom: 19.0.0-www-classic-5dcb0097-20240918\nLearn more: https://react.dev/warnings/version-mismatch")
"\n - react-dom: 19.0.0-www-classic-5e83d9ab-20240918\nLearn more: https://react.dev/warnings/version-mismatch")
);
})();
("function" === typeof Map &&
Expand Down Expand Up @@ -27822,11 +27822,11 @@ __DEV__ &&
!(function () {
var internals = {
bundleType: 1,
version: "19.0.0-www-classic-5dcb0097-20240918",
version: "19.0.0-www-classic-5e83d9ab-20240918",
rendererPackageName: "react-dom",
currentDispatcherRef: ReactSharedInternals,
findFiberByHostInstance: getClosestInstanceFromNode,
reconcilerVersion: "19.0.0-www-classic-5dcb0097-20240918"
reconcilerVersion: "19.0.0-www-classic-5e83d9ab-20240918"
};
internals.overrideHookState = overrideHookState;
internals.overrideHookStateDeletePath = overrideHookStateDeletePath;
Expand Down Expand Up @@ -28479,7 +28479,7 @@ __DEV__ &&
exports.useFormStatus = function () {
return resolveDispatcher().useHostTransitionStatus();
};
exports.version = "19.0.0-www-classic-5dcb0097-20240918";
exports.version = "19.0.0-www-classic-5e83d9ab-20240918";
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
"function" ===
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&
Expand Down
28 changes: 14 additions & 14 deletions compiled/facebook-www/ReactDOM-dev.modern.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17910,41 +17910,41 @@ __DEV__ &&
: !1;
}
function getActiveElementDeep(containerInfo) {
var $jscomp$optchain$tmp225122935$1, $jscomp$nullish$tmp0;
var $jscomp$optchain$tmp1980021184$1, $jscomp$nullish$tmp0;
containerInfo =
null !=
($jscomp$nullish$tmp0 =
null == containerInfo
? void 0
: null ==
($jscomp$optchain$tmp225122935$1 = containerInfo.ownerDocument)
($jscomp$optchain$tmp1980021184$1 = containerInfo.ownerDocument)
? void 0
: $jscomp$optchain$tmp225122935$1.defaultView)
: $jscomp$optchain$tmp1980021184$1.defaultView)
? $jscomp$nullish$tmp0
: window;
for (
$jscomp$optchain$tmp225122935$1 = getActiveElement(
$jscomp$optchain$tmp1980021184$1 = getActiveElement(
containerInfo.document
);
$jscomp$optchain$tmp225122935$1 instanceof
$jscomp$optchain$tmp1980021184$1 instanceof
containerInfo.HTMLIFrameElement;

) {
try {
var JSCompiler_inline_result =
"string" ===
typeof $jscomp$optchain$tmp225122935$1.contentWindow.location.href;
typeof $jscomp$optchain$tmp1980021184$1.contentWindow.location.href;
} catch (err) {
JSCompiler_inline_result = !1;
}
if (JSCompiler_inline_result)
containerInfo = $jscomp$optchain$tmp225122935$1.contentWindow;
containerInfo = $jscomp$optchain$tmp1980021184$1.contentWindow;
else break;
$jscomp$optchain$tmp225122935$1 = getActiveElement(
$jscomp$optchain$tmp1980021184$1 = getActiveElement(
containerInfo.document
);
}
return $jscomp$optchain$tmp225122935$1;
return $jscomp$optchain$tmp1980021184$1;
}
function hasSelectionCapabilities(elem) {
var nodeName = elem && elem.nodeName && elem.nodeName.toLowerCase();
Expand Down Expand Up @@ -26891,11 +26891,11 @@ __DEV__ &&
return_targetInst = null;
(function () {
var isomorphicReactPackageVersion = React.version;
if ("19.0.0-www-modern-5dcb0097-20240918" !== isomorphicReactPackageVersion)
if ("19.0.0-www-modern-5e83d9ab-20240918" !== isomorphicReactPackageVersion)
throw Error(
'Incompatible React versions: The "react" and "react-dom" packages must have the exact same version. Instead got:\n - react: ' +
(isomorphicReactPackageVersion +
"\n - react-dom: 19.0.0-www-modern-5dcb0097-20240918\nLearn more: https://react.dev/warnings/version-mismatch")
"\n - react-dom: 19.0.0-www-modern-5e83d9ab-20240918\nLearn more: https://react.dev/warnings/version-mismatch")
);
})();
("function" === typeof Map &&
Expand Down Expand Up @@ -26938,11 +26938,11 @@ __DEV__ &&
!(function () {
var internals = {
bundleType: 1,
version: "19.0.0-www-modern-5dcb0097-20240918",
version: "19.0.0-www-modern-5e83d9ab-20240918",
rendererPackageName: "react-dom",
currentDispatcherRef: ReactSharedInternals,
findFiberByHostInstance: getClosestInstanceFromNode,
reconcilerVersion: "19.0.0-www-modern-5dcb0097-20240918"
reconcilerVersion: "19.0.0-www-modern-5e83d9ab-20240918"
};
internals.overrideHookState = overrideHookState;
internals.overrideHookStateDeletePath = overrideHookStateDeletePath;
Expand Down Expand Up @@ -27547,7 +27547,7 @@ __DEV__ &&
exports.useFormStatus = function () {
return resolveDispatcher().useHostTransitionStatus();
};
exports.version = "19.0.0-www-modern-5dcb0097-20240918";
exports.version = "19.0.0-www-modern-5e83d9ab-20240918";
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
"function" ===
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&
Expand Down
Loading

0 comments on commit 6f75707

Please sign in to comment.