MORPH
SIGN IN SIGN UP
facebook / react UNCLAIMED

The library for web and native user interfaces.

244237 0 30 JavaScript
Normal View History Raw
[Flight] Implement captureStackTrace and owner stacks on the Server (#30197) Wire up owner stacks in Flight to the shared internals. This exposes it to `captureOwnerStack()`. In this case we install it permanently as we only allow one RSC renderer which then supports async contexts. Same thing we do for owner. This also ends up adding it to errors logged by React through `consoleWithStackDev`. The plan is to eventually remove that but this is inline with what we do in Fizz and Fiber already. However, at the same time we've instrumented the console so we need to strip them back out before sending to the client. This lets the client control whether to add the stack back in or allowing `console.createTask` to control it. This is another reason we shouldn't append them from React but for now we hack it by removing them after the fact.
2024-07-04 12:15:51 -04:00
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @flow
*/
import type {ReactComponentInfo} from 'shared/ReactTypes';
import {describeBuiltInComponentFrame} from 'shared/ReactComponentStackFrame';
Stop filtering owner stacks (#30438) We still filter them before passing from server to client in Flight Server but when presenting a native stack, we don't need to filter them. That's left to ignore listing in the presentation. The stacks are pretty clean regardless thanks to the bottom stack frames. We can also unify the owner stack formatters into one shared module since Fizz/Flight/Fiber all do the same thing. DevTools currently does the same thing but is forked so it can support multiple versions.
2024-07-24 13:01:07 -04:00
import {formatOwnerStack} from 'shared/ReactOwnerStackFrames';
[Flight] Normalize Stack Using Fake Evals (#30401) Stacked on https://github.com/facebook/react/pull/30400 and https://github.com/facebook/react/pull/30369 Previously we were using fake evals to recreate a stack for console replaying and thrown errors. However, for owner stacks we just used the raw string that came from the server. This means that the format of the owner stack could include different formats. Like Spidermonkey format for the client components and V8 for the server components. This means that this stack can't be parsed natively by the browser like when printing them as error like in https://github.com/facebook/react/pull/30289. Additionally, since there's no source file registered with that name and no source mapping url, it can't be source mapped. Before: <img width="1329" alt="before-firefox" src="https://github.com/user-attachments/assets/cbe03f9c-96ac-48fb-b58f-f3a224a774f4"> Instead, we need to create a fake stack like we do for the other things. That way when it's printed as an Error it gets source mapped. It also means that the format is consistently in the native format of the current browser. After: <img width="753" alt="after-firefox" src="https://github.com/user-attachments/assets/b436f1f5-ca37-4203-b29f-df9828c9fad3"> So this is nice because you can just take the result from `captureOwnerStack()` and append it to an `Error` stack and print it natively. E.g. this is what React DevTools will do. If you want to parse and present it yourself though it's a bit awkward though. The `captureOwnerStack()` API now includes a bunch of `rsc://React/` URLs. These don't really have any direct connection to the source map. Only the browser knows this connection from the eval. You basically have to strip the prefix and then manually pass the remainder to your own `findSourceMapURL`. Another awkward part is that since Safari doesn't support eval sourceURL exposed into `error.stack` - it means that `captureOwnerStack()` get an empty location for server components since the fake eval doesn't work there. That's not a big deal since these stacks are already broken even for client modules for many because the `eval-source-map` strategy in Webpack doesn't work in Safari for this same reason. A lot of this refactoring is just clarifying that there's three kind of ReactComponentInfo fields: - `stack` - The raw stack as described on the original server. - `debugStack` - The Error object containing the stack as represented in the current client as fake evals. - `debugTask` - The same thing as `debugStack` but described in terms of a native `console.createTask`.
2024-07-22 11:03:15 -04:00
[Flight] Implement captureStackTrace and owner stacks on the Server (#30197) Wire up owner stacks in Flight to the shared internals. This exposes it to `captureOwnerStack()`. In this case we install it permanently as we only allow one RSC renderer which then supports async contexts. Same thing we do for owner. This also ends up adding it to errors logged by React through `consoleWithStackDev`. The plan is to eventually remove that but this is inline with what we do in Fizz and Fiber already. However, at the same time we've instrumented the console so we need to strip them back out before sending to the client. This lets the client control whether to add the stack back in or allowing `console.createTask` to control it. This is another reason we shouldn't append them from React but for now we hack it by removing them after the fact.
2024-07-04 12:15:51 -04:00
export function getOwnerStackByComponentInfoInDev(
componentInfo: ReactComponentInfo,
): string {
[flags] remove enableOwnerStacks (#32426) Bassed off: https://github.com/facebook/react/pull/32425 Wait to land internally. [Commit to review.](https://github.com/facebook/react/pull/32426/commits/66aa6a4dbb78106b4f3d3eb367f5c27eb8f30c66) This has landed everywhere
2025-03-04 12:34:34 -05:00
if (!__DEV__) {
[Flight] Implement captureStackTrace and owner stacks on the Server (#30197) Wire up owner stacks in Flight to the shared internals. This exposes it to `captureOwnerStack()`. In this case we install it permanently as we only allow one RSC renderer which then supports async contexts. Same thing we do for owner. This also ends up adding it to errors logged by React through `consoleWithStackDev`. The plan is to eventually remove that but this is inline with what we do in Fizz and Fiber already. However, at the same time we've instrumented the console so we need to strip them back out before sending to the client. This lets the client control whether to add the stack back in or allowing `console.createTask` to control it. This is another reason we shouldn't append them from React but for now we hack it by removing them after the fact.
2024-07-04 12:15:51 -04:00
return '';
}
try {
let info = '';
// The owner stack of the current component will be where it was created, i.e. inside its owner.
// There's no actual name of the currently executing component. Instead, that is available
// on the regular stack that's currently executing. However, if there is no owner at all, then
// there's no stack frame so we add the name of the root component to the stack to know which
// component is currently executing.
if (!componentInfo.owner && typeof componentInfo.name === 'string') {
return describeBuiltInComponentFrame(componentInfo.name);
}
let owner: void | null | ReactComponentInfo = componentInfo;
while (owner) {
[Flight] Normalize Stack Using Fake Evals (#30401) Stacked on https://github.com/facebook/react/pull/30400 and https://github.com/facebook/react/pull/30369 Previously we were using fake evals to recreate a stack for console replaying and thrown errors. However, for owner stacks we just used the raw string that came from the server. This means that the format of the owner stack could include different formats. Like Spidermonkey format for the client components and V8 for the server components. This means that this stack can't be parsed natively by the browser like when printing them as error like in https://github.com/facebook/react/pull/30289. Additionally, since there's no source file registered with that name and no source mapping url, it can't be source mapped. Before: <img width="1329" alt="before-firefox" src="https://github.com/user-attachments/assets/cbe03f9c-96ac-48fb-b58f-f3a224a774f4"> Instead, we need to create a fake stack like we do for the other things. That way when it's printed as an Error it gets source mapped. It also means that the format is consistently in the native format of the current browser. After: <img width="753" alt="after-firefox" src="https://github.com/user-attachments/assets/b436f1f5-ca37-4203-b29f-df9828c9fad3"> So this is nice because you can just take the result from `captureOwnerStack()` and append it to an `Error` stack and print it natively. E.g. this is what React DevTools will do. If you want to parse and present it yourself though it's a bit awkward though. The `captureOwnerStack()` API now includes a bunch of `rsc://React/` URLs. These don't really have any direct connection to the source map. Only the browser knows this connection from the eval. You basically have to strip the prefix and then manually pass the remainder to your own `findSourceMapURL`. Another awkward part is that since Safari doesn't support eval sourceURL exposed into `error.stack` - it means that `captureOwnerStack()` get an empty location for server components since the fake eval doesn't work there. That's not a big deal since these stacks are already broken even for client modules for many because the `eval-source-map` strategy in Webpack doesn't work in Safari for this same reason. A lot of this refactoring is just clarifying that there's three kind of ReactComponentInfo fields: - `stack` - The raw stack as described on the original server. - `debugStack` - The Error object containing the stack as represented in the current client as fake evals. - `debugTask` - The same thing as `debugStack` but described in terms of a native `console.createTask`.
2024-07-22 11:03:15 -04:00
const ownerStack: ?Error = owner.debugStack;
if (ownerStack != null) {
[Flight] Implement captureStackTrace and owner stacks on the Server (#30197) Wire up owner stacks in Flight to the shared internals. This exposes it to `captureOwnerStack()`. In this case we install it permanently as we only allow one RSC renderer which then supports async contexts. Same thing we do for owner. This also ends up adding it to errors logged by React through `consoleWithStackDev`. The plan is to eventually remove that but this is inline with what we do in Fizz and Fiber already. However, at the same time we've instrumented the console so we need to strip them back out before sending to the client. This lets the client control whether to add the stack back in or allowing `console.createTask` to control it. This is another reason we shouldn't append them from React but for now we hack it by removing them after the fact.
2024-07-04 12:15:51 -04:00
// Server Component
owner = owner.owner;
[Flight] Normalize Stack Using Fake Evals (#30401) Stacked on https://github.com/facebook/react/pull/30400 and https://github.com/facebook/react/pull/30369 Previously we were using fake evals to recreate a stack for console replaying and thrown errors. However, for owner stacks we just used the raw string that came from the server. This means that the format of the owner stack could include different formats. Like Spidermonkey format for the client components and V8 for the server components. This means that this stack can't be parsed natively by the browser like when printing them as error like in https://github.com/facebook/react/pull/30289. Additionally, since there's no source file registered with that name and no source mapping url, it can't be source mapped. Before: <img width="1329" alt="before-firefox" src="https://github.com/user-attachments/assets/cbe03f9c-96ac-48fb-b58f-f3a224a774f4"> Instead, we need to create a fake stack like we do for the other things. That way when it's printed as an Error it gets source mapped. It also means that the format is consistently in the native format of the current browser. After: <img width="753" alt="after-firefox" src="https://github.com/user-attachments/assets/b436f1f5-ca37-4203-b29f-df9828c9fad3"> So this is nice because you can just take the result from `captureOwnerStack()` and append it to an `Error` stack and print it natively. E.g. this is what React DevTools will do. If you want to parse and present it yourself though it's a bit awkward though. The `captureOwnerStack()` API now includes a bunch of `rsc://React/` URLs. These don't really have any direct connection to the source map. Only the browser knows this connection from the eval. You basically have to strip the prefix and then manually pass the remainder to your own `findSourceMapURL`. Another awkward part is that since Safari doesn't support eval sourceURL exposed into `error.stack` - it means that `captureOwnerStack()` get an empty location for server components since the fake eval doesn't work there. That's not a big deal since these stacks are already broken even for client modules for many because the `eval-source-map` strategy in Webpack doesn't work in Safari for this same reason. A lot of this refactoring is just clarifying that there's three kind of ReactComponentInfo fields: - `stack` - The raw stack as described on the original server. - `debugStack` - The Error object containing the stack as represented in the current client as fake evals. - `debugTask` - The same thing as `debugStack` but described in terms of a native `console.createTask`.
2024-07-22 11:03:15 -04:00
if (owner) {
// TODO: Should we stash this somewhere for caching purposes?
info += '\n' + formatOwnerStack(ownerStack);
[Flight] Implement captureStackTrace and owner stacks on the Server (#30197) Wire up owner stacks in Flight to the shared internals. This exposes it to `captureOwnerStack()`. In this case we install it permanently as we only allow one RSC renderer which then supports async contexts. Same thing we do for owner. This also ends up adding it to errors logged by React through `consoleWithStackDev`. The plan is to eventually remove that but this is inline with what we do in Fizz and Fiber already. However, at the same time we've instrumented the console so we need to strip them back out before sending to the client. This lets the client control whether to add the stack back in or allowing `console.createTask` to control it. This is another reason we shouldn't append them from React but for now we hack it by removing them after the fact.
2024-07-04 12:15:51 -04:00
}
} else {
break;
}
}
return info;
} catch (x) {
return '\nError generating stack: ' + x.message + '\n' + x.stack;
}
}
Reference in New Issue Copy Permalink