OSSForks/react
1
0
Fork 0
mirror of https://github.com/zebrajr/react.git synced 2025-12-06 12:20:20 +01:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

Badge Environment Name on Thrown Errors from the Server (#29846)

Browse Source 
When we replay logs we badge them with e.g. `[Server]`. That way it's
easy to identify that the source of the log actually happened on the
Server (RSC). However, when we threw an error we didn't have any such
thing. The error was rethrown on the client and then handled just like
any other client error.

This transfers the `environmentName` in DEV to our restored Error
"sub-class" (conceptually) along with `digest`. That way you can read
`error.environmentName` to print this in your own UI.

I also updated our default for `onCaughtError` (and `onError` in Fizz)
to use the `printToConsole` helper that the Flight Client uses to log it
with the badge format. So by default you get the same experience as
console.error for caught errors:

<img width="810" alt="Screenshot 2024-06-10 at 9 25 12 PM"
src="https://github.com/facebook/react/assets/63648/8490fedc-09f6-4286-9332-fbe6b0faa2d3">

<img width="815" alt="Screenshot 2024-06-10 at 9 39 30 PM"
src="https://github.com/facebook/react/assets/63648/bdcfc554-504a-4b1d-82bf-b717e74975ac">

Unfortunately I can't do the same thing for `onUncaughtError` nor
`onRecoverableError` because they use `reportError` which doesn't have
custom formatting (unless we also prevented default on window.onerror).
However maybe that's ok because 1) you should always have an error
boundary 2) it's not likely that an RSC error can actually recover
because it's not going to be rendered again so shouldn't really happen
outside some parent conditionally rendering maybe.

The other problem with this approach is that the default is no longer
trivial - so reimplementing the default in user space is trickier and
ideally we shouldn't expose our default to be called.
This commit is contained in:
Sebastian Markbåge 2024-06-26 19:27:26 +02:00 committed by GitHub
parent 7045700a6d
commit 349a99a7a3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
34 changed files with 134 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
packages/internal-test-utils/consoleMock.js
View File

@ -418,14 +418,19 @@ export function createLogAssertion(
let argIndex = 0;
// console.* could have been called with a non-string e.g. `console.error(new Error())`
// eslint-disable-next-line react-internal/safe-string-coercion
String(format).replace(/%s/g, () => argIndex++);
String(format).replace(/%s|%c/g, () => argIndex++);
if (argIndex !== args.length) {
if (format.includes('%c%s')) {
// We intentionally use mismatching formatting when printing badging because we don't know
// the best default to use for different types because the default varies by platform.
} else {
logsMismatchingFormat.push({
format,
args,
expectedArgCount: argIndex,
});
}
}
// Check for extra component stacks
if (

4
packages/internal-test-utils/shouldIgnoreConsoleError.js
View File

@ -3,6 +3,10 @@
module.exports = function shouldIgnoreConsoleError(format, args) {
if (__DEV__) {
if (typeof format === 'string') {
if (format.startsWith('%c%s')) {
// Looks like a badged error message
args.splice(0, 3);
}
if (
args[0] != null &&
((typeof args[0] === 'object' &&

9
packages/react-client/src/ReactFlightClientConsoleConfigBrowser.js → packages/react-client/src/ReactClientConsoleConfigBrowser.js vendored
View File

@ -7,6 +7,8 @@
* @flow
*/
import {warn, error} from 'shared/consoleWithStackDev';
const badgeFormat = '%c%s%c ';
// Same badge styling as DevTools.
const badgeStyle =
@ -63,7 +65,12 @@ export function printToConsole(
);
}
if (methodName === 'error') {
error.apply(console, newArgs);
} else if (methodName === 'warn') {
warn.apply(console, newArgs);
} else {
// eslint-disable-next-line react-internal/no-production-logging
console[methodName].apply(console, newArgs);
return;
}
}

9
packages/react-client/src/ReactFlightClientConsoleConfigPlain.js → packages/react-client/src/ReactClientConsoleConfigPlain.js vendored
View File

@ -7,6 +7,8 @@
* @flow
*/
import {warn, error} from 'shared/consoleWithStackDev';
const badgeFormat = '[%s] ';
const pad = ' ';
@ -44,7 +46,12 @@ export function printToConsole(
newArgs.splice(offset, 0, badgeFormat, pad + badgeName + pad);
}
if (methodName === 'error') {
error.apply(console, newArgs);
} else if (methodName === 'warn') {
warn.apply(console, newArgs);
} else {
// eslint-disable-next-line react-internal/no-production-logging
console[methodName].apply(console, newArgs);
return;
}
}

9
packages/react-client/src/ReactFlightClientConsoleConfigServer.js → packages/react-client/src/ReactClientConsoleConfigServer.js vendored
View File

@ -7,6 +7,8 @@
* @flow
*/
import {warn, error} from 'shared/consoleWithStackDev';
// This flips color using ANSI, then sets a color styling, then resets.
const badgeFormat = '\x1b[0m\x1b[7m%c%s\x1b[0m%c ';
// Same badge styling as DevTools.
@ -64,7 +66,12 @@ export function printToConsole(
);
}
if (methodName === 'error') {
error.apply(console, newArgs);
} else if (methodName === 'warn') {
warn.apply(console, newArgs);
} else {
// eslint-disable-next-line react-internal/no-production-logging
console[methodName].apply(console, newArgs);
return;
}
}

5
packages/react-client/src/ReactFlightClient.js vendored
View File

@ -1730,6 +1730,7 @@ function resolveErrorDev(
digest: string,
message: string,
stack: string,
env: string,
): void {
if (!__DEV__) {
// These errors should never make it into a build so we don't need to encode them in codes.json
@ -1769,6 +1770,7 @@ function resolveErrorDev(
}
(error: any).digest = digest;
(error: any).environmentName = env;
const errorWithDigest: ErrorWithDigest = (error: any);
const chunks = response._chunks;
const chunk = chunks.get(id);
@ -2056,6 +2058,8 @@ function resolveConsoleEntry(
task.run(callStack);
return;
}
// TODO: Set the current owner so that consoleWithStackDev adds the component
// stack during the replay - if needed.
}
const rootTask = response._debugRootTask;
if (rootTask != null) {
@ -2198,6 +2202,7 @@ function processFullRow(
errorInfo.digest,
errorInfo.message,
errorInfo.stack,
errorInfo.env,
);
} else {
resolveErrorProd(response, id, errorInfo.digest);

2
packages/react-client/src/__tests__/ReactFlight-test.js vendored
View File

@ -127,6 +127,7 @@ describe('ReactFlight', () => {
this.props.expectedMessage,
);
expect(this.state.error.digest).toBe('a dev digest');
expect(this.state.error.environmentName).toBe('Server');
} else {
expect(this.state.error.message).toBe(
'An error occurred in the Server Components render. The specific message is omitted in production' +
@ -143,6 +144,7 @@ describe('ReactFlight', () => {
expectedDigest = '[]';
}
expect(this.state.error.digest).toContain(expectedDigest);
expect(this.state.error.environmentName).toBe(undefined);
expect(this.state.error.stack).toBe(
'Error: ' + this.state.error.message,
);

2
packages/react-client/src/forks/ReactFlightClientConfig.dom-browser-esm.js
View File

@ -8,7 +8,7 @@
*/
export * from 'react-client/src/ReactFlightClientStreamConfigWeb';
export * from 'react-client/src/ReactFlightClientConsoleConfigBrowser';
export * from 'react-client/src/ReactClientConsoleConfigBrowser';
export * from 'react-server-dom-esm/src/ReactFlightClientConfigBundlerESM';
export * from 'react-server-dom-esm/src/ReactFlightClientConfigTargetESMBrowser';
export * from 'react-dom-bindings/src/shared/ReactFlightClientConfigDOM';

2
packages/react-client/src/forks/ReactFlightClientConfig.dom-browser-turbopack.js
View File

@ -8,7 +8,7 @@
*/
export * from 'react-client/src/ReactFlightClientStreamConfigWeb';
export * from 'react-client/src/ReactFlightClientConsoleConfigBrowser';
export * from 'react-client/src/ReactClientConsoleConfigBrowser';
export * from 'react-server-dom-turbopack/src/ReactFlightClientConfigBundlerTurbopack';
export * from 'react-server-dom-turbopack/src/ReactFlightClientConfigBundlerTurbopackBrowser';
export * from 'react-server-dom-turbopack/src/ReactFlightClientConfigTargetTurbopackBrowser';

2
packages/react-client/src/forks/ReactFlightClientConfig.dom-browser.js
View File

@ -8,7 +8,7 @@
*/
export * from 'react-client/src/ReactFlightClientStreamConfigWeb';
export * from 'react-client/src/ReactFlightClientConsoleConfigBrowser';
export * from 'react-client/src/ReactClientConsoleConfigBrowser';
export * from 'react-server-dom-webpack/src/ReactFlightClientConfigBundlerWebpack';
export * from 'react-server-dom-webpack/src/ReactFlightClientConfigBundlerWebpackBrowser';
export * from 'react-server-dom-webpack/src/ReactFlightClientConfigTargetWebpackBrowser';

2
packages/react-client/src/forks/ReactFlightClientConfig.dom-bun.js
View File

@ -8,7 +8,7 @@
*/
export * from 'react-client/src/ReactFlightClientStreamConfigWeb';
export * from 'react-client/src/ReactFlightClientConsoleConfigPlain';
export * from 'react-client/src/ReactClientConsoleConfigPlain';
export * from 'react-dom-bindings/src/shared/ReactFlightClientConfigDOM';
export type Response = any;

2
packages/react-client/src/forks/ReactFlightClientConfig.dom-edge-turbopack.js
View File

@ -8,7 +8,7 @@
*/
export * from 'react-client/src/ReactFlightClientStreamConfigWeb';
export * from 'react-client/src/ReactFlightClientConsoleConfigServer';
export * from 'react-client/src/ReactClientConsoleConfigServer';
export * from 'react-server-dom-turbopack/src/ReactFlightClientConfigBundlerTurbopack';
export * from 'react-server-dom-turbopack/src/ReactFlightClientConfigBundlerTurbopackServer';
export * from 'react-server-dom-turbopack/src/ReactFlightClientConfigTargetTurbopackServer';

2
packages/react-client/src/forks/ReactFlightClientConfig.dom-edge-webpack.js
View File

@ -8,7 +8,7 @@
*/
export * from 'react-client/src/ReactFlightClientStreamConfigWeb';
export * from 'react-client/src/ReactFlightClientConsoleConfigServer';
export * from 'react-client/src/ReactClientConsoleConfigServer';
export * from 'react-server-dom-webpack/src/ReactFlightClientConfigBundlerWebpack';
export * from 'react-server-dom-webpack/src/ReactFlightClientConfigBundlerWebpackServer';
export * from 'react-server-dom-webpack/src/ReactFlightClientConfigTargetWebpackServer';

2
packages/react-client/src/forks/ReactFlightClientConfig.dom-legacy.js
View File

@ -8,7 +8,7 @@
*/
export * from 'react-client/src/ReactFlightClientStreamConfigWeb';
export * from 'react-client/src/ReactFlightClientConsoleConfigBrowser';
export * from 'react-client/src/ReactClientConsoleConfigBrowser';
export * from 'react-dom-bindings/src/shared/ReactFlightClientConfigDOM';
export type Response = any;

2
packages/react-client/src/forks/ReactFlightClientConfig.dom-node-esm.js
View File

@ -8,7 +8,7 @@
*/
export * from 'react-client/src/ReactFlightClientStreamConfigNode';
export * from 'react-client/src/ReactFlightClientConsoleConfigServer';
export * from 'react-client/src/ReactClientConsoleConfigServer';
export * from 'react-server-dom-esm/src/ReactFlightClientConfigBundlerESM';
export * from 'react-server-dom-esm/src/ReactFlightClientConfigTargetESMServer';
export * from 'react-dom-bindings/src/shared/ReactFlightClientConfigDOM';

2
packages/react-client/src/forks/ReactFlightClientConfig.dom-node-turbopack-bundled.js
View File

@ -8,7 +8,7 @@
*/
export * from 'react-client/src/ReactFlightClientStreamConfigNode';
export * from 'react-client/src/ReactFlightClientConsoleConfigServer';
export * from 'react-client/src/ReactClientConsoleConfigServer';
export * from 'react-server-dom-turbopack/src/ReactFlightClientConfigBundlerTurbopack';
export * from 'react-server-dom-turbopack/src/ReactFlightClientConfigBundlerTurbopackServer';
export * from 'react-server-dom-turbopack/src/ReactFlightClientConfigTargetTurbopackServer';

2
packages/react-client/src/forks/ReactFlightClientConfig.dom-node-turbopack.js
View File

@ -8,7 +8,7 @@
*/
export * from 'react-client/src/ReactFlightClientStreamConfigNode';
export * from 'react-client/src/ReactFlightClientConsoleConfigServer';
export * from 'react-client/src/ReactClientConsoleConfigServer';
export * from 'react-server-dom-turbopack/src/ReactFlightClientConfigBundlerNode';
export * from 'react-server-dom-turbopack/src/ReactFlightClientConfigTargetTurbopackServer';
export * from 'react-dom-bindings/src/shared/ReactFlightClientConfigDOM';

2
packages/react-client/src/forks/ReactFlightClientConfig.dom-node-webpack.js
View File

@ -8,7 +8,7 @@
*/
export * from 'react-client/src/ReactFlightClientStreamConfigNode';
export * from 'react-client/src/ReactFlightClientConsoleConfigServer';
export * from 'react-client/src/ReactClientConsoleConfigServer';
export * from 'react-server-dom-webpack/src/ReactFlightClientConfigBundlerWebpack';
export * from 'react-server-dom-webpack/src/ReactFlightClientConfigBundlerWebpackServer';
export * from 'react-server-dom-webpack/src/ReactFlightClientConfigTargetWebpackServer';

2
packages/react-client/src/forks/ReactFlightClientConfig.dom-node.js
View File

@ -8,7 +8,7 @@
*/
export * from 'react-client/src/ReactFlightClientStreamConfigNode';
export * from 'react-client/src/ReactFlightClientConsoleConfigServer';
export * from 'react-client/src/ReactClientConsoleConfigServer';
export * from 'react-server-dom-webpack/src/ReactFlightClientConfigBundlerNode';
export * from 'react-server-dom-webpack/src/ReactFlightClientConfigTargetWebpackServer';
export * from 'react-dom-bindings/src/shared/ReactFlightClientConfigDOM';

5
packages/react-noop-renderer/src/createReactNoop.js vendored
View File

@ -635,6 +635,11 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
NotPendingTransition: (null: TransitionStatus),
resetFormInstance(form: Instance) {},
printToConsole(methodName, args, badgeName) {
// eslint-disable-next-line react-internal/no-production-logging
console[methodName].apply(console, args);
},
};
const hostConfig = useMutation

22
packages/react-reconciler/src/ReactFiberErrorLogger.js vendored
View File

@ -20,6 +20,8 @@ import ReactSharedInternals from 'shared/ReactSharedInternals';
import {enableOwnerStacks} from 'shared/ReactFeatureFlags';
import {printToConsole} from './ReactFiberConfig';
// Side-channel since I'm not sure we want to make this part of the public API
let componentName: null | string = null;
let errorBoundaryName: null | string = null;
@ -94,6 +96,25 @@ export function defaultOnCaughtError(
}.`;
if (enableOwnerStacks) {
if (
typeof error === 'object' &&
error !== null &&
typeof error.environmentName === 'string'
) {
// This was a Server error. We print the environment name in a badge just like we do with
// replays of console logs to indicate that the source of this throw as actually the Server.
printToConsole(
'error',
[
'%o\n\n%s\n\n%s\n',
error,
componentNameMessage,
recreateMessage,
// We let our consoleWithStackDev wrapper add the component stack to the end.
],
error.environmentName,
);
} else {
console.error(
'%o\n\n%s\n\n%s\n',
error,
@ -101,6 +122,7 @@ export function defaultOnCaughtError(
recreateMessage,
// We let our consoleWithStackDev wrapper add the component stack to the end.
);
}
} else {
// The current Fiber is disconnected at this point which means that console printing
// cannot add a component stack since it terminates at the deletion node. This is not

1
packages/react-reconciler/src/forks/ReactFiberConfig.art.js
View File

@ -8,3 +8,4 @@
*/
export * from 'react-art/src/ReactFiberConfigART';
export * from 'react-client/src/ReactClientConsoleConfigBrowser';

1
packages/react-reconciler/src/forks/ReactFiberConfig.custom.js
View File

@ -80,6 +80,7 @@ export const suspendInstance = $$$config.suspendInstance;
export const waitForCommitToBeReady = $$$config.waitForCommitToBeReady;
export const NotPendingTransition = $$$config.NotPendingTransition;
export const resetFormInstance = $$$config.resetFormInstance;
export const printToConsole = $$$config.printToConsole;
// -------------------
// Microtasks

1
packages/react-reconciler/src/forks/ReactFiberConfig.dom.js
View File

@ -8,3 +8,4 @@
*/
export * from 'react-dom-bindings/src/client/ReactFiberConfigDOM';
export * from 'react-client/src/ReactClientConsoleConfigBrowser';

1
packages/react-reconciler/src/forks/ReactFiberConfig.fabric.js
View File

@ -8,3 +8,4 @@
*/
export * from 'react-native-renderer/src/ReactFiberConfigFabric';
export * from 'react-client/src/ReactClientConsoleConfigPlain';

1
packages/react-reconciler/src/forks/ReactFiberConfig.native.js
View File

@ -8,3 +8,4 @@
*/
export * from 'react-native-renderer/src/ReactFiberConfigNative';
export * from 'react-client/src/ReactClientConsoleConfigPlain';

1
packages/react-reconciler/src/forks/ReactFiberConfig.test.js
View File

@ -8,3 +8,4 @@
*/
export * from 'react-test-renderer/src/ReactFiberConfigTestHost';
export * from 'react-client/src/ReactClientConsoleConfigPlain';

11
packages/react-server/src/ReactFizzServer.js vendored
View File

@ -78,6 +78,7 @@ import {
resetResumableState,
completeResumableState,
emitEarlyPreloads,
printToConsole,
} from './ReactFizzConfig';
import {
constructClassInstance,
@ -363,7 +364,17 @@ export opaque type Request = {
const DEFAULT_PROGRESSIVE_CHUNK_SIZE = 12800;
function defaultErrorHandler(error: mixed) {
if (
typeof error === 'object' &&
error !== null &&
typeof error.environmentName === 'string'
) {
// This was a Server error. We print the environment name in a badge just like we do with
// replays of console logs to indicate that the source of this throw as actually the Server.
printToConsole('error', [error], error.environmentName);
} else {
console['error'](error); // Don't transform to our wrapper
}
return null;
}

9
packages/react-server/src/ReactFlightServer.js vendored
View File

@ -2774,11 +2774,18 @@ function emitErrorChunk(
if (__DEV__) {
let message;
let stack = '';
let env = request.environmentName();
try {
if (error instanceof Error) {
// eslint-disable-next-line react-internal/safe-string-coercion
message = String(error.message);
stack = getStack(error);
const errorEnv = (error: any).environmentName;
if (typeof errorEnv === 'string') {
// This probably came from another FlightClient as a pass through.
// Keep the environment name.
env = errorEnv;
}
} else if (typeof error === 'object' && error !== null) {
message = describeObjectForErrorMessage(error);
} else {
@ -2788,7 +2795,7 @@ function emitErrorChunk(
} catch (x) {
message = 'An error occurred but serializing the error message failed.';
}
errorInfo = {digest, message, stack};
errorInfo = {digest, message, stack, env};
} else {
errorInfo = {digest};
}

2
packages/react-server/src/forks/ReactFizzConfig.custom.js
View File

@ -40,6 +40,8 @@ export const isPrimaryRenderer = false;
export const supportsRequestStorage = false;
export const requestStorage: AsyncLocalStorage<Request | void> = (null: any);
export const printToConsole = $$$config.printToConsole;
export const resetResumableState = $$$config.resetResumableState;
export const completeResumableState = $$$config.completeResumableState;
export const getChildFormatContext = $$$config.getChildFormatContext;

2
packages/react-server/src/forks/ReactFizzConfig.dom-edge.js
View File

@ -10,6 +10,8 @@ import type {Request} from 'react-server/src/ReactFizzServer';
export * from 'react-dom-bindings/src/server/ReactFizzConfigDOM';
export * from 'react-client/src/ReactClientConsoleConfigServer';
// For now, we get this from the global scope, but this will likely move to a module.
export const supportsRequestStorage = typeof AsyncLocalStorage === 'function';
export const requestStorage: AsyncLocalStorage<Request | void> =

2
packages/react-server/src/forks/ReactFizzConfig.dom-legacy.js
View File

@ -10,5 +10,7 @@ import type {Request} from 'react-server/src/ReactFizzServer';
export * from 'react-dom-bindings/src/server/ReactFizzConfigDOMLegacy';
export * from 'react-client/src/ReactClientConsoleConfigPlain';
export const supportsRequestStorage = false;
export const requestStorage: AsyncLocalStorage<Request | void> = (null: any);

2
packages/react-server/src/forks/ReactFizzConfig.dom-node.js
View File

@ -13,6 +13,8 @@ import type {Request} from 'react-server/src/ReactFizzServer';
export * from 'react-dom-bindings/src/server/ReactFizzConfigDOM';
export * from 'react-client/src/ReactClientConsoleConfigServer';
export const supportsRequestStorage = true;
export const requestStorage: AsyncLocalStorage<Request | void> =
new AsyncLocalStorage();

2
packages/react-server/src/forks/ReactFizzConfig.dom.js
View File

@ -10,5 +10,7 @@ import type {Request} from 'react-server/src/ReactFizzServer';
export * from 'react-dom-bindings/src/server/ReactFizzConfigDOM';
export * from 'react-client/src/ReactClientConsoleConfigBrowser';
export const supportsRequestStorage = false;
export const requestStorage: AsyncLocalStorage<Request | void> = (null: any);