Skip to content
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.

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

chore[react-devtools]: improve console arguments formatting before passing it to original console #29873

Conversation

hoxyq
Copy link
Contributor

@hoxyq hoxyq commented Jun 12, 2024

Stacked on #29869.

Summary

When using ANSI escape sequences, we construct a message in the following way: console.<method>('\x1b...%s\x1b[0m', userspaceArgument1?, userspaceArgument2?, userspaceArgument3?, ...).

This won't dim all arguments, if user had something like console.log(1, 2, 3), we would only apply it to 1, since this is the first arguments, so we need to:

  • inline everything whats possible into a single string, while preserving console substitutions defined by the user
  • omit css and object substitutions, since we can't really inline them and will delegate in to the environment

How did you test this change?

Added some tests, manually inspected that it works well for web and native cases.

Copy link

vercel bot commented Jun 12, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
react-compiler-playground ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jun 17, 2024 3:39pm

@facebook-github-bot facebook-github-bot added CLA Signed React Core Team Opened by a member of the React Core Team labels Jun 12, 2024
});

// @reactVersion >= 16.0
Copy link
Contributor Author

Choose a reason for hiding this comment

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

We don't really need this pragma here, because format has nothing to do with different versions of React, so there is no reason to test it against them.

@react-sizebot
Copy link

Comparing: f5af92d...91096cf

Critical size changes

Includes critical production bundles, as well as any change greater than 2%:

Name +/- Base Current +/- gzip Base gzip Current gzip
oss-stable/react-dom/cjs/react-dom.production.js = 6.66 kB 6.66 kB = 1.82 kB 1.82 kB
oss-stable/react-dom/cjs/react-dom-client.production.js = 497.44 kB 497.44 kB = 89.16 kB 89.16 kB
oss-experimental/react-dom/cjs/react-dom.production.js = 6.67 kB 6.67 kB = 1.83 kB 1.83 kB
oss-experimental/react-dom/cjs/react-dom-client.production.js = 502.26 kB 502.26 kB = 89.85 kB 89.85 kB
facebook-www/ReactDOM-prod.classic.js = 596.94 kB 596.94 kB = 105.24 kB 105.24 kB
facebook-www/ReactDOM-prod.modern.js = 571.12 kB 571.12 kB = 101.19 kB 101.19 kB
test_utils/ReactAllWarnings.js Deleted 63.89 kB 0.00 kB Deleted 15.97 kB 0.00 kB

Significant size changes

Includes any change greater than 0.2%:

Expand to show
Name +/- Base Current +/- gzip Base gzip Current gzip
test_utils/ReactAllWarnings.js Deleted 63.89 kB 0.00 kB Deleted 15.97 kB 0.00 kB

Generated by 🚫 dangerJS against 91096cf

@yungsters
Copy link
Contributor

I’m not terribly familiar with these code paths.

Can you elaborate your test plan to include what specific changes you’re looking for, and also what you validated in specific existing browsers (e.g. specific behavior you were verifying in Firefox).

@hoxyq
Copy link
Contributor Author

hoxyq commented Jun 12, 2024

I’m not terribly familiar with these code paths.

Can you elaborate your test plan to include what specific changes you’re looking for, and also what you validated in specific existing browsers (e.g. specific behavior you were verifying in Firefox).

I've split these changes into 3 different PRs, some of which doesn't require the familiarity with this codebase. Some demos for React Native are in #29869, will add the Firefox here as well later.

@vzaidman
Copy link
Contributor

What if there's a style applied to the console already when it gets to us? @hoxyq

@vzaidman vzaidman self-requested a review June 17, 2024 12:55
@hoxyq
Copy link
Contributor Author

hoxyq commented Jun 17, 2024

What if there's a style applied to the console already when it gets to us? @hoxyq

Then we are not going to inline the css part into the string,

it("doesn't inline css", () => {
expect(
formatConsoleArguments(
'This is template with %c %s object %o',
'color: rgba(...)',
'the',
{},
),
).toEqual([
'This is template with %c the object %o',
'color: rgba(...)',
{},
]);
});
});
:

Depending on where the %c substitution is located in the user's string, the user-defined stylings will override our ANSI-based stylings:
Screenshot 2024-06-17 at 14 01 27

@vzaidman
Copy link
Contributor

the user-defined stylings will override our ANSI-based stylings

@hoxyq OK! This is kinda surprising to me.

But what if the log starts with their own ANSI?

maybeMessage: any,
...inputArgs: $ReadOnlyArray<any>
): $ReadOnlyArray<any> {
if (inputArgs.length === 0 || typeof maybeMessage !== 'string') {
Copy link
Contributor

Choose a reason for hiding this comment

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

maybe it is worth checking here if "maybeMessage" is an ANSI template.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

maybe it is worth checking here if "maybeMessage" is an ANSI template.

Should be safe if this is correct ANSI template, it should override the stylings applied by React DevTools:
Screenshot 2024-06-17 at 14 13 04

@hoxyq
Copy link
Contributor Author

hoxyq commented Jun 17, 2024

the user-defined stylings will override our ANSI-based stylings

@hoxyq OK! This is kinda surprising to me.

But what if the log starts with their own ANSI?

It will override our stylings:
Screenshot 2024-06-17 at 14 13 04

@vzaidman
Copy link
Contributor

It will override our stylings

OK! Approved.

@hoxyq hoxyq force-pushed the react-devtools/better-formatting-for-ansi-escape-stylings branch from 91096cf to 6d14668 Compare June 17, 2024 15:15
@hoxyq hoxyq force-pushed the react-devtools/better-formatting-for-ansi-escape-stylings branch from 6d14668 to 116a875 Compare June 17, 2024 15:32
@hoxyq hoxyq merged commit 107a2f8 into facebook:main Jun 17, 2024
37 of 42 checks passed
@hoxyq hoxyq deleted the react-devtools/better-formatting-for-ansi-escape-stylings branch June 17, 2024 15:38
hoxyq added a commit that referenced this pull request Jun 18, 2024
Full list of changes:

* chore[react-devtools]: improve console arguments formatting before
passing it to original console ([hoxyq](https://github.com/hoxyq) in
[#29873](#29873))
* chore[react-devtools]: unify console patching and default to ansi
escape symbols ([hoxyq](https://github.com/hoxyq) in
[#29869](#29869))
* chore[react-devtools/backend]: remove
consoleManagedByDevToolsDuringStrictMode
([hoxyq](https://github.com/hoxyq) in
[#29856](#29856))
* chore[react-devtools/extensions]: make source maps url relative
([hoxyq](https://github.com/hoxyq) in
[#29886](#29886))
* fix[react-devtools] divided inspecting elements between inspecting do…
([vzaidman](https://github.com/vzaidman) in
[#29885](#29885))
* [Fiber] Create virtual Fiber when an error occurs during reconcilation
([sebmarkbage](https://github.com/sebmarkbage) in
[#29804](#29804))
* fix[react-devtools] component badge in light mode is now not invisible
([vzaidman](https://github.com/vzaidman) in
[#29852](#29852))
* Remove Warning: prefix and toString on console Arguments
([sebmarkbage](https://github.com/sebmarkbage) in
[#29839](#29839))
* Add jest lint rules ([rickhanlonii](https://github.com/rickhanlonii)
in [#29760](#29760))
* [Fiber] Track the Real Fiber for Key Warnings
([sebmarkbage](https://github.com/sebmarkbage) in
[#29791](#29791))
* fix[react-devtools/store-test]: fork the test to represent current be…
([hoxyq](https://github.com/hoxyq) in
[#29777](#29777))
* Default native inspections config false
([vzaidman](https://github.com/vzaidman) in
[#29784](#29784))
* fix[react-devtools] remove native inspection button when it can't be
used ([vzaidman](https://github.com/vzaidman) in
[#29779](#29779))
* chore[react-devtools]: ip => internal-ip
([hoxyq](https://github.com/hoxyq) in
[#29772](#29772))
* Fix #29724: `ip` dependency update for CVE-2024-29415
([Rekl0w](https://github.com/Rekl0w) in
[#29725](#29725))
* cleanup[react-devtools]: remove unused supportsProfiling flag from
store config ([hoxyq](https://github.com/hoxyq) in
[#29193](#29193))
* [Fiber] Enable Native console.createTask Stacks When Available
([sebmarkbage](https://github.com/sebmarkbage) in
[#29223](#29223))
* Move createElement/JSX Warnings into the Renderer
([sebmarkbage](https://github.com/sebmarkbage) in
[#29088](#29088))
* Set the current fiber to the source of the error during error
reporting ([sebmarkbage](https://github.com/sebmarkbage) in
[#29044](#29044))
* Unify ReactFiberCurrentOwner and ReactCurrentFiber
([sebmarkbage](https://github.com/sebmarkbage) in
[#29038](#29038))
* Dim `console` calls on additional Effect invocations due to
`StrictMode` ([eps1lon](https://github.com/eps1lon) in
[#29007](#29007))
* refactor[react-devtools]: rewrite context menus
([hoxyq](https://github.com/hoxyq) in
[#29049](#29049))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CLA Signed React Core Team Opened by a member of the React Core Team
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants