Include server component names in the componentStack in DEV (#28415)
I'm a bit ambivalent about this one because it's not the main strategy that I plan on pursuing. I plan on replacing most DEV-only specific stacks like `console.error` stacks with a new take on owner stacks and native stacks. The future owner stacks may or may not be exposed to error boundaries in DEV but if they are they'd be a new errorInfo property since they're owner based and not available in prod. The use case in `console.error` mostly goes away in the future so this PR is mainly for error boundaries. It doesn't hurt to have it in there while I'm working on the better stacks though. The `componentStack` property exposed to error boundaries is more like production behavior similar to `new Error().stack` (which even in DEV won't ever expose owner stacks because `console.createTask` doesn't affect these). I'm not sure it's worth adding server components in DEV (this PR) because then you have forked behavior between dev and prod. However, since even in the future there won't be any other place to get the *parent* stack, maybe this can be useful information even if it's only dev. We could expose a third property on errorInfo that's DEV only and parent stack but including server components. That doesn't seem worth it over just having the stack differ in dev and prod. I don't plan on adding line/column number to these particular stacks. A follow up could be to add this to Fizz prerender too but only in DEV.
Sebastian Markbåge committed
Feb 23, 2024 at 12:04 UTC
8fb0233a845974b4b1049e54b6c25dc54d6dd173
6 files changed
+177
packages/react-client/src/__tests__/ReactFlight-test.js
+102
@@ -10,6 +10,15 @@
10
11
'use strict';
12
13
+function normalizeCodeLocInfo(str) {
14
+ return (
15
+ str &&
16
+ str.replace(/\n +(?:at|in) ([\S]+)[^\n]*/g, function (m, name) {
17
+ return '\n in ' + name + (/\d/.test(m) ? ' (at **)' : '');
18
+ })
19
+ );
20
+}
21
+
22
const heldValues = [];
23
let finalizationCallback;
24
function FinalizationRegistryMock(callback) {
@@ -69,6 +78,14 @@ describe('ReactFlight', () => {
78
error,
79
};
80
}
81
+ componentDidCatch(error, errorInfo) {
82
+ expect(error).toBe(this.state.error);
83
+ if (this.props.expectedStack !== undefined) {
84
+ expect(normalizeCodeLocInfo(errorInfo.componentStack)).toBe(
85
+ this.props.expectedStack,
86
+ );
87
+ }
88
+ }
89
componentDidMount() {
90
expect(this.state.hasError).toBe(true);
91
expect(this.state.error).toBeTruthy();
@@ -900,6 +917,91 @@ describe('ReactFlight', () => {
917
});
918
});
919
920
+ it('should include server components in error boundary stacks in dev', async () => {
921
+ const ClientErrorBoundary = clientReference(ErrorBoundary);
922
+
923
+ function Throw({value}) {
924
+ throw value;
925
+ }
926
+
927
+ const expectedStack = __DEV__
928
+ ? // TODO: This should include Throw but it doesn't have a Fiber.
929
+ '\n in div' + '\n in ErrorBoundary (at **)' + '\n in App'
930
+ : '\n in div' + '\n in ErrorBoundary (at **)';
931
+
932
+ function App() {
933
+ return (
934
+ <ClientErrorBoundary
935
+ expectedMessage="This is a real Error."
936
+ expectedStack={expectedStack}>
937
+ <div>
938
+ <Throw value={new TypeError('This is a real Error.')} />
939
+ </div>
940
+ </ClientErrorBoundary>
941
+ );
942
+ }
943
+
944
+ const transport = ReactNoopFlightServer.render(<App />, {
945
+ onError(x) {
946
+ if (__DEV__) {
947
+ return 'a dev digest';
948
+ }
949
+ if (x instanceof Error) {
950
+ return `digest("${x.message}")`;
951
+ } else if (Array.isArray(x)) {
952
+ return `digest([])`;
953
+ } else if (typeof x === 'object' && x !== null) {
954
+ return `digest({})`;
955
+ }
956
+ return `digest(${String(x)})`;
957
+ },
958
+ });
959
+
960
+ await act(() => {
961
+ startTransition(() => {
962
+ ReactNoop.render(ReactNoopFlightClient.read(transport));
963
+ });
964
+ });
965
+ });
966
+
967
+ it('should include server components in warning stacks', async () => {
968
+ function Component() {
969
+ // Trigger key warning
970
+ return <div>{[<span />]}</div>;
971
+ }
972
+ const ClientComponent = clientReference(Component);
973
+
974
+ function Indirection({children}) {
975
+ return children;
976
+ }
977
+
978
+ function App() {
979
+ return (
980
+ <Indirection>
981
+ <ClientComponent />
982
+ </Indirection>
983
+ );
984
+ }
985
+
986
+ const transport = ReactNoopFlightServer.render(<App />);
987
+
988
+ await expect(async () => {
989
+ await act(() => {
990
+ startTransition(() => {
991
+ ReactNoop.render(ReactNoopFlightClient.read(transport));
992
+ });
993
+ });
994
+ }).toErrorDev(
995
+ 'Each child in a list should have a unique "key" prop.\n' +
996
+ '\n' +
997
+ 'Check the render method of `Component`. See https://reactjs.org/link/warning-keys for more information.\n' +
998
+ ' in span (at **)\n' +
999
+ ' in Component (at **)\n' +
1000
+ ' in Indirection (at **)\n' +
1001
+ ' in App (at **)',
1002
+ );
1003
+ });
1004
+
1005
it('should trigger the inner most error boundary inside a Client Component', async () => {
1006
function ServerComponent() {
1007
throw new Error('This was thrown in the Server Component.');
packages/react-devtools-shared/src/__tests__/componentStacks-test.js
+37
@@ -86,4 +86,41 @@ describe('component stack', () => {
86
'\n in Example (at **)',
87
);
88
});
89
+
90
+ // @reactVersion >=18.3
91
+ it('should log the current component stack with debug info from promises', () => {
92
+ const Child = () => {
93
+ console.error('Test error.');
94
+ console.warn('Test warning.');
95
+ return null;
96
+ };
97
+ const ChildPromise = Promise.resolve(<Child />);
98
+ ChildPromise.status = 'fulfilled';
99
+ ChildPromise.value = <Child />;
100
+ ChildPromise._debugInfo = [
101
+ {
102
+ name: 'ServerComponent',
103
+ env: 'Server',
104
+ },
105
+ ];
106
+ const Parent = () => ChildPromise;
107
+ const Grandparent = () => <Parent />;
108
+
109
+ act(() => render(<Grandparent />));
110
+
111
+ expect(mockError).toHaveBeenCalledWith(
112
+ 'Test error.',
113
+ '\n in Child (at **)' +
114
+ '\n in ServerComponent (at **)' +
115
+ '\n in Parent (at **)' +
116
+ '\n in Grandparent (at **)',
117
+ );
118
+ expect(mockWarn).toHaveBeenCalledWith(
119
+ 'Test warning.',
120
+ '\n in Child (at **)' +
121
+ '\n in ServerComponent (at **)' +
122
+ '\n in Parent (at **)' +
123
+ '\n in Grandparent (at **)',
124
+ );
125
+ });
126
});
packages/react-devtools-shared/src/backend/DevToolsComponentStackFrame.js
+7
@@ -50,6 +50,13 @@ export function describeBuiltInComponentFrame(
50
return '\n' + prefix + name;
51
}
52
53
+export function describeDebugInfoFrame(name: string, env: ?string): string {
54
+ return describeBuiltInComponentFrame(
55
+ name + (env ? ' (' + env + ')' : ''),
56
+ null,
57
+ );
58
+}
59
+
60
let reentry = false;
61
let componentFrameCache;
62
if (__DEV__) {
packages/react-devtools-shared/src/backend/DevToolsFiberComponentStack.js
+11
@@ -19,6 +19,7 @@ import {
19
describeBuiltInComponentFrame,
20
describeFunctionComponentFrame,
21
describeClassComponentFrame,
22
+ describeDebugInfoFrame,
23
} from './DevToolsComponentStackFrame';
24
25
export function describeFiber(
@@ -87,6 +88,16 @@ export function getStackByFiberInDevAndProd(
88
let node: Fiber = workInProgress;
89
do {
90
info += describeFiber(workTagMap, node, currentDispatcherRef);
91
+ // Add any Server Component stack frames in reverse order.
92
+ const debugInfo = node._debugInfo;
93
+ if (debugInfo) {
94
+ for (let i = debugInfo.length - 1; i >= 0; i--) {
95
+ const entry = debugInfo[i];
96
+ if (typeof entry.name === 'string') {
97
+ info += describeDebugInfoFrame(entry.name, entry.env);
98
+ }
99
+ }
100
+ }
101
// $FlowFixMe[incompatible-type] we bail out when we get a null
102
node = node.return;
103
} while (node);
packages/react-reconciler/src/ReactFiberComponentStack.js
+13
@@ -26,6 +26,7 @@ import {
26
describeBuiltInComponentFrame,
27
describeFunctionComponentFrame,
28
describeClassComponentFrame,
29
+ describeDebugInfoFrame,
30
} from 'shared/ReactComponentStackFrame';
31
32
function describeFiber(fiber: Fiber): string {
@@ -64,6 +65,18 @@ export function getStackByFiberInDevAndProd(workInProgress: Fiber): string {
65
let node: Fiber = workInProgress;
66
do {
67
info += describeFiber(node);
68
+ if (__DEV__) {
69
+ // Add any Server Component stack frames in reverse order.
70
+ const debugInfo = node._debugInfo;
71
+ if (debugInfo) {
72
+ for (let i = debugInfo.length - 1; i >= 0; i--) {
73
+ const entry = debugInfo[i];
74
+ if (typeof entry.name === 'string') {
75
+ info += describeDebugInfoFrame(entry.name, entry.env);
76
+ }
77
+ }
78
+ }
79
+ }
80
// $FlowFixMe[incompatible-type] we bail out when we get a null
81
node = node.return;
82
} while (node);
packages/shared/ReactComponentStackFrame.js
+7
@@ -51,6 +51,13 @@ export function describeBuiltInComponentFrame(
51
}
52
}
53
54
+export function describeDebugInfoFrame(name: string, env: ?string): string {
55
+ return describeBuiltInComponentFrame(
56
+ name + (env ? ' (' + env + ')' : ''),
57
+ null,
58
+ );
59
+}
60
+
61
let reentry = false;
62
let componentFrameCache;
63
if (__DEV__) {