@samitouri / QOS-React-2 / commits / a8b465c6e0

fix[react-devtools]: restore original args when recording errors (#30091)

## Summary When DevTools frontend and backend are connected, we patch console in 2 places: - `patch()`, when renderer is attached to: - listen to any errors / warnings emitted - append component stack if requested by the user - `patchForStrictMode()`, when React notifies about that the next invocation is about to happed during StrictMode `patchForStrictMode()` will always be at the top of the patch stack, because it is called at runtime when React notifies React DevTools, because of this, `patch()` may receive already modified arguments (with stylings for dimming), we should attempt to restore the original arguments ## How did you test this change? Look at yellow warnings on the element view: | Before | After | | --- | --- | | ![Screenshot 2024-06-25 at 14 38 26](https://github.com/facebook/react/assets/28902667/6b0ec512-f0c9-4557-a524-d7f31b03464d) | ![Screenshot 2024-06-25 at 17 26 23](https://github.com/facebook/react/assets/28902667/60ff5d80-06ea-4447-bbe8-b57bc0c63f6d) |

Ruslan Lesiutin committed Jun 26, 2024 at 14:17 UTC a8b465c6e0576b9ac490c2e2762c273db314dfcf
1 file changed +18 -3
packages/react-devtools-shared/src/backend/console.js
+18 -3
@@ -51,7 +51,7 @@ const STYLE_DIRECTIVE_REGEX = /^%c/;
51 // method has been overridden by the patchForStrictMode function.
52 // If it has we'll need to do some special formatting of the arguments
53 // so the console color stays consistent
54 -function isStrictModeOverride(args: Array<string>): boolean {
54 +function isStrictModeOverride(args: Array<any>): boolean {
55 if (__IS_FIREFOX__) {
56 return (
57 args.length >= 2 &&
@@ -63,6 +63,21 @@ function isStrictModeOverride(args: Array<string>): boolean {
63 }
64 }
65
66 +function restorePotentiallyModifiedArgs(args: Array<any>): Array<any> {
67 + // If the arguments don't have any styles applied, then just copy
68 + if (!isStrictModeOverride(args)) {
69 + return args.slice();
70 + }
71 +
72 + if (__IS_FIREFOX__) {
73 + // Filter out %c from the start of the first argument and color as a second argument
74 + return [args[0].slice(2)].concat(args.slice(2));
75 + } else {
76 + // Filter out the `\x1b...%s\x1b` template
77 + return args.slice(1);
78 + }
79 +}
80 +
81 type OnErrorOrWarning = (
82 fiber: Fiber,
83 type: 'error' | 'warn',
@@ -220,8 +235,8 @@ export function patch({
235 onErrorOrWarning(
236 current,
237 ((method: any): 'error' | 'warn'),
223 - // Copy args before we mutate them (e.g. adding the component stack)
224 - args.slice(),
238 + // Restore and copy args before we mutate them (e.g. adding the component stack)
239 + restorePotentiallyModifiedArgs(args),
240 );
241 }
242 }