[Flight] Add findSourceMapURL option to get a URL to load Server source maps from #29708
+204
−16
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
facebook-github-bot
added
CLA Signed
React Core Team
eps1lon
approved these changes
Jun 2, 2024
| @@ -199,7 +199,7 @@ module.exports = function (webpackEnv) { | |||
| ? shouldUseSourceMap | |||
| ? 'source-map' | |||
| : false | |||
| : isEnvDevelopment && 'cheap-module-source-map', | |||
| : isEnvDevelopment && 'source-map', | |||
There was a problem hiding this comment.
Is this a requirement for this feature to work?
There was a problem hiding this comment.
No, it's just for client source maps. They end up off by one and not mapping to the right columns so not testing the proper experience.
| @@ -1721,9 +1731,13 @@ function createFakeFunction<T>( | |||
| } | |||
|
|
|||
| const frameRegExp = | |||
| /^ {3} at (?:(.+) \(([^\)]+):(\d+):(\d+)\)|([^\)]+):(\d+):(\d+))$/; | |||
| /^ {3} at (?:(.+) \(([^\)]+):(\d+):(\d+)\)|(?:async )?([^\)]+):(\d+):(\d+))$/; | |||
There was a problem hiding this comment.
Can we add one or two examples as comments here? Doesn't need to be super exhaustive. It's just a very intimidating regex 😬
There was a problem hiding this comment.
Added a comment but I'm still ambivalent about how much we should cover here. This doesn't really cover all possible.
eps1lon
reviewed
Jun 2, 2024
| // stacks will have had the source map already applied so it's pointing to the | ||
| // original source. We return a blank source map that just maps everything to | ||
| // the original source in this case. | ||
| const sourceContent = await readFile(requestedFilePath, 'utf8'); |
There was a problem hiding this comment.
Right now this throws when we request source map for node internal frames e.g. Error: ENOENT: no such file or directory, open 'node:internal/process/task_queues'.
Should we handle these on the server gracefully? Otherwise it might be a bit spammy. I guess the client can't handle it since it doesn't necessarily know what runtime internals are (assuming Bun uses other protocols).
There was a problem hiding this comment.
Ideally they're filtered before at the findSourceMapURL so that it can just return null instead.
This doesn't happen with just this PR though because we filter those out of the stack. It's not an issue until the next PR where it allows those to show up.
sebmarkbage
force-pushed
the
fixturesourcemap
branch
from
8854c33
to
a72bcf4
Compare
sebmarkbage
force-pushed
the
fixturesourcemap
branch
from
a72bcf4
to
9f3f16c
Compare
github-actions bot
pushed a commit
that referenced
this pull request
Jun 3, 2024
…ce maps from (#29708) This lets you click a stack frame on the client and see the Server source code inline. <img width="871" alt="Screenshot 2024-06-01 at 11 44 24 PM" src="https://github.com/facebook/react/assets/63648/581281ce-0dce-40c0-a084-4a6d53ba1682"> <img width="840" alt="Screenshot 2024-06-01 at 11 43 37 PM" src="https://github.com/facebook/react/assets/63648/00dc77af-07c1-4389-9ae0-cf1f45199efb"> We could do some logic on the server that sends a source map url for every stack frame in the RSC payload. That would make the client potentially config free. However regardless we need the config to describe what url scheme to use since that’s not built in to the bundler config. In practice you likely have a common pattern for your source maps so no need to send data over and over when we can just have a simple function configured on the client. The server must return a source map, even if the file is not actually compiled since the fake file is still compiled. The source mapping strategy can be one of two models depending on if the server’s stack traces (`new Error().stack`) are source mapped back to the original (`—enable-source-maps`) or represents the location in compiled code (like in the browser). If it represents the location in compiled code it’s actually easier. You just serve the source map generated for that file by the tooling. If it is already source mapped it has to generate a source map where everything points to the same location (as if not compiled) ideally with a segment per logical ast node. DiffTrain build for commit ba099e4.
github-actions bot
pushed a commit
that referenced
this pull request
Jun 3, 2024
…ce maps from (#29708) This lets you click a stack frame on the client and see the Server source code inline. <img width="871" alt="Screenshot 2024-06-01 at 11 44 24 PM" src="https://github.com/facebook/react/assets/63648/581281ce-0dce-40c0-a084-4a6d53ba1682"> <img width="840" alt="Screenshot 2024-06-01 at 11 43 37 PM" src="https://github.com/facebook/react/assets/63648/00dc77af-07c1-4389-9ae0-cf1f45199efb"> We could do some logic on the server that sends a source map url for every stack frame in the RSC payload. That would make the client potentially config free. However regardless we need the config to describe what url scheme to use since that’s not built in to the bundler config. In practice you likely have a common pattern for your source maps so no need to send data over and over when we can just have a simple function configured on the client. The server must return a source map, even if the file is not actually compiled since the fake file is still compiled. The source mapping strategy can be one of two models depending on if the server’s stack traces (`new Error().stack`) are source mapped back to the original (`—enable-source-maps`) or represents the location in compiled code (like in the browser). If it represents the location in compiled code it’s actually easier. You just serve the source map generated for that file by the tooling. If it is already source mapped it has to generate a source map where everything points to the same location (as if not compiled) ideally with a segment per logical ast node. DiffTrain build for [ba099e4](ba099e4)
|
The craziest thing is that you can actually place break points inside the server code. It'll break in the eval that source maps to the server code. You can't see anything useful in that scope in terms of variables and you can't skip over any lines since it's just one callsite. It also doesn't actually prevent the server from running that code ofc. But you can navigate the stack easier in that way. |
sebmarkbage
added a commit
that referenced
this pull request
Aug 18, 2024
This uses a similar technique to what we use to generate fake stack frames for server components. This generates an eval:ed wrapper function around the Server Reference proxy we create on the client. This wrapper function gets the original `name` of the action on the server and I also add a source map if `findSourceMapURL` is defined that points back to the source of the server function. For `"use server"` on the server, there's no new API. It just uses the callsite of `registerServerReference()` on the Server. We can infer the function name from the actual function on the server and we already have the `findSourceMapURL` on the client receiving it. For `"use server"` imported from the client, there's two new options added to `createServerReference()` (in addition to the optional [`encodeFormAction`](#27563)). These are only used in DEV mode. The [`findSourceMapURL`](#29708) option is the same one added in #29708. We need to pass this these references aren't created in the context of any specific request but globally. The other weird thing about this case is that this is actually a case where the compiled environment is the client so any source maps are the same as for the client layer, so the environment name here is just `"Client"`. ```diff createServerReference( id: string, callServer: CallServerCallback, encodeFormAction?: EncodeFormActionCallback, + findSourceMapURL?: FindSourceMapURLCallback, // DEV-only + functionName?: string, // DEV-only ) ``` The key is that we use the location of the `registerServerReference()`/`createServerReference()` call as the location of the function. A compiler can either emit those at the same locations as the original functions or use source maps to have those segments refer to the original location of the function (or in the case of a re-export the original location of the re-export is also a fine approximate). The compiled output must call these directly without a wrapper function because the wrapper adds a stack frame. I decided against complicated and fragile dev-only options to skip n number of frames that would just end up in prod code. The implementation just skips one frame - our own. Otherwise it'll just point all source mapping to the wrapper. We don't have a `"use server"` imported from the client implementation in the reference implementation/fixture so it's a bit tricky to test that. In the case of CJS on the server, we just use a runtime instead of compiler so it's tricky to source map those appropriately. We can implement it for ESM on the server which is the main thing we're testing in the fixture. It's easier in a real implementation where all the compilation is just one pass. It's a little tricky since we have to parse and append to other source maps but I'd like to do that as a follow up. Or maybe that's just an exercise for the reader. You can right click an action and click "Go to Definition". <img width="1323" alt="Screenshot 2024-08-17 at 6 04 27 PM" src="https://github.com/user-attachments/assets/94d379b3-8871-4671-a20d-cbf9cfbc2c6e"> For now they simply don't point to the right place but you can still jump to the right file in the fixture: <img width="1512" alt="Screenshot 2024-08-17 at 5 58 40 PM" src="https://github.com/user-attachments/assets/1ea5d665-e25a-44ca-9515-481dd3c5c2fe"> In Firefox/Safari given that the location doesn't exist in the source map yet, the browser refuses to open the file. Where as Chrome does nearest (last) line.
sebmarkbage
added a commit
that referenced
this pull request
Aug 22, 2024
Same as #29708 but for the flight-esm fixture.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This lets you click a stack frame on the client and see the Server source code inline.
We could do some logic on the server that sends a source map url for every stack frame in the RSC payload. That would make the client potentially config free. However regardless we need the config to describe what url scheme to use since that’s not built in to the bundler config. In practice you likely have a common pattern for your source maps so no need to send data over and over when we can just have a simple function configured on the client.
The server must return a source map, even if the file is not actually compiled since the fake file is still compiled.
The source mapping strategy can be one of two models depending on if the server’s stack traces (
new Error().stack) are source mapped back to the original (—enable-source-maps) or represents the location in compiled code (like in the browser).If it represents the location in compiled code it’s actually easier. You just serve the source map generated for that file by the tooling.
If it is already source mapped it has to generate a source map where everything points to the same location (as if not compiled) ideally with a segment per logical ast node.