From 851560223d181b0fc514e28f0a91199a8899f479 Mon Sep 17 00:00:00 2001 From: Sebastian Markbage Date: Fri, 23 Feb 2024 12:32:13 -0500 Subject: [PATCH] Remove method name prefix from warnings and errors This pattern is a petpeeve of mine. I don't consider this best practice and so most don't have these prefixes. Very inconsistent. At best this is useless and noisey that you have to parse because the information is also in the stack trace. At worse these are misleading because they'rehighlighting something internal (like validateDOMNesting) which even suggests an internal bug. Even the ones public to React aren't necessarily what you called because you might be calling a wrapper around it. That would be properly reflected in a stack trace - which can also properly ignore list so that the first stack you see is your callsite, Which might be like render() in react-testing-library rather than createRoot() for example. --- .../src/client/validateDOMNesting.js | 12 ++-- .../__tests__/ReactCompositeComponent-test.js | 26 ++++---- .../react-dom/src/__tests__/ReactDOM-test.js | 12 ++-- .../src/__tests__/ReactDOMComponent-test.js | 14 ++-- .../src/__tests__/ReactDOMFloat-test.js | 20 +++--- .../src/__tests__/ReactDOMForm-test.js | 2 +- ...actDOMLegacyComponentTree-test.internal.js | 2 +- .../src/__tests__/ReactDOMLegacyFiber-test.js | 6 +- .../src/__tests__/ReactDOMOption-test.js | 4 +- .../src/__tests__/ReactDOMRoot-test.js | 12 ++-- .../ReactDOMServerLifecycles-test.js | 2 +- .../__tests__/ReactFunctionComponent-test.js | 3 +- .../src/__tests__/ReactLegacyMount-test.js | 6 +- .../src/__tests__/ReactLegacyUpdates-test.js | 8 +-- .../__tests__/ReactServerRendering-test.js | 4 +- .../src/__tests__/ReactTestUtils-test.js | 14 ++-- .../src/__tests__/ReactUpdates-test.js | 8 +-- .../src/__tests__/validateDOMNesting-test.js | 28 +++----- .../react-dom/src/client/ReactDOMLegacy.js | 15 ++--- packages/react-dom/src/client/ReactDOMRoot.js | 8 +-- .../src/test-utils/ReactTestUtils.js | 2 +- .../src/legacy-events/EventPluginUtils.js | 4 +- .../src/legacy-events/accumulate.js | 4 +- .../src/legacy-events/accumulateInto.js | 4 +- .../src/ReactFiberBeginWork.js | 3 +- .../src/ReactFiberClassComponent.js | 21 +++--- .../src/ReactFiberReconciler.js | 2 +- .../src/__tests__/ReactLazy-test.internal.js | 2 +- .../src/ReactFizzClassComponent.js | 24 ++++--- packages/react-server/src/ReactFizzServer.js | 3 +- packages/react/src/ReactBaseClasses.js | 2 +- packages/react/src/ReactLazy.js | 4 +- .../ReactCoffeeScriptClass-test.coffee | 8 +-- .../react/src/__tests__/ReactES6Class-test.js | 16 ++--- .../src/__tests__/ReactElementClone-test.js | 4 +- .../__tests__/ReactTypeScriptClass-test.ts | 16 ++--- .../createReactClassIntegration-test.js | 12 ++-- packages/react/src/jsx/ReactJSXElement.js | 2 +- scripts/error-codes/codes.json | 64 ++++++++++--------- 39 files changed, 188 insertions(+), 215 deletions(-) diff --git a/packages/react-dom-bindings/src/client/validateDOMNesting.js b/packages/react-dom-bindings/src/client/validateDOMNesting.js index 85e6b69bfa4ce..f910455f008be 100644 --- a/packages/react-dom-bindings/src/client/validateDOMNesting.js +++ b/packages/react-dom-bindings/src/client/validateDOMNesting.js @@ -477,15 +477,14 @@ function validateDOMNesting( 'the browser.'; } console.error( - 'validateDOMNesting(...): %s cannot appear as a child of <%s>.%s', + '%s cannot appear as a child of <%s>.%s', tagDisplayName, ancestorTag, info, ); } else { console.error( - 'validateDOMNesting(...): %s cannot appear as a descendant of ' + - '<%s>.', + '%s cannot appear as a descendant of ' + '<%s>.', tagDisplayName, ancestorTag, ); @@ -507,13 +506,10 @@ function validateTextNesting(childText: string, parentTag: string): void { didWarn[warnKey] = true; if (/\S/.test(childText)) { - console.error( - 'validateDOMNesting(...): Text nodes cannot appear as a child of <%s>.', - parentTag, - ); + console.error('Text nodes cannot appear as a child of <%s>.', parentTag); } else { console.error( - 'validateDOMNesting(...): Whitespace text nodes cannot appear as a child of <%s>. ' + + 'Whitespace text nodes cannot appear as a child of <%s>. ' + "Make sure you don't have any extra whitespace between tags on " + 'each line of your source code.', parentTag, diff --git a/packages/react-dom/src/__tests__/ReactCompositeComponent-test.js b/packages/react-dom/src/__tests__/ReactCompositeComponent-test.js index b3ec748d92ffb..42d7b3133d36e 100644 --- a/packages/react-dom/src/__tests__/ReactCompositeComponent-test.js +++ b/packages/react-dom/src/__tests__/ReactCompositeComponent-test.js @@ -879,7 +879,7 @@ describe('ReactCompositeComponent', () => { root.render(); }); }).toErrorDev( - 'Foo(...): When calling super() in `Foo`, make sure to pass ' + + 'When calling super() in `Foo`, make sure to pass ' + "up the same props that your component's constructor was passed.", ); }); @@ -1233,14 +1233,14 @@ describe('ReactCompositeComponent', () => { }).toErrorDev([ // Expect two errors because invokeGuardedCallback will dispatch an error event, // Causing the warning to be logged again. - 'Warning: RenderTextInvalidConstructor(...): No `render` method found on the returned component instance: ' + + 'Warning: No `render` method found on the RenderTextInvalidConstructor instance: ' + 'did you accidentally return an object from the constructor?', - 'Warning: RenderTextInvalidConstructor(...): No `render` method found on the returned component instance: ' + + 'Warning: No `render` method found on the RenderTextInvalidConstructor instance: ' + 'did you accidentally return an object from the constructor?', // And then two more because we retry errors. - 'Warning: RenderTextInvalidConstructor(...): No `render` method found on the returned component instance: ' + + 'Warning: No `render` method found on the RenderTextInvalidConstructor instance: ' + 'did you accidentally return an object from the constructor?', - 'Warning: RenderTextInvalidConstructor(...): No `render` method found on the returned component instance: ' + + 'Warning: No `render` method found on the RenderTextInvalidConstructor instance: ' + 'did you accidentally return an object from the constructor?', ]); }); @@ -1280,16 +1280,16 @@ describe('ReactCompositeComponent', () => { }).toErrorDev([ // Expect two errors because invokeGuardedCallback will dispatch an error event, // Causing the warning to be logged again. - 'Warning: RenderTestUndefinedRender(...): No `render` method found on the returned ' + - 'component instance: you may have forgotten to define `render`.', - 'Warning: RenderTestUndefinedRender(...): No `render` method found on the returned ' + - 'component instance: you may have forgotten to define `render`.', + 'Warning: No `render` method found on the RenderTestUndefinedRender instance: ' + + 'you may have forgotten to define `render`.', + 'Warning: No `render` method found on the RenderTestUndefinedRender instance: ' + + 'you may have forgotten to define `render`.', // And then two more because we retry errors. - 'Warning: RenderTestUndefinedRender(...): No `render` method found on the returned ' + - 'component instance: you may have forgotten to define `render`.', - 'Warning: RenderTestUndefinedRender(...): No `render` method found on the returned ' + - 'component instance: you may have forgotten to define `render`.', + 'Warning: No `render` method found on the RenderTestUndefinedRender instance: ' + + 'you may have forgotten to define `render`.', + 'Warning: No `render` method found on the RenderTestUndefinedRender instance: ' + + 'you may have forgotten to define `render`.', ]); }); diff --git a/packages/react-dom/src/__tests__/ReactDOM-test.js b/packages/react-dom/src/__tests__/ReactDOM-test.js index 169e82a2cf5ae..a6bd2b80f3f7b 100644 --- a/packages/react-dom/src/__tests__/ReactDOM-test.js +++ b/packages/react-dom/src/__tests__/ReactDOM-test.js @@ -183,7 +183,7 @@ describe('ReactDOM', () => { expect(() => { ReactDOM.render(, myDiv, 'no'); }).toErrorDev( - 'render(...): Expected the last optional `callback` argument to be ' + + 'Expected the last optional `callback` argument to be ' + 'a function. Instead received: no.', ); }).toThrowError( @@ -195,7 +195,7 @@ describe('ReactDOM', () => { expect(() => { ReactDOM.render(, myDiv, {foo: 'bar'}); }).toErrorDev( - 'render(...): Expected the last optional `callback` argument to be ' + + 'Expected the last optional `callback` argument to be ' + 'a function. Instead received: [object Object].', ); }).toThrowError( @@ -207,7 +207,7 @@ describe('ReactDOM', () => { expect(() => { ReactDOM.render(, myDiv, new Foo()); }).toErrorDev( - 'render(...): Expected the last optional `callback` argument to be ' + + 'Expected the last optional `callback` argument to be ' + 'a function. Instead received: [object Object].', ); }).toThrowError( @@ -236,7 +236,7 @@ describe('ReactDOM', () => { expect(() => { ReactDOM.render(, myDiv, 'no'); }).toErrorDev( - 'render(...): Expected the last optional `callback` argument to be ' + + 'Expected the last optional `callback` argument to be ' + 'a function. Instead received: no.', ); }).toThrowError( @@ -249,7 +249,7 @@ describe('ReactDOM', () => { expect(() => { ReactDOM.render(, myDiv, {foo: 'bar'}); }).toErrorDev( - 'render(...): Expected the last optional `callback` argument to be ' + + 'Expected the last optional `callback` argument to be ' + 'a function. Instead received: [object Object].', ); }).toThrowError( @@ -262,7 +262,7 @@ describe('ReactDOM', () => { expect(() => { ReactDOM.render(, myDiv, new Foo()); }).toErrorDev( - 'render(...): Expected the last optional `callback` argument to be ' + + 'Expected the last optional `callback` argument to be ' + 'a function. Instead received: [object Object].', ); }).toThrowError( diff --git a/packages/react-dom/src/__tests__/ReactDOMComponent-test.js b/packages/react-dom/src/__tests__/ReactDOMComponent-test.js index 65c6dfa182a3a..53ad186761b74 100644 --- a/packages/react-dom/src/__tests__/ReactDOMComponent-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMComponent-test.js @@ -2188,7 +2188,7 @@ describe('ReactDOMComponent', () => { ); }); }).toErrorDev([ - 'Warning: validateDOMNesting(...): cannot appear as a child of ' + + 'Warning: cannot appear as a child of ' + '
.' + '\n in tr (at **)' + '\n in div (at **)', @@ -2208,7 +2208,7 @@ describe('ReactDOMComponent', () => { ); }); }).toErrorDev( - 'Warning: validateDOMNesting(...):

cannot appear as a descendant ' + + 'Warning:

cannot appear as a descendant ' + 'of

.' + // There is no outer `p` here because root container is not part of the stack. '\n in p (at **)' + @@ -2241,20 +2241,20 @@ describe('ReactDOMComponent', () => { root.render(); }); }).toErrorDev([ - 'Warning: validateDOMNesting(...): cannot appear as a child of ' + + 'Warning: cannot appear as a child of ' + '. Add a , or to your code to match the DOM tree generated ' + 'by the browser.' + '\n in tr (at **)' + '\n in Row (at **)' + '\n in table (at **)' + '\n in Foo (at **)', - 'Warning: validateDOMNesting(...): Text nodes cannot appear as a ' + + 'Warning: Text nodes cannot appear as a ' + 'child of .' + '\n in tr (at **)' + '\n in Row (at **)' + '\n in table (at **)' + '\n in Foo (at **)', - 'Warning: validateDOMNesting(...): Whitespace text nodes cannot ' + + 'Warning: Whitespace text nodes cannot ' + "appear as a child of
. Make sure you don't have any extra " + 'whitespace between tags on each line of your source code.' + '\n in table (at **)' + @@ -2283,7 +2283,7 @@ describe('ReactDOMComponent', () => { root.render( ); }); }).toErrorDev([ - 'Warning: validateDOMNesting(...): Whitespace text nodes cannot ' + + 'Warning: Whitespace text nodes cannot ' + "appear as a child of
. Make sure you don't have any extra " + 'whitespace between tags on each line of your source code.' + '\n in table (at **)' + @@ -2311,7 +2311,7 @@ describe('ReactDOMComponent', () => { ); }); }).toErrorDev([ - 'Warning: validateDOMNesting(...): Text nodes cannot appear as a ' + + 'Warning: Text nodes cannot appear as a ' + 'child of .' + '\n in tr (at **)' + '\n in Row (at **)' + diff --git a/packages/react-dom/src/__tests__/ReactDOMFloat-test.js b/packages/react-dom/src/__tests__/ReactDOMFloat-test.js index eaad571ad9759..64f79140917c8 100644 --- a/packages/react-dom/src/__tests__/ReactDOMFloat-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMFloat-test.js @@ -523,7 +523,7 @@ describe('ReactDOMFloat', () => { }).toErrorDev( [ 'Cannot render