[Fizz] Implement debugInfo #30174
[Fizz] Implement debugInfo #30174
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
facebook-github-bot
added
CLA Signed
React Core Team
| info += '\n' + owner.stack; | ||
| const ownerStack: string = owner.stack; | ||
| owner = owner.owner; | ||
| if (owner && ownerStack !== '') { |
There was a problem hiding this comment.
For client components, we only included the stack if there was an owner (to eliminate some of the initial bootstrapping stacks) but we didn't do the same for server components. This fixes that in Fiber and Fizz.
sebmarkbage
force-pushed
the
fizzdebuginfo
branch
from
a2da79b
to
df21f8f
Compare
sebmarkbage
force-pushed
the
fizzdebuginfo
branch
from
df21f8f
to
737fd63
Compare
| ); | ||
| expect(normalizeCodeLocInfo(caughtErrors[0].ownerStack)).toBe( | ||
| __DEV__ && gate(flags => flags.enableOwnerStacks) | ||
| ? '\n in Bar (at **)' + '\n in Foo (at **)' |
There was a problem hiding this comment.
Note that the actual paths here point to fake evals which needs to be source mapped to make sense since this is the "client" stacks showing.
An alternative would be to snapshot the stacks on the "server" and then show it here. However, the server likely is compiled and needs to be source mapped anyway so might not matter much.
| expect(caughtErrors[0].error).toBe(thrownError); | ||
| expect(normalizeCodeLocInfo(caughtErrors[0].parentStack)).toBe( | ||
| __DEV__ | ||
| ? '\n in Baz (at **)' + |
There was a problem hiding this comment.
These don't have line numbers because they're server components and we don't give those line numbers for parent stacks.
| } | ||
| return node; | ||
| } | ||
| // eslint-disable-next-line react-internal/prod-error-codes |
There was a problem hiding this comment.
Is the reason here that this error shouldn't appear in prod bundles? We usually call this out explicitly e.g.
react/packages/react-server/src/ReactFlightServer.js
Lines 3269 to 3273 in d40ea87
There was a problem hiding this comment.
Because the caller should always be wrapped in a __DEV__ check. We don't always comment and the comments that we do have don't really say anything more than what the disable line says anyway so it's a classic unnecessary commment.
There was a problem hiding this comment.
say anything more than what the disable line says anyway so it's a classic unnecessary commment.
To me the eslint-disable doesn't say anything. I think it's only useless if you have high context.
This lets us track Server Component parent stacks in Fizz which also lets us track the correct owner stack for lazy. In Fiber we're careful not to make any DEV only fibers but since the ReactFizzComponentStack data structures just exist for debug meta data anyway we can just expand on that.
sebmarkbage
force-pushed
the
fizzdebuginfo
branch
from
265eb73
to
11fb115
Compare
Stacked on #30170. This lets us track Server Component parent stacks in Fizz which also lets us track the correct owner stack for lazy. In Fiber we're careful not to make any DEV only fibers but since the ReactFizzComponentStack data structures just exist for debug meta data anyway we can just expand on that. DiffTrain build for [cfb8945](cfb8945)
Stacked on #30174. This tracks the current debugTask on the Task so that when an error is thrown we can use it to run the `onError` (and `onShellError` and `onFatalError`) callbacks within the Context of that task. Ideally it would be associated with the error object but neither console.error [nor reportError](https://crbug.com/350426235) reports this as the async stack so we have to manually restore it. That way when you inspect Fizz using node `--inspect` we show the right async stack. <img width="616" alt="Screenshot 2024-07-01 at 10 52 29 PM" src="https://github.com/facebook/react/assets/63648/db68133e-124e-4509-8241-c67160db94fc"> This is equivalent to how we track the task that created the parent server component or the Fiber: https://github.com/facebook/react/blob/6d2a97a7113dfac2ad45067001b7e49a98718324/packages/react-reconciler/src/ReactChildFiber.js#L1985 Then use them when invoking the error callbacks: https://github.com/facebook/react/blob/6d2a97a7113dfac2ad45067001b7e49a98718324/packages/react-reconciler/src/ReactFiberThrow.js#L104-L108 --------- Co-authored-by: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Stacked on #30174. This tracks the current debugTask on the Task so that when an error is thrown we can use it to run the `onError` (and `onShellError` and `onFatalError`) callbacks within the Context of that task. Ideally it would be associated with the error object but neither console.error [nor reportError](https://crbug.com/350426235) reports this as the async stack so we have to manually restore it. That way when you inspect Fizz using node `--inspect` we show the right async stack. <img width="616" alt="Screenshot 2024-07-01 at 10 52 29 PM" src="https://github.com/facebook/react/assets/63648/db68133e-124e-4509-8241-c67160db94fc"> This is equivalent to how we track the task that created the parent server component or the Fiber: https://github.com/facebook/react/blob/6d2a97a7113dfac2ad45067001b7e49a98718324/packages/react-reconciler/src/ReactChildFiber.js#L1985 Then use them when invoking the error callbacks: https://github.com/facebook/react/blob/6d2a97a7113dfac2ad45067001b7e49a98718324/packages/react-reconciler/src/ReactFiberThrow.js#L104-L108 --------- Co-authored-by: Sebastian Silbermann <silbermann.sebastian@gmail.com> DiffTrain build for [3db98c9](3db98c9)
Stacked on #30170.
This lets us track Server Component parent stacks in Fizz which also lets us track the correct owner stack for lazy.
In Fiber we're careful not to make any DEV only fibers but since the ReactFizzComponentStack data structures just exist for debug meta data anyway we can just expand on that.