Skip to content

[DevTools] Improve Layering Between Console and Renderer #30925

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Sep 9, 2024
Merged

[DevTools] Improve Layering Between Console and Renderer #30925

Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
dfd8f85
Move getCurrentFiber into onErrorOrWarning so that it's encapsulated …
sebmarkbage Sep 9, 2024
a2af0d7
Move getComponentStack computation into renderer
sebmarkbage Sep 9, 2024
a09d1c7
Delete early patching registerRendererWithConsole
sebmarkbage Sep 9, 2024
c664b9b
Remove the actual "renderer" from registerRenderer
sebmarkbage Sep 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Delete early patching registerRendererWithConsole 
This doesn't inject onErrorAndWarning and getComponentStack so it doesn't
really do anything useful anyway.
  • Loading branch information
@sebmarkbage
sebmarkbage committed Sep 9, 2024
commit a09d1c72a2493f383b59859c031bfaea963ac58a
19 changes: 0 additions & 19 deletions packages/react-devtools-shared/src/hook.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -367,25 +367,6 @@ export function installHook(target: any): DevToolsHook | null {
? 'deadcode'
: detectReactBuildType(renderer);

// Patching the console enables DevTools to do a few useful things:
// * Append component stacks to warnings and error messages
// * Disabling or marking logs during a double render in Strict Mode
// * Disable logging during re-renders to inspect hooks (see inspectHooksOfFiber)
//
// Allow patching console early (during injection) to
// provide developers with components stacks even if they don't run DevTools.
if (target.hasOwnProperty('__REACT_DEVTOOLS_CONSOLE_FUNCTIONS__')) {
const {registerRendererWithConsole, patchConsoleUsingWindowValues} =
target.__REACT_DEVTOOLS_CONSOLE_FUNCTIONS__;
if (
typeof registerRendererWithConsole === 'function' &&
typeof patchConsoleUsingWindowValues === 'function'
) {
registerRendererWithConsole(renderer);
Copy link
Collaborator Author

@sebmarkbage sebmarkbage Sep 9, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since this wasn't injecting an implementation of onErrorOrWarning and is now not injecting a getComponentStack implementation it doesn't actually do anything because we need to inject that actual implementation.

This should get addressed by #30596.

Copy link
Contributor

@hoxyq hoxyq Sep 9, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Agreed. This should be fixed as a part of my stack on moving console patching from Backend to Hook.

patchConsoleUsingWindowValues();
}
}

// If we have just reloaded to profile, we need to inject the renderer interface before the app loads.
// Otherwise the renderer won't yet exist and we can skip this step.
const attach = target.__REACT_DEVTOOLS_ATTACH__;
Expand Down