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/extensions]: make source maps url relative #29886

Merged

Conversation

hoxyq
Copy link
Contributor

@hoxyq hoxyq commented Jun 13, 2024

This adds few changes:

  1. We are going to ship source maps only for 2 artifacts: installHook.js and react_devtools_backend_compact.js, because it is only these modules that can patch console and be visible to the user via stack traces in console. We need to ship source maps to be able to use ignoreList feature in source maps, so we can actually hide these from stack traces.
Before After
Screenshot 2024-06-13 at 17 44 25 Screenshot 2024-06-13 at 17 39 53
  1. The "sources" field in source map will have relative urls listed, instead of absolute with webpack:// protocol. This will move the sources to the React Developer Tools frame in Sources panel, instead of webpack://.
Before After
Screenshot 2024-06-13 at 17 48 24 Screenshot 2024-06-13 at 17 49 41

Note

I still have 1 unresolved issue with shipping source maps in extension build, and it is related to Firefox, which can't find them in the extension bundle and returns 404, even though urls are relative and I can actually open them via unique address like moz-extension://<extension-id>/build/intallHook.js.map ¯\_(ツ)_/¯

Copy link

vercel bot commented Jun 13, 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 13, 2024 1:56pm

@facebook-github-bot facebook-github-bot added CLA Signed React Core Team Opened by a member of the React Core Team labels Jun 13, 2024
@hoxyq hoxyq marked this pull request as ready for review June 13, 2024 16:53
@hoxyq hoxyq changed the title [wip] chore[react-devtools/extensions]: make source maps url relative chore[react-devtools/extensions]: make source maps url relative Jun 13, 2024
Copy link
Contributor

@vzaidman vzaidman left a comment

Choose a reason for hiding this comment

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

Please consider moving this shared code to webpack.utils.js.

While it's unlikely that this code will be updated, in case it will, that would ensure that both are synced. Otherwise there's a chance only one of them will be updated by mistake.

@hoxyq
Copy link
Contributor Author

hoxyq commented Jun 17, 2024

Please consider moving this shared code to webpack.utils.js.

While it's unlikely that this code will be updated, in case it will, that would ensure that both are synced. Otherwise there's a chance only one of them will be updated by mistake.

It is on purpose that we don't share anything here, to distinguish frontend and backend files, also minimization preferences are different for them.

Its kinda messy at the moment, because frontend lists content scripts that has nothing to do with the frontend.

@hoxyq hoxyq merged commit d7bb603 into facebook:main Jun 17, 2024
44 checks passed
@hoxyq hoxyq deleted the react-devtools/relative-paths-for-source-maps branch June 17, 2024 10:58
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.

3 participants