[DevTools] Use Owner Stacks to Implement View Source of a Server Component

[sebmarkbage]

We don't have the source location of Server Components on the client because we don't want to eagerly do the throw trick for all Server Components just in case. Unfortunately Node.js doesn't expose V8's API to get a source location of a function.

We do have the owner stacks of the JSX that created it though and at some point we'll also show that location in DevTools.

However, the realization is that if a Server Component is the owner of any child. The owner stack of that child will have the owner component's source location as its bottom stack frame.

The technique I'm implementing here is to track whenever a child mounts we already have its owner. We track the first discovered owned child's stack on the owner. Then when we ask for a Source location of the owner do we parse that stack and extract the location of the bottom frame. This doesn't give us a location necessarily in the top of the function but somewhere in the function.

In this case the first owned child is the Container:

We can even use this technique for Fibers too. Currently I use this as a fallback in case the error technique didn't work. This covers a case where nothing errors but you still render a child. This case is actually quite common:

function Foo() {
  return <Bar />;
}

However, for Fibers we could really just use the inspect(function) technique which works for all cases. At least in Chrome.

Unfortunately, this technique doesn't work if a Component doesn't create any new JSX but just renders its children. It also currently doesn't work if the child is filtered since I only look up the owner if an instance is not filtered. This means that the container in the fixture can't view source by default since the host component is filtered:

export default function Container({children}) {
  return <div>{children}</div>;
}

[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 23, 2024 2:40am

[eps1lon]

smart