[Flight] Source Map Server Actions to their Server Location

[sebmarkbage]

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). These are only used in DEV mode. The findSourceMapURL 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".

  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".

For now they simply don't point to the right place but you can still jump to the right file in the fixture:

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.

[vercel]

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	Aug 18, 2024 4:25pm

[react-sizebot]

The size diff is too large to display in a single comment. The GitHub action for this pull request contains an artifact called 'sizebot-message.md' with the full message.

Generated by 🚫 dangerJS against b56c1d5

[sebmarkbage]

Another thing to note is that useActionState / useState / useReducer all the return their own dispatcher function that doesn't point to anywhere useful and the Hooks inspecting doesn't show to the actual action/reducer. So there's no way to find the original action for those.

We should probably 1) expose those on the hooks inspection 2) do something clever with the dispatcher function so that it can point to whatever it wraps. E.g. it could itself be an eval like this or we could instrument it with something that at least React DevTools knows about and maybe you can expand in Chrome DevTools.