Fork the "empty" prepareStackTrace case for Server builds (#31427)
We don't actually want the source mapped version of `.stack` from errors because that would cause us to not be able to associate it with a source map in the UIs that need it. The strategy in browsers is more correct where the display is responsible for source maps. That's why we disable any custom `prepareStackTrace` like the ones added by `source-map`. We reset it to `undefined`. However, when running node with `--enable-source-maps` the default for `prepareStackTrace` which is a V8 feature (but may exist elsewhere too like Bun) is a source mapped version of the stack. In those environments we need to reset it to a default implementation that doesn't apply source maps. We already did this in Flight using the `ReactFlightStackConfigV8.js` config. However, we need this more generally in the `shared/ReactComponentStackFrame` implementation. We could always set it to the default implementation instead of `undefined` but that's unnecessary code in browser builds and it might lead to slightly different results. For safety and code size, this PR does it with a fork instead. All builds specific to `node` or `edge` (or `markup` which is a server feature) gets the default implementation where as everything else (e.g. browsers) get `undefined` since it's expected that this is not source mapped. We don't have to do anything about the equivalent in React DevTools since React DevTools doesn't run on the server.
Sebastian Markbåge committed
Nov 5, 2024 at 15:05 UTC
156eab2f7b34fe78ef26a1752f95bfdc2092819d
10 files changed
+150
-72
packages/react-server/src/ReactFlightStackConfigV8.js
+2
-13
@@ -9,18 +9,7 @@
9
10
import type {ReactStackTrace} from 'shared/ReactTypes';
11
12
-function prepareStackTrace(
13
- error: Error,
14
- structuredStackTrace: CallSite[],
15
-): string {
16
- const name = error.name || 'Error';
17
- const message = error.message || '';
18
- let stack = name + ': ' + message;
19
- for (let i = 0; i < structuredStackTrace.length; i++) {
20
- stack += '\n at ' + structuredStackTrace[i].toString();
21
- }
22
- return stack;
23
-}
12
+import DefaultPrepareStackTrace from 'shared/DefaultPrepareStackTrace';
13
14
function getStack(error: Error): string {
15
// We override Error.prepareStackTrace with our own version that normalizes
@@ -30,7 +19,7 @@ function getStack(error: Error): string {
19
// eagerly on the server. If the stack has already been read, then we might
20
// not get a normalized stack and it might still have been source mapped.
21
const previousPrepare = Error.prepareStackTrace;
33
- Error.prepareStackTrace = prepareStackTrace;
22
+ Error.prepareStackTrace = DefaultPrepareStackTrace;
23
try {
24
// eslint-disable-next-line react-internal/safe-string-coercion
25
return String(error.stack);
packages/shared/DefaultPrepareStackTrace.js
new
+12
@@ -0,0 +1,12 @@
1
+/**
2
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
3
+ *
4
+ * This source code is licensed under the MIT license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ *
7
+ * @flow
8
+ */
9
+
10
+// This is forked in server builds where the default stack frame may be source mapped.
11
+
12
+export default ((undefined: any): (Error, CallSite[]) => string);
packages/shared/DefaultPrepareStackTraceV8.js
new
+25
@@ -0,0 +1,25 @@
1
+/**
2
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
3
+ *
4
+ * This source code is licensed under the MIT license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ *
7
+ * @flow
8
+ */
9
+
10
+// This file replaces DefaultPrepareStackTrace in Edge/Node Server builds.
11
+
12
+function prepareStackTrace(
13
+ error: Error,
14
+ structuredStackTrace: CallSite[],
15
+): string {
16
+ const name = error.name || 'Error';
17
+ const message = error.message || '';
18
+ let stack = name + ': ' + message;
19
+ for (let i = 0; i < structuredStackTrace.length; i++) {
20
+ stack += '\n at ' + structuredStackTrace[i].toString();
21
+ }
22
+ return stack;
23
+}
24
+
25
+export default prepareStackTrace;
packages/shared/ReactComponentStackFrame.js
+3
-2
@@ -23,6 +23,8 @@ import {disableLogs, reenableLogs} from 'shared/ConsolePatchingDev';
23
24
import ReactSharedInternals from 'shared/ReactSharedInternals';
25
26
+import DefaultPrepareStackTrace from 'shared/DefaultPrepareStackTrace';
27
+
28
let prefix;
29
let suffix;
30
export function describeBuiltInComponentFrame(name: string): string {
@@ -92,8 +94,7 @@ export function describeNativeComponentFrame(
94
95
reentry = true;
96
const previousPrepareStackTrace = Error.prepareStackTrace;
95
- // $FlowFixMe[incompatible-type] It does accept undefined.
96
- Error.prepareStackTrace = undefined;
97
+ Error.prepareStackTrace = DefaultPrepareStackTrace;
98
let previousDispatcher = null;
99
100
if (__DEV__) {
packages/shared/ReactOwnerStackFrames.js
+3
-2
@@ -7,10 +7,11 @@
7
* @flow
8
*/
9
10
+import DefaultPrepareStackTrace from 'shared/DefaultPrepareStackTrace';
11
+
12
export function formatOwnerStack(error: Error): string {
13
const prevPrepareStackTrace = Error.prepareStackTrace;
12
- // $FlowFixMe[incompatible-type] It does accept undefined.
13
- Error.prepareStackTrace = undefined;
14
+ Error.prepareStackTrace = DefaultPrepareStackTrace;
15
let stack = error.stack;
16
Error.prepareStackTrace = prevPrepareStackTrace;
17
if (stack.startsWith('Error: react-stack-top-frame\n')) {
packages/shared/forks/DefaultPrepareStackTrace.dom-edge.js
new
+10
@@ -0,0 +1,10 @@
1
+/**
2
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
3
+ *
4
+ * This source code is licensed under the MIT license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ *
7
+ * @flow
8
+ */
9
+
10
+export {default} from '../DefaultPrepareStackTraceV8';
packages/shared/forks/DefaultPrepareStackTrace.dom-node.js
new
+10
@@ -0,0 +1,10 @@
1
+/**
2
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
3
+ *
4
+ * This source code is licensed under the MIT license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ *
7
+ * @flow
8
+ */
9
+
10
+export {default} from '../DefaultPrepareStackTraceV8';
packages/shared/forks/DefaultPrepareStackTrace.markup.js
new
+10
@@ -0,0 +1,10 @@
1
+/**
2
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
3
+ *
4
+ * This source code is licensed under the MIT license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ *
7
+ * @flow
8
+ */
9
+
10
+export {default} from '../DefaultPrepareStackTraceV8';
scripts/rollup/forks.js
+30
@@ -217,6 +217,36 @@ const forks = Object.freeze({
217
}
218
},
219
220
+ './packages/shared/DefaultPrepareStackTrace.js': (
221
+ bundleType,
222
+ entry,
223
+ dependencies,
224
+ moduleType
225
+ ) => {
226
+ if (moduleType !== RENDERER && moduleType !== RECONCILER) {
227
+ return null;
228
+ }
229
+ // eslint-disable-next-line no-for-of-loops/no-for-of-loops
230
+ for (let rendererInfo of inlinedHostConfigs) {
231
+ if (rendererInfo.entryPoints.indexOf(entry) !== -1) {
232
+ if (!rendererInfo.isServerSupported) {
233
+ return null;
234
+ }
235
+ const foundFork = findNearestExistingForkFile(
236
+ './packages/shared/forks/DefaultPrepareStackTrace.',
237
+ rendererInfo.shortName,
238
+ '.js'
239
+ );
240
+ if (foundFork) {
241
+ return foundFork;
242
+ }
243
+ // fall through to error
244
+ break;
245
+ }
246
+ }
247
+ return null;
248
+ },
249
+
250
'./packages/react-reconciler/src/ReactFiberConfig.js': (
251
bundleType,
252
entry,
scripts/shared/inlinedHostConfigs.js
+45
-55
@@ -8,12 +8,55 @@
8
9
module.exports = [
10
{
11
- shortName: 'dom-node',
11
+ shortName: 'dom-browser',
12
entryPoints: [
13
'react-dom',
14
'react-dom/client',
15
'react-dom/profiling',
16
'react-dom/unstable_testing',
17
+ 'react-dom/src/server/react-dom-server.browser.js',
18
+ 'react-dom/static.browser',
19
+ 'react-dom/unstable_server-external-runtime',
20
+ 'react-server-dom-webpack/client.browser',
21
+ 'react-server-dom-webpack/src/server/react-flight-dom-server.browser',
22
+ ],
23
+ paths: [
24
+ 'react-dom',
25
+ 'react-dom/src/ReactDOMReactServer.js',
26
+ 'react-dom-bindings',
27
+ 'react-dom/client',
28
+ 'react-dom/profiling',
29
+ 'react-dom/server.browser',
30
+ 'react-dom/static.browser',
31
+ 'react-dom/unstable_testing',
32
+ 'react-dom/src/server/react-dom-server.browser',
33
+ 'react-dom/src/server/ReactDOMFizzServerBrowser.js', // react-dom/server.browser
34
+ 'react-dom/src/server/ReactDOMFizzStaticBrowser.js',
35
+ 'react-dom-bindings/src/server/ReactDOMFlightServerHostDispatcher.js',
36
+ 'react-dom-bindings/src/server/ReactFlightServerConfigDOM.js',
37
+ 'react-dom-bindings/src/shared/ReactFlightClientConfigDOM.js',
38
+ 'react-server-dom-webpack',
39
+ 'react-server-dom-webpack/client',
40
+ 'react-server-dom-webpack/client.browser',
41
+ 'react-server-dom-webpack/server.browser',
42
+ 'react-server-dom-webpack/static.browser',
43
+ 'react-server-dom-webpack/src/client/ReactFlightDOMClientBrowser.js', // react-server-dom-webpack/client.browser
44
+ 'react-server-dom-webpack/src/client/ReactFlightClientConfigBundlerWebpack.js',
45
+ 'react-server-dom-webpack/src/client/ReactFlightClientConfigBundlerWebpackBrowser.js',
46
+ 'react-server-dom-webpack/src/server/react-flight-dom-server.browser',
47
+ 'react-server-dom-webpack/src/server/ReactFlightDOMServerBrowser.js', // react-server-dom-webpack/src/server/react-flight-dom-server.browser
48
+ 'react-devtools',
49
+ 'react-devtools-core',
50
+ 'react-devtools-shell',
51
+ 'react-devtools-shared',
52
+ 'shared/ReactDOMSharedInternals',
53
+ ],
54
+ isFlowTyped: true,
55
+ isServerSupported: true,
56
+ },
57
+ {
58
+ shortName: 'dom-node',
59
+ entryPoints: [
60
'react-dom/src/ReactDOMReactServer.js',
61
'react-dom/src/server/react-dom-server.node.js',
62
'react-dom/static.node',
@@ -148,13 +191,7 @@ module.exports = [
191
},
192
{
193
shortName: 'dom-bun',
151
- entryPoints: [
152
- 'react-dom',
153
- 'react-dom/client',
154
- 'react-dom/profiling',
155
- 'react-dom/unstable_testing',
156
- 'react-dom/src/server/react-dom-server.bun.js',
157
- ],
194
+ entryPoints: ['react-dom/src/server/react-dom-server.bun.js'],
195
paths: [
196
'react-dom',
197
'react-dom/client',
@@ -171,53 +208,6 @@ module.exports = [
208
isFlowTyped: true,
209
isServerSupported: true,
210
},
174
- {
175
- shortName: 'dom-browser',
176
- entryPoints: [
177
- 'react-dom',
178
- 'react-dom/client',
179
- 'react-dom/profiling',
180
- 'react-dom/unstable_testing',
181
- 'react-dom/src/server/react-dom-server.browser.js',
182
- 'react-dom/static.browser',
183
- 'react-dom/unstable_server-external-runtime',
184
- 'react-server-dom-webpack/client.browser',
185
- 'react-server-dom-webpack/src/server/react-flight-dom-server.browser',
186
- ],
187
- paths: [
188
- 'react-dom',
189
- 'react-dom/src/ReactDOMReactServer.js',
190
- 'react-dom-bindings',
191
- 'react-dom/client',
192
- 'react-dom/profiling',
193
- 'react-dom/server.browser',
194
- 'react-dom/static.browser',
195
- 'react-dom/unstable_testing',
196
- 'react-dom/src/server/react-dom-server.browser',
197
- 'react-dom/src/server/ReactDOMFizzServerBrowser.js', // react-dom/server.browser
198
- 'react-dom/src/server/ReactDOMFizzStaticBrowser.js',
199
- 'react-dom-bindings/src/server/ReactDOMFlightServerHostDispatcher.js',
200
- 'react-dom-bindings/src/server/ReactFlightServerConfigDOM.js',
201
- 'react-dom-bindings/src/shared/ReactFlightClientConfigDOM.js',
202
- 'react-server-dom-webpack',
203
- 'react-server-dom-webpack/client',
204
- 'react-server-dom-webpack/client.browser',
205
- 'react-server-dom-webpack/server.browser',
206
- 'react-server-dom-webpack/static.browser',
207
- 'react-server-dom-webpack/src/client/ReactFlightDOMClientBrowser.js', // react-server-dom-webpack/client.browser
208
- 'react-server-dom-webpack/src/client/ReactFlightClientConfigBundlerWebpack.js',
209
- 'react-server-dom-webpack/src/client/ReactFlightClientConfigBundlerWebpackBrowser.js',
210
- 'react-server-dom-webpack/src/server/react-flight-dom-server.browser',
211
- 'react-server-dom-webpack/src/server/ReactFlightDOMServerBrowser.js', // react-server-dom-webpack/src/server/react-flight-dom-server.browser
212
- 'react-devtools',
213
- 'react-devtools-core',
214
- 'react-devtools-shell',
215
- 'react-devtools-shared',
216
- 'shared/ReactDOMSharedInternals',
217
- ],
218
- isFlowTyped: true,
219
- isServerSupported: true,
220
- },
211
{
212
shortName: 'dom-browser-esm',
213
entryPoints: ['react-server-dom-esm/client.browser'],